一文读懂TypeScript类型兼容性

大家好，我是 CUGGZ。

JavaScript 是一门弱类型语言，它对类型是弱校验，正因为这个特点，所以才有了TypeScript这个强类型语言系统的出现，来弥补类型检查的短板。TypeScript在实现类型强校验的同时，还要满足 JavaScript 灵活的特点，所以就有了类型兼容性这个概念。了解类型兼容性可以避免在实际的开发中出现一些低级错误。下面就来看看类型兼容性的概念和分类。

1、类型兼容性的概念

所谓的类型兼容性 用于确定一个类型是否能赋值给其他类型 。TypeScript中的类型兼容性是 基于结构类型 的，结构类型是一种只使用其成员来描述类型的方式。其基本原则是， 如果 x 要兼容 y，那么 y 至少要具有与 x 相同的属性。

下面来看一个例子，构建一个 Teacher 类，然后声明一个接口 Student，Student 的属性 Teacher 都有，而且还多了其他的属性，这种情况下 Student 就兼容了 Teacher：

class Teacher {
    constructor(public weight: number, public name: string, public job: string) {
    
    }
}
interface Student {
    name: string
    weight: number
}
let x: Student;
x = new Teacher(120, 'TS', 'teacher') // :white_check_mark:

如果反过来，Teacher 并没有兼容 Student，因为 Student 的属性比 Person 少一个。

2、特殊类型的类型兼容性

先来看看 TypeScript 中一些特殊类型的类型兼容性。

（1）any

any 类型可以赋值给除了 never 之外的任意其他类型，反过来其他类型也可以赋值给 any。也就是说 any 可以兼容除了 never 之外的所有类型，同时也可以被所有的类型兼容。

let any: any;
let a: number = any;       // :white_check_mark:
let b: {} = any;           // :white_check_mark:
let b: () => number = any; // :white_check_mark:

（2）never

never 类型可以赋值给任何其他类型，但不能被其他任何类型赋值。

let never: never = (() => {
  throw Error('never');
})();

let a: number = never;       // :white_check_mark:
let b: () => number = never; // :white_check_mark:
let c: {} = never;           // :white_check_mark:

可以看到，这里将 never 类型赋值给了 number、函数、对象类型，都是没有问题的。

（3）unknown

unknown 和 never 的特性是相反的，即不能把 unknown 赋值给除了 any 之外的任何其他类型，但其他类型都可以赋值给 unknown。

let unknown: unknown;
const a: number = unknown;       // 不能将类型“unknown”分配给类型“number”。
const b: () => number = unknown; // 不能将类型“unknown”分配给类型“() => number”。
const c: {} = unknown;           // 不能将类型“unknown”分配给类型“{}”。

可以看到，当把 unknown 类型赋值给 number、函数、对象类型时，都报错了，这就是因为类型之间不能兼容。

3、函数类型的类型兼容性

函数的类型兼容性主要包括以下六个方面：

（1）参数数量

函数参数数量要想兼容，需要满足一个要求：如果将函数 y 赋值为 x，那么要求 x 中的每个参数都应在 y 中有对应，也就是 x 的参数个数小于等于 y 的参数个数：

let x = (a: number) => 0;
let y = (b: number, c: string) => 0;

上面定义的两个函数，如果进行赋值的话，来看下两种情况的结果：

y = x;  // :white_check_mark:

将 x 赋值给 y 是可以的，因为 x 的参数个数小于等于 y 的参数个数，而至于参数名是否相同是无所谓的。

而将 y 赋值给 x 就不可以了：

x = y; // 不能将类型“(b: number, c: string) => number”分配给类型“(a: number) => number”。

这里 y 的参数个数要大于 x，所以报错了。

（2）函数参数类型

除了参数数量，参数的类型也需要对应：

let x = (a: number) => 0;
let y = (b: string) => 0;
x = y; // error 不能将类型“(b: string) => number”分配给类型“(a: number) => number”。

可以看到，x 和 y 两个函数的参数个数和返回值都相同，只是参数类型对不上，所以也是不行的。

（3）剩余参数和可选参数

当要被赋值的函数参数中包含剩余参数（…args）时，赋值的函数可以用任意个数参数代替，但是类型需要对应：

const getNum = (
  arr: number[],
  callback: (...args: number[]) => number
): number => {
  return callback(...arr);
};
getNum(
  [1, 2],
  (...args: number[]): number => args.length // 返回参数的个数
);

剩余参数其实可以看做无数个可选参数，所以在兼容性方面是差不多的。

再来看一个可选参数和剩余参数结合的例子：

// 第二个参数callback是一个函数，函数的第二个参数为可选参数
const getNum = (
  arr: number[],
  callback: (arg1: number, arg2?: number) => number 
): number => {
  return callback(...arr); // error 应有 1-2 个参数，但获得的数量大于等于 0
};

这里因为 arr 可能为空数组，如果为空数组则…arr不会给callback传入任何实际参数，所以这里就会报错。如果换成return callback(arr[0], …arr)就没问题了。

（4）参数双向协变

函数参数双向协变即参数类型无需绝对相同：

let funcA = function(arg: number | string): void {};
let funcB = function(arg: number): void {};
// funcA = funcB 和 funcB = funcA都可以

这里 funcA 和 funcB 的参数类型并不完全一样，funcA 的参数类型为一个联合类型 number | string，而 funcB 的参数类型为 number | string 中的 number，这两个函数也是兼容的。

（5）返回值类型

函数返回值的类型也是要对应的：

let x = (a: number): string | number => 0;
let y = (b: number) => "a";
let z = (c: number) => false;
x = y; // :white_check_mark:
x = z; // 不能将类型“(c: number) => boolean”分配给类型“(a: number) => string | number”

