【TS】接口

约束对象的结构

interface MyInterface {
    
    
    name: string;
    age: number;
}

const obj: MyInterface = {
    
     name: "superman", age: 21 };

约束函数的结构

interface MyInterface {
    
    
    (num1: number, num2: number): number;
}

const fun: MyInterface = (num1, num2) => num1 + num2;

约束类的结构

interface MyInterface {
    
    
    name: string; // 属性
    sayHello(): void; // 方法
}

// 使用 `implements` 实现接口
class MyClass implements MyInterface {
    
    
    // 定义接口的属性
    constructor(public name: string) {
    
    }
    // 实现接口的方法
    sayHello(): void {
    
    
        console.log('MyClass');
    }
}

接口 vs 类型别名

interface MyInterface {
    
    
    name: string;
    age: number;
}
// 等效于
type MyType = {
    
    
    name: string;
    age: number;
};

1. type 不能重复定义；interface 可以重复定义

interface MyInterface {
    
    
    name: string;
    age: number;
}
interface MyInterface {
    
    
    gender: string;
}

此时 MyInterface 等同于：

interface MyInterface {
    
    
    name: string;
    age: number;
    gender: string;
}

2. interface 可以使用 extends 进行继承。如果需要同时继承多个父级接口，父级接口之间用 , 隔开

interface Animal {
    
    
    name: string;
}
interface Terrestrial {
    
    
    move: string;
}
interface Cat extends Animal, Terrestrial {
    
    
    climbTree: boolean;
}

此时 Cat 等同于：

interface Cat {
    
    
    name: string;
    move: string;
    climbTree: boolean;
}

3. type 和 interface 都可以使用 & 扩展成新的 type

interface Animal {
    
    
    name: string;
}
type Terrestrial = {
    
    
    move: string;
};
type Cat = Animal & Terrestrial & {
    
     climbTree: boolean };

此时 Cat 等同于：

interface Cat {
    
    
    name: string;
    move: string;
    climbTree: boolean;
}