本系列知识部分基于小满 ZS 的TypeScript 系列教程。我也会补充一些视频没有的内容。
interface 介绍
interface即接口，在 ts 中用于描述对象的“形状”。js 是鸭子类型，鸭子类型的通俗说法是：“如果它走起路来像鸭子，叫起来也是鸭子，那么它就是鸭子。” 只要一个对象包含interface中定义的所有属性、方法，那么它就属于这个interface定义的对象类型。
interface 知识点
1. interface 定义的属性、方法，对应的对象中不能多也不能少
interface Student {
name: string;
age: number;
say: () => void;
}
let a: Student = { //报错，提示缺少name属性
age: 18,
say() {
console.log(this.name);
},
};
2. interface 重名会自动重合
interface Student2 {
name: string;
age: number;
}
interface Student2 {
gender: string;
}
let b: Student2 = {
name: "sq",
age: 18,
gender: "male",
};
3. 索引签名
有不确定的属性时，可以使用这个功能
interface Student3 {
name: string;
age: number;
[propertyName: string]: any; //索引签名
}
let c: Student3 = {
name: "sq",
age: 18,
ID: "18170023728",
gender: "male",
};
// 调用
console.log(c["gender"]);
console.log(c.gender);
索引签名的类型也可以设置为 number：
这样可以模拟数组，熟悉 js 的应该知道，js 的数组也是一个对象
interface Student3 {
name: string;
age: number;
[propertyName: number]: any;
}
let c: Student3 = {
name: "sq",
age: 18,
1: "18170023728",
2: "male",
};
// 调用
console.log(c[1]);
4. 可选属性 ?
一个属性可以有，也可以没有
interface Student4 {
name: string;
age: number;
gender?: string;
}
let d2: Student4 = {
name: "sam",
age: 18,
};
5. 只读属性 readonly
制度属性不能被修改
interface Student5 {
name: string;
age: number;
readonly id: string;
readonly callBack: () => boolean;
}
let e: Student5 = {
name: "sam",
age: 18,
id: "18170023728",
callBack() {
return true;
},
};
//可以调用
e.callBack();
//不可以修改，报错
e.id = "18170023729";
e.callBack = () => false;
6. 接口继承
可以继承一个也可以继承多个
//export导出，可以避免相同文件夹/文件下，同一个接口名导致的各种问题
export interface Student extends Person, Singer {
name: string;
}
interface Person {
gender: string;
}
interface Singer {
sing: boolean;
}
let f: Student = {
name: "sam",
gender: "male",
sing: true
}
7. interface 约束函数类型
束函数的参数类型和返回值类型
interface Fn {
(name: string): number[],
}
const fn: Fn = (name) => {
return [1, 2]
}