这里 x 函数的返回值是联合类型，既可以是 string 类型也可以是 number 类型。而 y 的返回值类型是 number 类型，参数个数和类型也没问题，所以可以赋值给 x。而 z 的返回值类型 false 并不是 string 也不是 number，所以不能赋值。

（6）函数重载

带有重载的函数，要求被赋值的函数的每个重载都能在用来赋值的函数上找到对应的签名：

function merge(arg1: number, arg2: number): number; // merge函数重载的一部分
function merge(arg1: string, arg2: string): string; // merge函数重载的一部分
function merge(arg1: any, arg2: any) { // merge函数实体
  return arg1 + arg2;
}
function sum(arg1: number, arg2: number): number; // sum函数重载的一部分
function sum(arg1: any, arg2: any): any { // sum函数实体
  return arg1 + arg2;
}
let func = merge;
func = sum; // error 不能将类型“(arg1: number, arg2: number) => number”分配给类型“{ (arg1: number, arg2: number): number; (arg1: string, arg2: string): string; }”

sum 函数的重载缺少参数都为string返回值为string的情况，与merge函数不兼容，所以赋值时就会报错。

4、枚举的类型兼容性

数字枚举成员类型与数字类型是互相兼容的：

enum Status {
  On,
  Off
}
let s = Status.On;
s = 1;
s = 3;

虽然 Status.On 的值是 0，但是因为数字枚举成员类型和数值类型是互相兼容的，所以这里给s赋值为 3 是没问题的。但是不同枚举值之间是不兼容的：

enum Status {
  On,
  Off
}
enum Color {
  White,
  Black
}
let s = Status.On;
s = Color.White; // 不能将类型“Color.White”分配给类型“Status”。

虽然 Status.On 和 Color.White 的值都是 0，但它们是不兼容的。

字符串枚举成员类型和字符串类型是不兼容的：

enum Status {
  On = 'on',
  Off = 'off'
}
let s = Status.On
s = 'TypeScript' // 不能将类型"TypeScript"分配给类型“Status”

这里会报错，因为字符串字面量类型'TypeScript'和Status.On是不兼容的。

5、类类型的类型兼容性

比较两个类的类型兼容性时，只有实例成员和方法会相比较，类的静态成员和构造函数不进行比较：

class Animal {
  static age: number;
  constructor(public name: string) {}
}
class People {
  static age: string;
  constructor(public name: string) {}
}
class Food {
  constructor(public name: number) {}
}
let a: Animal;
let p: People;
let f: Food;
a = p; // ok
a = f; // 不能将类型“Food”分配给类型“Animal”。

Animal类和People类都有一个age静态属性，它们都定义了实例属性name，类型是string。把类型为People的p赋值给类型为Animal的a是没有问题的，因为类类型比较兼容性时，只比较实例的成员，这两个变量虽然类型是不同的类类型，但是它们都有相同字段和类型的实例属性name，而类的静态成员是不影响兼容性的，所以它俩时兼容的。而类Food定义了一个实例属性name，类型为number，所以类型为Food的f与类型为Animal的a类型是不兼容的，不能赋值。

类的私有成员和受保护成员：

类的私有成员和受保护成员会影响类的兼容性。当检查类的实例兼容性时，如果目标（要被赋值的那个值）类型（这里实例类型就是创建它的类）包含一个私有成员，那么源（用来赋值的值）类型必须包含来自同一个类的这个私有成员，这就允许子类赋值给父类：

class Parent {
  private age: number;
  constructor() {}
}
class Children extends Parent {
  constructor() {
    super();
  }
}
class Other {
  private age: number;
  constructor() {}
}
const children: Parent = new Children();
const other: Parent = new Other(); // 不能将类型“Other”分配给类型“Parent”。类型具有私有属性“age”的单独声明

当指定 other 为 Parent 类类型，给 other 赋值 Other 创建的实例的时候，会报错。因为 Parent 的 age 属性是私有成员，外面是无法访问到的，所以会类型不兼容。而children的类型我们指定为了Parent类类型，然后给它赋值为Children类的实例，没有问题，是因为Children类继承Parent类，且实例属性没有差异，Parent类有私有属性age，但是因为Children类继承了Parent类，所以可以赋值。

同样，使用 protected 受保护修饰符修饰的属性，也是一样的：

class Parent {
  protected age: number;
  constructor() {}
}
class Children extends Parent {
  constructor() {
    super();
  }
}
class Other {
  protected age: number;
  constructor() {}
}

const children: Parent = new Children();
const other: Parent = new Other(); // 不能将类型“Other”分配给类型“Parent”。属性“age”受保护，但类型“Other”并不是从“Parent”派生的类

6、泛型类型兼容性

泛型中包含类型参数，这个类型参数可能是任何类型，使用时类型参数会被指定为特定的类型，而这个类型只影响使用了类型参数的部分：

interface Data<T> {}
let data1: Data<number>;
let data2: Data<string>;
data1 = data2; // :white_check_mark:

data1 和 data2 都是 Data 接口的实现，但是指定的泛型参数的类型不同，TS 是结构性类型系统，所以上面将 data2 赋值给 data1 是兼容的，因为 data2 指定了类型参数为 string 类型，但是接口里没有用到参数 T，所以传入 string 类型还是传入 number 类型并没有影响。

再来看个例子：

interface Data<T> {
  data: T;
}
let data1: Data<number>;
let data2: Data<string>;
data1 = data2; // 不能将类型“Data<string>”分配给类型“Data<number>”。不能将类型“string”分配给类型“number”

现在结果就不一样了，赋值时报错，因为 data1 和 data2 传入的泛型参数类型不同，生成的结果结构是不兼容的。

来源：前端充电宝

链接: https://fly63.com/article/detial/12029