TS的接口

一、属性的接口

属性接口，专门用来约束对象中的每一个属性。

基础语法：

interface 接口名 {
    属性名: 类型;
    属性名: 类型;
    // ...
}

案例：

interface Info {
    id: number;
    name: string;
    age?: number;
    sayHello?: () => void
}

const user: Info = {
    id: 1,
    name: 'Lee',
    age: 20
}

const admin: Info = {
    id: 2,
    name: 'Wang',
    sayHello: () => {
        console.log('hello');
    }
}

二、函数的接口

函数的接口分为两种情况：

函数属性接口：通过接口去约束函数参数和返回值的类型；
函数类型接口：通过接口去约束函数的类型；

1、函数属性接口

基础语法：

interface 接口名 {
    属性名：属性类型;
    属性名：属性类型;
}

function 函数名(参数名: 接口名): 返回值类型 {

}

案例：

interface MyParams {
    x: number;
    y: number;
}

function add(params: MyParams): number {
    return params.x + params.y;
}
add({ x: 1, y: 2 })

接口除了用来定义函数的参数外，也可以用来定义函数的返回值。

interface MyParams {
    x: number;
    y: number;
}

function add(params: MyParams[]): MyParams {
    return params[0];
}
add([{ x: 1, y: 2 }])

2、函数类型接口

可以使用 interface 来定义函数的类型。

基础语法：

interface 接口名 {
    (参数名: 参数值, 参数名: 参数值): 返回值类型
}

案例代码：

interface AddFn {
    (x: number, y: number): number
}

const add: AddFn = (x, y) => {
    return x + y;
}
add(1, 2)

在一个接口中，也可以使用另一个接口：

interface MyParams {
    x: number;
    y: number;
}

interface AddFn {
    (params: MyParams): number
}

const add: AddFn = (params) => {
    return params.x + params.y;
}
add({ x: 1, y: 2 })