标签：name 对象 gender age 接口 Person string 属性

在 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。