深入理解TypeScript类型兼容性：规则与实战

学习类型兼容性的核心在于掌握TypeScript中一个类型能否赋值给另一个类型的判定规则。本节将详细阐述该语言在函数、枚举、类以及泛型场景下的具体兼容性判定逻辑。

1. 解释

类型兼容性的主要作用是判定某一类型是否具备赋值给其他类型的资格。

TypeScript采用静态类型检查机制，旨在让开发者在编译阶段直观地发现代码书写中的问题，从而培养良好的代码规范，有效规避各类低级错误。

let address: string = 'Baker Street 221B'
let year: number = 2010
address = year // Error

代码解释：第3行报错，提示类型‘number’无法赋值给类型‘string’。

2. 结构化

TypeScript的类型兼容性基于结构类型系统；结构类型仅依据其拥有的成员来描述类型特征。

TypeScript结构化类型系统的基本规则是：若x要兼容y，则y必须至少包含与x相同的属性。示例如下：

interface User {
  name: string,
  year: number
}

let protagonist = {
  name: 'Sherlock·Holmes',
  year: 1854,
  address: 'Baker Street 221B'
}

let user: User = protagonist // OK

代码解释：接口User中的每个属性在protagonist对象中均能找到对应属性且类型匹配。此外，protagonist虽拥有额外属性address，但赋值操作依然成功。

3. 比较两个函数

相较于原始类型和对象类型的比较，判断两个函数是否兼容相对复杂。判定函数兼容性需重点考察两个方面：参数是否兼容以及返回值是否兼容。

3.1 函数参数

首先通过一段代码示例进行说明：

let fn1 = (a: number, b: string) => {}
let fn2 = (c: number, d: string, e: boolean) => {}

fn2 = fn1 // OK
fn1 = fn2 // Error

代码解释：

第4行将fn1赋值给fn2之所以成立，原因在于：

• fn1的每个参数均能在fn2中找到对应类型的参数
• 参数顺序保持一致，且参数类型相互对应
• 参数名称无需相同

第5行将fn2赋值给fn1不成立，是因为fn2中的必需参数必须在fn1中找到对应参数，显然第三个布尔类型参数在fn1中并未找到。

参数类型对应即可，无需完全相同：

let fn1 = (a: number | string, b: string) => {}
let fn2 = (c: number, d: string, e: boolean) => {}

fn2 = fn1 // OK

代码解释：fn1的第一个参数为number和string的联合类型，可以对应fn2的第一个参数类型number，因此第4行赋值正常通过。

3.2 函数返回值

创建两个仅在返回值类型上存在差异的函数：

代码解释：最后一行报错，原因是函数x()缺少location属性。

类型系统强制要求源函数的返回值类型必须是目标函数返回值类型的子类型。由此可推导出：若目标函数的返回值类型为void，则源函数的返回值可以是任意类型。

let x : () => void
let y = () => 'mybj'

x = y // OK

4. 枚举的类型兼容性

枚举类型与数字类型之间相互兼容：

enum Status {
  Pending,
  Resolved,
  Rejected
}

let current = Status.Pending
let num = 0

current = num
num = current

不同类型的枚举之间则不兼容：

enum Status { Pending, Resolved, Rejected }
enum Color { Red, Blue, Green }

let current = Status.Pending
current = Color.Red // Error

5. 类的类型兼容性

类与对象字面量及接口的兼容性非常相似，但类分为实例部分和静态部分。

在比较两个类类型数据时，仅比较实例成员，静态成员和构造函数不参与比较。

class Animal {
  feet!: number
  constructor(name: string, numFeet: number) { }
}

class Size {
  feet!: number
  constructor(numFeet: number) { }
}

let a: Animal
let s: Size

a = s!  // OK
s = a  // OK

代码解释：类Animal和类Size拥有相同的实例成员feat属性，且类型一致。尽管构造函数参数不同，但构造函数不参与两个类类型的比较，因此最后两行代码可以相互赋值。

类的私有成员和受保护成员会影响兼容性判定。允许子类赋值给父类，但不能赋值给其他拥有相同类型成员的类。

class Animal {
  protected feet!: number
  constructor(name: string, numFeet: number) { }
}

class Dog extends Animal {}

let a: Animal
let d: Dog

a = d! // OK
d = a // OK

class Size {
  feet!: number
  constructor(numFeet: number) { }
}

let s: Size

a = s! // Error

代码解释：

第13行，子类可以赋值给父类。

第14行，父类之所以能够赋值给子类，是因为子类中没有成员。

最后一行，由于类Animal中的成员feet是受保护的，因此赋值操作失败。

6. 泛型的类型兼容性

泛型的类型兼容性根据其是否被成员使用而有所不同。首先看一段代码示例：

interface Empty<T> {}

let x: Empty<number>
let y: Empty<string>

x = y! // OK

上述代码中，x和y是兼容的，因为它们的结构在使用类型参数时并无差异。但当泛型被成员使用时：

interface NotEmpty<T> {
  data: T
}
let x: NotEmpty<number>
let y: NotEmpty<string>

x = y! // Error

代码解释：由于第4行泛型参数为number类型，第5行泛型参数为string类型，因此最后一行赋值失败。

如果没有指定泛型类型的泛型参数，会将所有泛型参数视为any类型进行比较。

7. 小结

充分利用TypeScript的类型检查机制来规范代码，减少不必要的错误，这正是我们使用TypeScript的初衷。

到此这篇关于深入理解TypeScript类型兼容性的文章就介绍到这了，更多相关TypeScript类型兼容性内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！