TypeScript|TypeScript对象的类型-接口 TypeScript|TypeScript接口

TypeScript接口
1.接口

interface Person { name: string; age: number; }let tom: Person = { name: 'Tom', age: 25 };

我们就约束了 tom 的形状必须和接口 Person 一致。

定义的变量比接口少了一些属性是不允许的

interface Person { name: string; age: number; }let tom: Person = { name: 'Tom' };

多一些属性也是不允许的：

interface Person { name: string; age: number; }let tom: Person = { name: 'Tom', age: 25, gender: 'male' };

都是会报错的

2.可选属性

interface Person { name: string; age?: number; }let tom: Person = { name: 'Tom' }; // 可以有也可以没有

属性后加问好表示可选，可以有也可以没有

这时还是不允许添加未定义的属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

interface Person { name: string; age?: number; [propName: string]: any; }let tom: Person = { name: 'Tom', gender: 'male', jj:"haoa" };

一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集

interface Person { name: string; age?: number; [propName: string]: string; }let tom: Person = { name: 'Tom', age: 25, gender: 'male' }; //这个就会报错

上例中，任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了。

就是他范围必须大于原来那些定义的

只读属性

interface Person { readonly id: number; name: string; age?: number; [propName: string]: any; }let tom: Person = { id: 89757, name: 'Tom', gender: 'male' }; tom.id = 9527; //index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property

使用 readonly 定义的属性 id 初始化后，又被赋值了，所以报错了。

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

interface Person { readonly id: number; name: string; age?: number; [propName: string]: any; }let tom: Person = { name: 'Tom', gender: 'male' }; tom.id = 89757; // index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'. //Property 'id' is missing in type '{ name: string; gender: string; }'. // index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.