共计 字 • 阅读约 min

什么是接口

在面向对象语言中,接口是一个很重要的概念,它可以对行为抽象,而具体如何行动需要由类(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;
}

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



文章更新于: 2021-4-17 23:45:37