6.接口和对象

在 TS 中，关于对象属性的类型约束，会比较繁琐，例如：

const student: { name: string, age: number,  gender: string } = { name: '张三', age: 20, gender: '男' };
const teacher: { name: string, age: number,  gender: string } = { name: '李四', age: 30, gender: '女' }

在 TS 中，提供了接口（interface）来定义对象的类型约束。

一、基础语法

interface 接口名 {
    属性名一: 数据类型;
    属性名二: 数据类型;
    // ...
}

建议接口名首字母大写。

代码示例：

interface Person {
    name: string;
    age: number;
    gender: string;
}

const student: Person = { name: '张三', age: 20, gender: '男' };
const teacher: Person = { name: '李四', age: 30, gender: '女' };

二、接口的可选属性

在属性名后添加 ? 来将当前属性设置为可选属性：

interface Person {
    name: string;
    age: number;
    gender?: string;  // 可选属性
}

const student: Person = { name: '张三', age: 20, gender: '男' };
const teacher: Person = { name: '李四', age: 30 };

三、只读属性

在属性名前面添加 readonly 来将属性设置为只读属性，即可以访问，但是不能修改。

interface Person {
    readonly name: string;
    age: number;
    gender?: string;  // 可选属性
}

const student: Person = { name: '张三', age: 20, gender: '男' };
const teacher: Person = { name: '李四', age: 30 };
// student.name = "王五"; // 报错

四、任意属性

任意属性是指，在接口中设置一个任意属性，那么在使用该接口时，就可以匹配一个任意名称的属性了。

interface Person {
    readonly name: string;
    age: number;
    gender?: string;  // 可选属性
    [propName: string]: any  // 任意属性
}

const student: Person = { name: '张三', age: 20, gender: '男', likes: ['吃饭', '睡觉'] };
const teacher: Person = { name: '李四', age: 30, tel: '13112312311' };

注意：在一个接口中如果定义了任意属性，那么其他属性的类型，必须是任意属性类型的子集。

type PropType = string | number | string[] | undefined;

interface Person {
    readonly name: string;
    age: number;
    gender?: string;  // 可选属性
    [propName: string]: PropType  // 任意属性
}

const student: Person = { name: '张三', age: 20, gender: '男', likes: ['吃饭', '睡觉'] };
const teacher: Person = { name: '李四', age: 30, tel: '13112312311' };

标签：name,对象,gender,age,接口,Person,string,属性
来源： https://www.cnblogs.com/web-simon/p/16523849.html