接口

TypeScript 的接口（Interface）是一种强大的方式来定义对象的形状,它不仅能够帮助我们改变思维方式,还能强化面向接口编程的能力。

接口类型

接口可以用于定义对象、数组、函数等的类型。

1interface PersonInfo {
2  name: string;
3  age: number;
4}
5
6// 定义对象的类型
7let zhangsan: PersonInfo = {
8  name: "张三",
9  age: 20,
10};
11
12// 定义数组的类型
13interface ArrayNumber {
14  // [下标类型]:值类型
15  // k 可以是任意变量名 , 含义代表索引的意思
16  [k: number]: number;
17}
18
19let arr1: ArrayNumber = [1, 2, 3];
20
21// 定义函数的类型
22interface PersonFn {
23  // (所有的参数及类型):函数返回值的类型
24  (p: PersonInfo): void;
25}
26
27let Person1: PersonFn = (obj: PersonInfo): void => {
28  console.log(obj.name, obj.age);
29};

注意：

很少使用接口类型来定义函数的类型,更多使用内联类型或类型别名配合箭头函数语法来定义函数类型；

继承

多个不同接口之间是可以实现继承的,但是如果继承的接口PersonInfo和被继承的接口NameInfo有相同的属性,并且类型不兼容,那么就会报错。

接口之间可以实现继承,组合成一个新的接口。

1interface NameInfo {
2  name: string;
3}
4
5interface AgeInfo {
6  age: number;
7}
8
9interface PersonInfo extends NameInfo, AgeInfo {
10  height: number;
11}
12
13let zs: PersonInfo = {
14  name: "张三",
15  age: 20,
16  height: 177,
17};

多个不同的接口可以实现继承,组合成一个新的接口,那么如果出现多个相同名字的接口会怎么样？

多个相同接口

多个相同名字的接口,会进行合并,得到一个新的接口；这个接口的特性一般用在扩展第三方库的接口类型。

1interface PersonInfo {
2    name: string,
3    age: number
4}
5
6interface PersonInfo {
7    name: string,
8    height: number
9}
10
11let zs: PersonInfo = {
12  name: "张三",
13  age: 20,
14  height: 177,
15};

缺省和只读特性

接口可以定义属性为可选（缺省）或只读。

1interface PersonInfo {
2  name?: string; // 缺省
3  readonly height: number; // 只读
4}

在 PersonInfo 中,name 属性是可选的,而 height 属性是只读的。

接口#

接口类型#

继承#

多个相同接口#

缺省和只读特性#

接口

接口类型

继承

多个相同接口

缺省和只读特性