一文读懂TypeScript类型兼容性

简介: 一文读懂TypeScript类型兼容性

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


1. 什么是类型兼容性?


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

下面来看一个例子,构建一个 Teacher 类 ,然后声明一个接口 StudentStudent 的属性 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') // OK

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


2. 特殊类型的兼容性


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

(1)any

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

typescript

复制代码

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

(2)never

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

typescript

复制代码

let never: never = (() => {
  throw Error('never');
})();
let a: number = never;       // ✅
let b: () => number = never; // ✅
let c: {} = never;           // ✅

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

(3)unknown

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

typescript

复制代码

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 的参数个数

typescript

复制代码

let x = (a: number) => 0;
let y = (b: number, c: string) => 0;
上面定义的两个函数,如果进行赋值的话,来看下两种情况的结果:
typescript
复制代码
y = x;  // ✅

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

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

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

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

(2)函数参数类型

除了参数数量,参数的类型也需要对应:

typescript

复制代码

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

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

(3)剩余参数和可选参数

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

typescript

复制代码

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

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

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

typescript

复制代码

// 第二个参数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)参数双向协变

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

typescript

复制代码

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

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

(5)返回值类型

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

typescript

复制代码

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

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

(6)函数重载

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

typescript

复制代码

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.OnColor.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。把类型为Peoplep赋值给类型为Animala是没有问题的,因为类类型比较兼容性时,只比较实例的成员,这两个变量虽然类型是不同的类类型,但是它们都有相同字段和类型的实例属性name,而类的静态成员是不影响兼容性的,所以它俩时兼容的。而类Food定义了一个实例属性name,类型为number,所以类型为Foodf与类型为Animala类型是不兼容的,不能赋值。

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

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”的单独声明

当指定 otherParent 类类型,给 other 赋值 Other 创建的实例的时候,会报错。因为 Parentage 属性是私有成员,外面是无法访问到的,所以会类型不兼容。而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; // ✅

data1data2 都是 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”

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

相关文章
|
1月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
46 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
8天前
|
JavaScript 安全 前端开发
TypeScript类型声明:基础与进阶
通过本文的介绍,我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型,TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码,提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。
21 2
|
21天前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。
|
1月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
1月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与最佳实践
【10月更文挑战第8天】深入理解TypeScript:类型系统与最佳实践
|
1月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
21天前
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
24 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