协变和逆变#

协变和逆变是编程理论中一个很重要的话题。用于表达父类子类在安全类型转换后的兼容性（或者说继承关系）。定义为：如果A，B代表两个类型；f()表示类型转换；A -> B表示A是B的子类。

当f()是协变时：若 A -> B，则f(A) -> f(B)
当f()是逆变时：若 A -> B，则f(B) -> f(A)
当f()是双变时：若 A -> B，则以上均成立
当f()是不变时：若 A -> B，则以上均不成立，没有兼容关系

1
class Animal {
2
  move(){
3
    console.log("animal is moving");
4
  }
5
}
6

7
class Cat extends Animal {
8
  purr() {
9
    console.log("cat is purring");
10
  }
11
}
12

13
class WhiteCat extends Cat {
14
  showoffColor() {
15
    console.log("see my hair color");
16
  }
17
}

我们有名为Animial的父类，Cat是Animal的子类。WhiteCat是Cat的子类，即WhiteCat -> Cat -> Animal。根据父类兼容子类的原则可知：

1
let animal: Animal;
2
let cat: Cat;
3
let whiteCat: WhiteCat;
4

5
animal = cat;
6
animal = whiteCat;
7
cat = whiteCat;

抛出问题#

假如现在有一个函数，类型为(param: Cat) => Cat。那么它的兼容类型是什么呢？

我们可以把这个问题分解成两个部分参数兼容性和返回值兼容性。

(param: Cat) => void的兼容类型是什么？
() => Cat的兼容类型是什么？

参数兼容性#

我们假设(param: Cat) => void为A，此时有以下两种函数：

B: (param: WhiteCat) => void
C：(param: Animal) => void

那么A兼容哪一个函数？

假设兼容B#

那么此时 A = B成立：

1
let A: (param: Cat) => void;
2
const B = (param: WhiteCat) => {
3
  param.move();
4
  param.purr();
5
  param.showoffColor();
6
};
7

8
A = B;
9
A(new Cat());

函数运行到param.showoffColor()会报错。那么假设不成立。

假设兼容C#

那么此时 A = C成立：

1
let A: (param: Cat) => void;
2
const C = (param: Animal) => {
3
  param.move();
4
};
5

6
A = C;
7
A(new Cat());

此时函数成功运行。那么假设成立。

所以(param: Animal) => void -> (param: Cat) => void 。根据前面的定义可以看出函数参数是逆变的。

返回值兼容性#

我们假设() => Cat为A，此时有以下两种函数：

B: () => Animal
C：() => WhiteCat

那么A兼容哪一个函数？

假设兼容B#

那么此时 A = B成立：

1
let A: () => Cat;
2
const B = () => new Animal();
3

4
A = B;
5
const result = A();
6
result.move();
7
result.purr();

函数运行到result.purr()会报错。那么假设不成立。

假设兼容C#

那么此时 A = C成立：

1
let A: () => Cat;
2
const C = () => new WhiteCat();
3

4
A = C;
5
const result = A();
6
result.move();
7
result.purr();

此时函数成功运行。那么假设成立。

所以() => WhiteCat -> () => Cat。根据前面的定义可以看出函数返回值是协变的。

函数参数类型的现实#

在ts中，参数类型是双变的，也就是说既是协变，也是逆变。这当然不安全。所以我们可以通过开启strictFunctionTypes修复这个问题，保证参数类型是逆变。

那么为什么ts会让函数参数类型保留双变转换呢？下面是一个十分常见的例子：

1
interface Event { timestamp: number; }
2
interface MouseEvent extends Event { x: number; y: number }
3

4
function listenEvent(eventType: EventType, handler: (n: Event) => void) {
5
    /* ... */
6
}
7

8
// 虽然不安全，且编译无法通过，但是十分常见的使用方式
9
listenEvent(EventType.Mouse, (e: MouseEvent) => console.log(e.x, e.y));
10

11
// 为了保证编译通过，只能通过以下方式
12
listenEvent(EventType.Mouse, (e: Event) => console.log((e as MouseEvent).x, (e as MouseEvent).y));
13
listenEvent(EventType.Mouse, ((e: MouseEvent) => console.log(e.x, e.y)) as (e: Event) => void);

而如果函数参数类型是双变，那么上面第一种形式的代码也能顺利通过编译，无需使用后两种绕路的方式。