javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Typescript协变与逆变

Typescript协变与逆变简单理解

作者：天地会珠海分舵

深入学习TypeScript类型系统的话，逆变、协变、双向协变、不变是绕不过去的概念。这些概念看起来挺高大上的，其实并不复杂，这篇文章我们就来学习下协变和逆变吧

1. 协变和逆变简单理解

先简单说下协变和逆变的理解。

首先，无论协变还是逆变，必然是存在于有继承关系的类当中，这个应该好理解吧。如果你只有一个类，那没有什么好变的。

其次，无论协变还是逆变，既然是变，那必然是存在不同类之间的对象的赋值，比如子类对象赋值给父类对象，父类对象赋值给子类对象，这样才叫做变。

结合上面两条，我觉得协变和逆变在我的字典中就能定义成：支持子类对象赋值给父类对象的情况称之为协变；反之，支持父类对象赋值给子类对象的情况称之为逆变。

举个栗子，我们先假定我们有这么几个类

class Animal {}
class Dog extends Animal {}
class Greyhound extends Dog {}

那么按照上面的理解，要整出一个示例的话，首先我们这里类的继承关系这个条件有了，其次我们要整出的就是这几个类赋值的情况，那么用实参和形参的方式来demo应该是很不错的选择。

2. 协变举例

那么协变的情况我们可以用代码表示为

class Animal {}
class Dog extends Animal {
    bark(): void {
        console.log("Bark")
    }
}
class Greyhound extends Dog {}
function makeDogBark(dog:Dog) : void {
    dog.bark()
}
let dog: Dog = new Dog();
let greyhound: Greyhound = new Greyhound();
let animal: Animal = new Animal();
makeDogBark(greyhound) // OK。 子类赋值给父类
makeDogBark(animal) // Error。编译器会报错，父类不能赋值给子类

我们如果有面向对象基础的话，相信对上面这段代码不难理解, 子类赋值给父类，即协变的情况，在面向对象编程中是非常常见的，且这是实现语言多态特性的基础。而多态，却又是实现众多设计模式的基础。

3. 逆变举例

当我们将函数作为参数进行传递时，就需要注意逆变的情况。比如下面的makeAnimalAction这个函数，就尝试错误的让一只猫去做出狗吠的动作。

class Animal {
    doAnimalThing(): void {
        console.log("I am a Animal!")
    }
}
class Dog extends Animal {
    doDogThing(): void {
        console.log("I am a Dog!")
    }
}
class Cat extends Animal {
    doCatThing(): void {
        console.log("I am a Cat!")
    }
}
function makeAnimalAction(animalAction: (animal: Animal) => void) : void {
    let cat: Cat = new Cat()
    animalAction(cat)
}
function dogAction(dog: Dog) {
    dog.doDogThing()
}
makeAnimalAction(dogAction) // TS Error at compilation, since we are trying to use `doDogThing()` to a `Cat`

这里作为实参的dogAction函数接受一个Dog类型的参数，而makeAnimalAction的形参animalAction接受一个Dog的父类Animal类型的参数，返回值都是void，那么按照正常的思路，这时应该可以像上面协变的例子一样进行正常的赋值的。

但事实上编译是不能通过的，因为最终makeAnimalAction中的代码会尝试以cat为参数去调用dogAction，然后让一个cat去执行doDogThing。

所以这里我们把函数作为参数传递时，如果该函数里面的参数牵涉到有继承关系的类，就要特别注意下逆变情况的发生。

不过有vscode等代码编辑工具的错误提示支持的话，应该也很容易排除这种错误。

4. 更简单点的理解

我觉得将上面的例子稍微改动下，将makeAnimalAction的形参的类型抽出来定义成一个type，应该会有助于我们理解上面的代码。

class Animal {
    doAnimalThing(): void {
        console.log("I am a Animal!")
    }
}
class Dog extends Animal {
    doDogThing(): void {
        console.log("I am a Dog!")
    }
}
class Cat extends Animal {
    doCatThing(): void {
        console.log("I am a Cat!")
    }
}
function makeAnimalAction(animalAction: AnimalAction) : void {
    let cat: Cat = new Cat()
    animalAction(cat)
}
type AnimalAction =  (animal: Animal) => void
type DogAction =  (dog: Dog) => void
let dogAction: DogAction = (dog: Dog) => {
    dog.doDogThing()
}
const animalAction: AnimalAction = dogAction // Error: 和上面一样的逆变导致的错误
makeAnimalAction(animalAction)

以上两个都是协变的情况。下面我们看下逆变所导致的错误那一行。

animalAction = dogAction，如果有C/C++经验的，就可以理解成一个函数指，指向另外一个函数，否则理解成一个函数复制给另外一个函数也可以。

假如这个语句可以执行，那么执行之前，dogAction(dog: Dog)只能接受Dog和GreyHound类型的对象，然后去做狗狗都有的动作。

执行之后，因为现在animalAction指向了dogAction，但是animalAction自身的参数是(animal: Animal)，即可以接受所有动物类型的对象。

所以最终这里animalAction就变成了这幅模样（隐隐约约觉得这是理解的关键）:

function animalAction(animal: Animal) {
 animal.doDogThing()
}

这很明显就是不合理的嘛！所有狗狗都是动物，但这里反过来就不行，不是所有动物都能做狗狗能做的事情，比如这里传个Cat对象进来，那岂不就是让猫去做狗狗的事情了吗。

而反过来，这里假如我们先定义了animalAction， 然后我们让dogAction = animalAction，这种做法却是可行的。我们看最终dogAction变成

function dogAction(dog: Dog) {
 dog.doAnimalThing()
}

即dogAction(dog:Dog)指向了animalAction(animal: Animal)， 也就是一个以父类型的对象为参数的函数赋予给了一个以子类型的对象为参数的函数，这和我们协变时候的对象之间的赋值时，只能子对象赋值给父对象的做法是相反的。我想，这应该也是为什么叫做逆变的原因吧。

本来这里在我头脑过的时候感觉应该很容易说清楚的，没有想到写下来的时候还是得写这么一大堆，希望能有帮助吧。

5. 参考

https://dev.to/codeozz/how-i-understand-covariance-contravariance-in-typescript-2766

到此这篇关于Typescript协变与逆变简单理解的文章就介绍到这了,更多相关Typescript协变与逆变内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文