4) TypeScript中对象接口的使用

什么是接口

在面向对象语言中，接口是一个很重要的概念，它可以对行为抽象，而具体如何行动需要由类(class)去实现。

TypeScript 中的接口常用于：对类的一部分行为抽象，对对象的形状进行描述

demo

interface IPerson {
    name:string;
    age:number;
}

// 使用接口来声明对象
let tony:IPerson = {
    name: 'Tony',
    age: 25
}

这样就可以约束 tony 对象，必须符合 IPonser 接口规定

注意：使用接口来声明对象，属性的个数不多也不能少，要完全符合接口规定

接口命名

1. 首字母大写 ，如：Ponser
2. 前面加上 I (Interface)前缀，如：IPonser

可选属性

有时我们不需要完全匹配一个接口，就可以使用可选属性，这个属性就可加可不加

Interface IPerson {
    name: string;
    age: number;
    smoking?: boolean;
}

// 这样,可以选择添加该属性
let user1: IPonser = {
    name: 'Tony',
    age: 18,
    smoking: true
}
// 也可以选择不添加该属性
let user2: IPonser = {
    name: 'Tony',
    age: 18
}

注意：虽然接口有可选属性，但是也不允许添加未定义属性

任意属性

有时我们不确定一个接口有多少属性，就可以使用任意属性

interface IPerson {
    name: string;
    age: number;
    smoking?: boolean;
    [propName: string]: any;
}

// 这是就可以添加任意带有正确属性值的属性,
let user: IPonser = {
    name: 'Tony',
    age: 18,
    smoking: true,
    hobby:'唱歌,跳舞,rap,篮球',
    weight:120
}

[propName: string] 表示任意属性取 string 类型的值

注意：当任意属性存在时，确定属性和可选属性都必须是它的类型的子集

interface IPerson {
    name: string;
    age: number;
    smoking?: boolean;
    [propName: string]: string;
}

let user: IPonser = {
    name: 'Tony',
    age: 18,
    smoking: true,
    hobby:'唱歌，跳舞，rap，篮球'
}
// 这样就会报错, 因为可选属性smoking的值是boolean, 而任意属性的值是string

任意属性中使用联合类型

一个接口中只允许存在一个任意属性，但是任意属性的数据类型可能是多个，就可以使用联合类型

interface IPerson {
    name: string;
    age: number;
    smoking?: boolean;
    [propName: string]: string | number | boolean;
}

let user: IPonser = {
    name: 'Tony',
    age: 18,
    smoking: true,
    hobby:'唱歌，跳舞，rap，篮球',
    weight:120
}

只读属性

有时一个属性需要初始化赋值后就不能在被改变，就可以使用 readony 定义成只读属性

interface IPerson {
    readonly id: number;
    name: string;
    age: number;
    smoking?: boolean;
    [propName: string]: string | number | boolean;
}

注意：只读属性，在初始化是必须要赋值，其次再被初始化赋值后，不能二次更改