TypeScript中的接口和类型兼容性-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1150 天，文章内容可能已经过时。

TypeScript中的扩展类型有：类型别名、枚举、接口、类

扩展类型——接口

在TypeScript中使用 interface 来表示一个接口

TypeScript的接口的作用：用于约束类、对象、函数的契约（标准）

契约（标准）的形式：

API文档，弱标准
代码约束，强标准

接口约束对象

interface User {
	name: string,
	age: number
}

1
2
3
4

接口约束函数

interface User {
	name: string,
	age: number,
	sayHello(): void
}

// 或者

interface User {
	name: string,
	age: number,
	sayHello: () => void
}

1
2
3
4
5
6
7
8
9
10
11
12
13

约束单个函数

interface User {
	(name: string): boolean
}

1
2
3

接口可以继承
可以通过接口之间的继承，实现多种接口的组合

interface A {
  A: number;
}

interface B extends A {
  B: string;
}

let c: B = {
  B: "sdf",
  A: 234,
};

1
2
3
4
5
6
7
8
9
10
11
12

接口也可以继承多个

interface A {
  A: number;
}

interface B {
  B: string;
}

interface C extends A, B {
  C: boolean;
}

let c: C = {
  B: "sdf",
  A: 234,
  C: true,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用类型别名也可以实现类似的组合效果，需要通过 & ，它叫做交叉类型（不推荐使用）

type A = {
  A: number;
};

type B = {
  B: string;
};

type C = {
  C: boolean;
} & A &
  B;

let c: C = {
  B: "sdf",
  A: 234,
  C: true,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

但是类型别名的交叉类型和接口的继承是有区别的：

子接口不能覆盖父接口的成员

interface A {
  A: number;
}

interface B {
  B: string;
}

interface C extends A, B {
  B: boolean;
}

let c: C = {
  B: "sdf",
  A: 234,
  C: true,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

可以看到提示错误
TypeScript子接口不能覆盖父接口的成员

交叉类型会把相同成员的类型进行交叉

type A = {
  A: number;
};

type B = {
  B: string;
};

type C = {
  B: number;
} & A &
  B;

let c: C = {
  B: "sdf",
  A: 234,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

虽然相同成员的类型可以进行交叉，但是在赋值的时候就会出现问题，显示当前为never类型
TypeScript交叉类型会把相同成员的类型进行交叉

readonly
只读修饰符，修饰的目标是只读，不参与编译

interface User {
  readonly id: string;
  name: string;
  age: number;
}

let u: User = {
  id: "2332",
  name: "sjxlife",
  age: 24,
};

u.id = "234234";

1
2
3
4
5
6
7
8
9
10
11
12
13

可以看到使用readonly修饰符之后，想要修改id属性会报错
TypeScript的readonly修饰符

readonly对数组的修饰

let arr: readonly number[] = [1, 2, 4];

arr = [1, 2, 3];

console.log(arr); // [1, 2, 3]

1
2
3
4
5

可以看到数组arr依然可以修改，因为这里的readonly是对 number[] 数字数组这个类型进行约束的，并不是对arr进行约束（要对arr进行约束可以使用const），所以只要修改之后的arr还是数字数组，那么就没有问题，但是只要使用了readonly，那么数组里面的方法（push、pop等）都没有了

类型兼容性

类型兼容性值的是，例如：如果B能赋值给A B -> A，则说明B和A类型兼容，那么如果判断B是否能赋值给A呢？可以使用鸭子辨型法

鸭子辨型法（子结构辨型法）：目标类型需要某一些特征，赋值的类型只要能满足该特征即可，例如：

interface User {
	name: string,
	age: number
}

const sjxlife: User = {
	name: "sjxlife",
	age: 18,
	specialty: 'swim'
}

1
2
3
4
5
6
7
8
9
10

接口User有两个属性，姓名name和年龄age，而人物sjxlife拥有name和age这两个属性，这就说明两个兼容

但是对于不同的类型使用的方式不一样：

基本类型：完全匹配
对象类型：鸭子辨型法
类型断言
当直接使用对象字面量赋值的时候，会进行更加严格的判断，这时候如果使用多余的属性会报错，例如：

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

let obj = {
  name: "sjxlife",
  age: 18,
  specialty: "swim",
};

const sjxlife: User = obj;

1
2
3
4
5
6
7
8
9
10
11
12

TypeScript中的接口和类型兼容性
可以看到，当直接使用对象赋值的时候报错了，显示不能赋值specialty，必须使用前面的那种写法，只能外部赋值，这里直接赋值会报错是因为我们这时我们明明知道使用的是User类，还加上了specialty属性，这样不符合逻辑，而前面的那种写法一般来说obj是通过某个函数调用得来的，不然一般是不会这么写的，而函数调用时已经通过了类型检查，所以不会报错，而这里报错我们就可以使用类型断言 as

interface User {
  name: string;
  age: number;
}
const sjxlife: User = {
  name: "sjxlife",
  age: 18,
  specialty: "swim",
} as User;

1
2
3
4
5
6
7
8
9

TypeScript中的接口和类型兼容性
可以看到代码现在没有再报错了

函数类型
参数：传递给目标函数的参数可以少，但不可以多
返回值：要求返回必须返回，不要求返回可以不返回
例如：此时n和i都可以不传递，但是最后一定要返回一个boolean值

interface Condition {
	(n: number, i: number): boolean
}

1
2
3