1.TypeScript接口基本使用
声明接口需要使用 interface 关键字。
interface User {name: string;age: number;
}使用接口约束对象的类型。
const user: User = {name: "张三",age: 20,
};使用接口约束函数的类型。
interface Sum {(n: number, m: number): number;
}
const sum: Sum = function (a, b) {return a + b;
};使用接口约束类的成员。interface Calendar {name: string;addEvent(): void;removeEvent(): void;
}
class GoogleCalendar implements Calendar {name: string = "test";addEvent(): void {}removeEvent(): void {}
}2 宽松的接口检查
TypeScript 接口检查是宽松的，当变量满足了接口规范以后，即使变量中存在接口规范以外的属性也是可以的。
interface User {name: string;age: number;
}
let user: User = {name: "张三",age: 20,
};
let someone = {name: "李四",age: 50,sex: "男",
};
user = someone;
interface Reportable {summary(): void;
}
function printSummary(item: Reportable): void {item.summary()
}
const person = {name: "张三",summary() {console.log(`您好, 我的名字叫${this.name}`);},
};
printSummary(person);对于宽松的接口检查政策字面量是个例外，也就是说对于字面量的接口类型检查是严格的，不能出现接口规范以外的其他属性。
interface User {name: string;age: number;
}
// ✅
const user: User = { name: "张三", age: 20 };
// ❌
// 不能将类型"{ name: string; age: number; sex: string; }"分配给类型"User"
// 对象字面量只可以指定已知属性, "sex"不在类型"User"中
const another: User = { name: "李四", age: 40, sex: "男" };
interface Reportable {summary(): void;
}
function printSummary(item: Reportable): void {item.summary();
}
// ❌
// 类型"{ name: string; summary(): void; }"的参数不能赋给类型"Reportable"的参数。
// 对象字面量只可以指定已知属性, "name"不在类型"Reportable"中。ts(2345)
printSummary({name: "张三",summary() {console.log(`您好, 我的名字叫${this.name}`);},
});
那么如何绕过字面量严格类型检查模式呢？// 使用类型断言
interface User {name: string;age: number;
}
const another: User = { name: "李四", age: 40, sex: "男" } as User;
// 使用索引签名
interface User {name: string;age: number;[key: string]: string | number;
}
const another: User = { name: "李四", age: 40, sex: "男" };3 接口继承
接口具有继承特性即接口与接口之间可以存在继承关系，而且一个接口可以继承多个接口。
// 接口继承示例
interface Sizes {sizes: string[];getAvailableSizes(): string[];
}
interface Shape {color: string;
}
interface Pizza extends Sizes, Shape {name: string;
}
let pizza: Pizza = {name: "张三",color: "skyblue",sizes: ["large", "small"],getAvailableSizes() {return this.sizes;},
};在继承了接口以后可以对被继承接口中的属性进行重写，但是重写的类型一定要在原有类型的范围以内。
interface User {// name: string | number | boolean;name: any;age: number;
}
interface MyUser extends User {name: boolean;
}4 接口合并
接口具有声明合并特性，即多个相同名称的接口会自动合并。
interface Box {height: number;width: number;
}
interface Box {scale: number;
}
let box: Box = { height: 5, width: 6, scale: 10 };5 接口函数重载
interface GetMessage {(id: number): Message | undefined;(type: MessageType): Message[];
}
const getMessage: GetMessage = (query: any): any => {if (typeof query === "number") {return data.find((message) => message.id === query);} else {return data.filter((message) => message.type === query);}
};
