对象的类型——接口
在TypeScript
中,我们使用接口(Interaces)来定义对象的类型。
什么是接口
在面向对象语言中,接口(Interaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。
TypeScript
中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也经常用于对[对象的形状(shape)]进行描述。
interface Person {
name: string,
age: number
}
let tom: Person = {
name: 'tom',
age: 18
}
上面的例子中,我们定义了一个接口Person
,接着定义了一个变量tom
,它的类型是Person
。这样,我们就约束了tom
的形状必须和接口Person
一致。
接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。
定义的变量比接口多一些属性和少一些属性都是不允许的:
let Tom: Person = {
name: 'tom',
age: 18 ,
sex: '男'
} // 不能将类型“{ name: string; age: number; sex: string; }”分配给类型“Person”。对象文字可以只指定已知属性,并且“sex”不在类型“Person”中。
let Tom: Person = {
name: 'tom',
} //类型 "{ name: string; }" 中缺少属性 "age",但类型 "Person" 中需要该属性。
可见,赋值的时候,变量的形状必须和接口的形状保持一致。
可选属性
有时候我们希望不要完全匹配一个形状,那么可以用可选属性:
interface Person {
name: string,
age?: number
}
let tom1:Person = {
name:"tom"
}
let tom2: Person = {
name: 'Tom',
age: 25
};
可选属性的含义是该属性可以不存在。
但是仍然不允许添加未定义的属性:
let tom3: Person = {
name: 'Tom',
age: 25,
sex: "男"
}; // 不能将类型“{ name: string; age: number; sex: string; }”分配给类型“Person”。对象文字可以只指定已知属性,并且“sex”不在类型“Person”中。
任意属性
有时候我们希望一个接口允许有任意的属性,可以使用如下方式:
interface Person {
name: string,
age?: number,
[propName: string]: any
}
let tom:Person = {
name:'tom',
age:12,
sex:"男"
}
使用 [propName: string] 定义了任意属性取 string 类型的值。规定的新增的属性的键需要是string
,否则编译报错。
interface Person {
name: string,
age?: number,
[propName: number]: any
}
let tom:Person = {
name:'tom',
age:12,
sex:"男" // sex: string
}
与键不同,一旦定义了任意属性的值的类型,那么确定属性和可选属性的类型都必须是它的类型的子集:
interface Person {
name: string, // 类型“string”的属性“name”不能赋给字符串索引类型“number”
age?: number,
[propName: string]: number
}
let tom1:Person = {
name:'tom', // 不能将类型“{ name: string; age: number; }”分配给类型“Person”。 属性“name”与索引签名不兼容。 不能将类型“string”分配给类型 “number”。
age:12,
}
let tom2:Person = {
name:'tom',
age:12,
sex:"男" // 类型“string”的属性“name”不能赋给字符串索引类型“number”
}
综上,键的类型限制只针对新增的属性,但是值的类型限制针对所有的属性,包括确定属性、可选属性和任意属性。
一个接口,只能定义一个任意属性,如果需要对任意属性设置多个属性值类型,使用联合类型。
interface Person {
name: string,
age?: number,
[propName: string]: number | string
}
let tom:Person = {
name:'tom',
age:12,
sex:"男"
}
需要注意的是键的类型不能使用联合类型。
只读属性
有时候,我们希望对象中一些字段只能在穿件的时候被复制,那么可以用readonly
定义只读属性:
interface Person {
readonly id: number,
name: string,
age?: number,
[propName: string]: number | string
}
let tom:Person= {
id:1,
name:'tom',
gender:'male'
}
tom.id = 2;//无法分配到 "id" ,因为它是只读属性。
需要注意的是,只读属性和确定属性,可选属性一样,收到任意属性的值类型限制。
另外需要注意的是,只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候:
interface Person {
readonly id?: number,
name: string,
age?: number,
[propName: string]: number | string
}
let tom:Person= {
name:'tom',
gender:'male'
}
tom.id = 2;// 无法分配到 "id" ,因为它是只读属性。
上例中,报错信息有两处,第一处是在对 tom 进行赋值的时候,没有给 id 赋值。
第二处是在给tom.id
赋值的时候,由于它是只读属性,所以报错了。