TypeScript接口——对象类型定义

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只读