接口是对 JavaScript 本身的随意性进行约束,通过定义一个接口,约定了变量、类、函数等应该按照什么样的格式进行声明,实现多人合作的一致性。TypeScript 编译器依赖接口用于类型检查,最终编译为 JavaScript 后,接口将会被移除。
可选属性
可选属性的含义是该属性在被变量定义时可以不存在。
interface Clothes {
color: string;
size: string;
price?: number;
}
// 这里可以不定义属性 price
let myClothes: Clothes = {
color: 'blue',
size: 'XL'
}
带有可选属性的接口与普通的接口定义差不多,只是在可选属性名字定义的后面加一个 ?
符号。
备注:常见服装型号为:S(小)、M(中)、L(大)、XL(加大);
只读属性
一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 readonly 来指定只读属性,比如,一旦衣服制作完成,则颜色和尺寸就不能被修改了:
interface Clothes {
readonly color: string;
readonly size: string;
price?: number;
}
let myClothes: Clothes = {
color: 'BLUE',
size: 'XL',
price: 99
}
// 不可修改
myClothes.color= 'BLACK'
// error TS2540: Cannot assign to 'color' because it is a constant or a read-only property
任意属性
有时候我们希望接口允许有任意的属性,可以用 []
将属性包裹起来:
interface Clothes {
readonly color: string;
readonly size: string;
price?: number;
[prop: string]: any;
}
// 任意属性 activity
let myClothes: Clothes = {
color: 'BLUE',
size: 'XL',
price: 99,
factory: 'china'
}
代码说明:接口 Clothes 可以有任意数量的属性,只要它们不是 color size 和 price 即可,那么就无所谓它们的类型是什么。