TypeScript 进阶之类型兼容——逆变、协变、双向协变和不变
这篇文章主要分析 TypeScript 中的类型兼容性,并通过例子详细介绍逆变、协变、双向协变和不变。
结构化
在基于名义类型的类型系统中,数据类型的兼容性或等价性是通过明确的声明和/或类型的名称来决定的。而结构性类型系统是基于类型的组成结构,且不要求明确地声明。
TS 是结构性的类型系统。所谓结构化就是对值所具有的结构进行类型检查。简单来说,要判断两个类型是否是兼容的,只需要看两个类型的结构是否兼容就可以了,不需要关心类型的名称是否相同。比如:
interface Named { name: string; } class Person { name: string; } let p: Named; // 兼容,因为是结构化类型 p = new Person(); 复制代码
在使用基于名义类型的语言,比如 C# 或 Java 中,这段代码会报错,因为 Person 类没有明确说明其实现了Named 接口。
变型
什么是变型,为什么需要变型?让我们先来看一个简单的例子:
假设我要给我的猫喂吃的,但是现在家里只有狗粮了。但既然猫粮和狗粮都是吃的,我能拿狗粮去喂猫吗?这是不是一个安全的行为,猫吃了会不会生病?这就是我们需要思考的问题。
变型都是发生在父子类型之间的。你可能会纠结要不要拿狗粮去喂猫,但是你肯定不会纠结要不要拿一件衣服去喂猫。
父子类型
让我们来写一个简单的父子类型:
interface Animal { age: number } interface Dog extends Animal { bark(): void } 复制代码
Dog 继承于 Animal,拥有比 Animal 更多的方法。因此我们说 Animal 是父类型,Dog 是它的子类型。需要注意的是,子类型的属性比父类型更多、更具体:
在类型系统中,属性更多的类型是子类型。
在集合论中,属性更少的集合是子集。
在联合类型中需要注意父子类型的关系,因为确实有点「反直觉」。'a' | 'b' | 'c'
乍一看比 'a' | 'b'
的属性更多,那么 'a' | 'b' | 'c'
是 'a' | 'b'
的子类型吗?其实正相反,'a' | 'b' | 'c'
是 'a' | 'b'
的父类型,因为前者包含的范围更广,而后者则更具体。
type Parent = "a" | "b" | "c"; type Child = "a" | "b"; let parent: Parent; let child: Child; // 兼容 parent = child // 不兼容,因为 parent 可能为 c,而 c 无法 assign 给 "a" | "b" child = parent 复制代码
小结:
父类型比子类型更宽泛,涵盖的范围更广,而子类型比父类型更具体
子类型一定可以赋值给父类型
extends
前面我们已经了解了父子类型。说到父子类型,我立刻想起了在 TS 中经常用到的 extends 关键字。比如在 TS 的内置类型中,我们经常看到这样的代码:
type NonNullable<T> = T extends null | undefined ? never : T; type Diff<T, U> = T extends U ? never : T; type Filter<T, U> = T extends U ? T : never; 复制代码
extends
是一个 条件类型关键字, 下面的代码可以理解为:如果 T 是 U 的子类型,那么结果为 X,否则结果为 Y
T extends U ? X : Y 复制代码
只要理解了父类型和子类型,理解条件类型就非常 easy 了。
当 T 是联合类型时,叫做分布式条件类型(Distributive conditional types)。类似于数学中的因式分解:
(a + b) * c = ac + bc 复制代码
也就是说当 T 为 "A" | "B"
时, 会拆分成 ("A" extends U ? X : Y) | ("B" extends U ? X : Y)
type Diff<T, U> = T extends U ? never : T; let demo: Diff<"a" | "b" | "d", "d" | "f">; // result: "a" | "b" 复制代码
"a"
不是"d" | "f"
的子集,取"a"
"b"
不是 "d" | "f" 的子集,取"b"
"d"
是"d" | "f"
的子集,取never
最后得出结果
"a" | "b"
协变和逆变
维基百科上关于协变和逆变的解释有点晦涩难懂。这里,我们用更通俗一点的语言来表述:
协变: 允许子类型转换为父类型
逆变: 允许父类型转换为子类型
还是觉得有点难懂?没关系,接下来我们再具体分析。
协变
协变可以用「鸭子类型」来理解。所谓鸭子类型,简单来说就是「如果它走起路来像鸭子,叫起来也是鸭子,那么它就是鸭子」。我们不用关心它是一只真的鸭子,还是一只鸡扮演的鸭子。
让我们来看一段代码:
let animal: Animal = { age: 12 }; let dog: Dog = { age: 12, bark: () => { } }; // 兼容,能赋值成功,这就是一个协变 animal = dog // 不兼容,会抛出类型错误:Property 'bark' is missing in type 'Animal' but required in type 'Dog' dog = animal 复制代码
在上面的代码中,dog 能够赋值给 animal。根据鸭子类型理论,只要一个类型包含 age,我就可以认为它是一个和 Animal 兼容的类型。因此 dog 可以成功赋值给 animal,而对于多出来的 bark() 方法,可以忽略不计。
反过来,animal 却不能赋值给 dog。因为 dog 要求的是 Dog 类型, 必须包含 age 和 bark,而 Animal 不满足这个条件。
逆变
有如下两个函数:
let visitAnimal = (animal: Animal): Dog => { animal.age; return { age: 12, bark() { } } } let visitDog = (dog: Dog): Animal => { dog.age; dog.bark(); return { age: 20 } } // 兼容 visitDog = visitAnimal // 不兼容, 会抛出类型错误 visitAnimal = visitDog 复制代码
为什么 visitAnimal 可以赋值给 visitDog,反之则会报错?改写一下上面的函数:
// before visitDog = visitAnimal // after visitDog = (dog: Dog): Animal => { // 入参 dog 满足 visitAnimal 入参需要的 Animal 类型 // 并且 visitAnimal 返回值 dog 包含更多的信息,也符合 visitDog 返回值要求的 Animal 类型 const dog = visitAnimal(dog); return dog.age; } 复制代码
这样是不是就好理解多了?把 visitAnimal 赋值给 visitDog,可以理解为在 visitDog 里面调用 visitAnimal 这个函数。 visitAnimal 的入参需要的是一个 Animal 类型,而 dog 包含更多的信息,显然满足这个条件。
反之则不行,我们可以按照上面的方法来改写:
// before visitAnimal = visitDog // after visitAnimal = (animal: Animal): Dog => { // 入参 animal 不满足 visitDog 入参要求的 Dog 类型 // 并且 visitDog 返回值 animal 不符合 visitDog 返回值要求的 Dog 类型。如果调用 animal.bark() 会导致程序抛错 const animal = visitDog(animal); return animal; } 复制代码
根据上面的实现,可以抽象出如下两个函数类型:
let visitAnimal: (animal: Animal) => Dog; let visitDog: (dog: Dog) => Animal; 复制代码
其中:
函数参数是逆变:Animal 变换成 Dog,父类型 -> 子类型
函数返回值是协变:Dog 变成 Animal,子类型 -> 父类型
// 可以想象成下面这样的类型 interface Fn { params: any[]; // 逆变 return: any; // 协变 } 复制代码
双向协变
在老版本的 TS 中,函数参数是双向协变的。也就是说,既可以协变又可以逆变,但是这并不是类型安全的。 在新版本 TS (2.6+) 中 ,你可以通过开启 strictFunctionTypes
或 strict
来修复这个问题。设置之后,函数参数就不再是双向协变的了。
不变
不变就非常好理解了,就是不允许变型。比如我想要一个梨,你就必须给我一个梨,给我苹果、香蕉等任何水果都是不行的。
interface Duck { name: string; age: number; city: string; } const fakeDuck: Duck = { name: "aDuck", age: 12, city: "America", price: 100 // 类型错误,因为多了一个 price 属性 } 复制代码
总结
不管是协变还是逆变,归根到底都是在保证类型安全的前提下,提供一些灵活性。我们也不用刻意去记什么是逆变、协变,在遇到问题时,可以按照文中的方法,简单改写一下表达式,就能够知道这样使用是否是类型安全的,在安全的情况下,可以接受和当前定义不完全一模一样的类型。
作者:橘子小睿
链接:https://juejin.cn/post/7019565189624250404