TypeScript引入类别的概念之后,对象类型的定义就显得比较重要了,不然经常会碰到一些eslint的红线提醒。
基本定义:
Example 01
// 定义Person类型,包含name和age属性
interface Person {
name: string;
age: number;
}
// 定义一个Person类型的变量
let kylin: Person = {
name: 'Kylin',
age: 30
};
TypeScript中定义了接口后,后续定义该变量,必须保持属性的一致,不能比接口多任何属性,也不能少任何属性。
可选属性
Example 02
// 定义Person类型,包含name和age属性,age为可选属性
interface Person {
name: string;
age?: number;
}
// 定义一个Person类型的变量
let kylin: Person = {
name: 'Kylin'
};
可选属性的含义是该属性在变量定义时可以存在也可以不存在,此时仍然不可以添加未定义的属性
任意属性
Example 03
// 定义Person类型,包含name和age属性,允许添加其他属性
interface Person {
name: string;
age?: number;
[propName: string]: any;
}
// 定义一个Person类型的变量,包含name属性,不包含可选属性age,并新增了性别gender属性
let kylin: Person = {
name: 'Kylin',
gender: 'female'
};
值得注意的是,一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集
如上述例3中string和number都是any的子集,如果需要限定新增的属性只能是string类型,那么可以使用下面的定义
// 定义Person类型,包含name和age属性,允许添加其他属性
interface Person {
name: string;
age?: number;
[propName: string]: string | number;
}
// 定义一个Person类型的变量,包含name属性,不包含可选属性age,并新增了性别gender属性
let kylin: Person = {
name: 'Kylin',
gender: 'female'
};
只读属性
// 定义Person类型,包含name和age属性,允许添加其他属性
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
// 定义一个Person类型的变量,包含name属性,不包含可选属性age,并新增了性别gender属性
let kylin: Person = {
id: 103009332,
name: 'Kylin',
gender: 'female'
};
kylin.id = 00447853; //这里会报错,因为id是只读属性,只能在创建的时候被赋值;这里需要注意的是readonly的限制是第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候
let laura: Person = {
name: 'Laura',
gender: 'femal'
} // 报错,没有给id赋值
laura.id = 123123; // 报错,id只读