TypeScript 是一种由微软开发的，基于 JavaScript 的编程语言，它提供了类型系统和面向对象编程的支持，在前端开发中越来越受欢迎。在 TypeScript 中，逆变和协变是两个重要的概念，它们可以帮助我们更好地理解类型系统和面向对象编程思想的应用。在本文中，我们将详细介绍 TypeScript 中逆变和协变的概念和应用，并提供代码示例，帮助读者加深对这些概念的理解，同时也为读者提供指导意义，帮助读者更好地应用 TypeScript。
什么是逆变
在 TypeScript 中，逆变是指从更具体的类型到更一般的类型的转换。例如，Animal 是一个更一般的概念，而 Dog 是一个更具体的概念，因此，我们可以将一个 Dog 类型的对象赋值给一个 Animal 类型的变量。在逆变中，我们需要使用 in 关键字来表示类型的逆变。
下面是一个简单的例子，我们有一个 Animal 类型和一个 Dog 类型，我们定义一个函数，函数的参数是一个 Animal 类型的变量，函数的实现中，我们让 Dog 类型的对象叫一声，因为 Dog 类型的对象是 Animal 类型的对象的一种，因此在函数调用时，我们可以传入一个 Dog 类型的对象，这种情况下，Dog 类型的对象会被转化成 Animal 类型的对象，在函数内部进行处理：
-- -------------------- ---- -------
----- ------ -
----- -------
----------------- ------- -
--------- - -----
-
------- -
------------------- --- ---------------
-
-
----- --- ------- ------ -
------ -------
----------------- ------- ------ ------- -
------------
---------- - ------
-
------- -
------------------- --- ------------- --- - ----------------
-
-
-------- ------------- ------- -
---------------
-
--- --- - --- ------------ ------- ------------
-----------在上面的代码中，我们定义了一个 Animal 类和一个 Dog 类，Dog 继承了 Animal 类。我们定义了一个函数 greet，函数的参数是一个 Animal 类型的变量。我们创建了一个 Dog 类型的对象 dog，并将其作为参数传递给 greet 函数，在函数内部，我们调用了 Animal 类型的 speak 方法，因为 Dog 类型是 Animal 类型的子类，因此在函数调用时，Dog 类型的对象会被转化成 Animal 类型的对象。最终输出的结果是：
Hello, I'm Lucky. I'm a Golden Retriever.
什么是协变
在 TypeScript 中，协变是指从更一般的类型到更具体的类型的转换。例如，Animal 是一个更一般的概念，而 Dog 是一个更具体的概念，因此，我们可以将一个 Animal 类型的变量分配给一个 Dog 类型的变量。在协变中，我们需要使用 out 关键字来表示类型的协变。
下面是一个简单的例子，我们有一个 Animal 类型和一个 Dog 类型，我们定义一个函数，函数的返回值是一个 Animal 类型的对象，但实际上返回的是一个 Dog 类型的对象。因为 Dog 类型是 Animal 类型的子类，因此我们可以将一个 Dog 类型的对象赋值给一个 Animal 类型的变量：
-- -------------------- ---- -------
----- ------ -
----- -------
----------------- ------- -
--------- - -----
-
-
----- --- ------- ------ -
------ -------
----------------- ------- ------ ------- -
------------
---------- - ------
-
-
-------- --------- ------ -
------ --- ------------ ------- ------------
-
--- ------- ------ - ---------
--------------------在上面的代码中，我们定义了一个 Animal 类和一个 Dog 类，Dog 继承了 Animal 类。我们定义了一个函数 getDog，函数的返回值是一个 Animal 类型的对象，但实际上返回的是一个 Dog 类型的对象。我们将这个函数的返回值赋值给一个 Animal 类型的变量 animal，因为 Dog 类型是 Animal 类型的子类，因此我们可以将一个 Dog 类型的对象赋值给一个 Animal 类型的变量。最终输出的结果是：
Dog {name: "Lucky", breed: "Golden Retriever"}逆变和协变的应用
逆变和协变在 TypeScript 中有很多应用，其中一个重要的应用是在泛型中的使用。在泛型中，我们经常需要使用逆变和协变来规定泛型的类型约束。下面是一个例子，我们定义了一个 Box 类型，Box 类型中包含了一个 value 属性，可以存储任何类型的值。我们定义了一个 getBoxValue 函数，函数的参数是一个 Box 类型的变量，函数的返回值是 Box 类型中 value 属性的值。在函数中我们使用了 in 和 out 关键字来表示逆变和协变：
-- -------------------- ---- -------
----- ------ -
------ --
------------------ -- -
---------- - ------
-
-
-------- ------------------- ------- ---- - -
------ ----------
-
--- ------ - --- ----------------
--- ------ - --- ------------------
---------------------------------
---------------------------------在上面的代码中，我们定义了一个 Box 类型，Box 类型中包含了一个 value 属性，可以存储任何类型的值。我们定义了一个函数 getBoxValue，函数的参数是一个 Box 类型的变量，函数的返回值是 Box 类型中 value 属性的值。在函数中我们使用了 in 和 out 关键字来表示逆变和协变。我们创建了一个 Box<number> 类型的对象 numBox 和一个 Box<any> 类型的对象 anyBox，我们将这两个对象作为参数传递给 getBoxValue 函数，函数返回了它们的值。最终输出的结果是：
10 Hello
总结
本文介绍了 TypeScript 中逆变和协变的应用，逆变和协变是指从更具体的类型到更一般的类型或从更一般的类型到更具体的类型的转换。这两个概念在 TypeScript 中的应用非常广泛，特别是在泛型中的使用中非常重要。在代码中，我们使用了 in 和 out 关键字来表示逆变和协变。我们希望本文能够帮助读者更好地理解 TypeScript 中类型系统的应用，并能够更好地应用 TypeScript 进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d943b968c7c53b0c3afce