Typescript-泛型

Dear 丶 2022-10-13 10:30 290阅读 0赞

##  ##

## 概念 ##

TypeScript的泛型与其他面向对象的语言中的定义是相似的。泛型可以理解为在我们定义函数、接口或者类的时候，不预先指定其相关的类型，而是在使用的时候手动指定类型。这和TypeScript基础类型中的any是有区别的。[点击免费学习][Link 1]

当我们不使用泛型的时候，可能就如下这样：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>function</code> <code>show(name: string): string { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>name;</code></p> <p><code>}</code></p> <p></p> <p><code>function</code> <code>show(name: any): any { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>name;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

上面例子中用any或许没有什么问题，但是当我们想传入的参数类型和返回值类型相同时，使用any时的返回值就可能有多种情况了。还有就是我们平时也会考虑重用性，提取公共组件等。这时泛型就能派上了。下面是一个泛型函数的例子：

这个show函数后面的 **T** ，叫做类型变量，这个我们后面会介绍。这个函数我们可以用两种方法调用。  
第一种为传入参数，包括类型参数：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>show&lt;string&gt;(</code><code>"james"</code><code>); </code><code>//</code><code>"james"</code></p> </td> 
  </tr> 
 </tbody> 
</table>

第二种为不包括类型参数，这种方式利用了**类型推论**，这个再后面的章节会讲到：

## 泛型变量 ##

上面所写的例子中，我们可以在“<>”中指定一个变量T，并且我们要把这个T定义在参数和返回值上。编译器在检查我们的代码的时候，我们必须在函数体中正确的使用这个通用的类型。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>function</code> <code>show&lt;T&gt;(arg: T): T { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(arg.length)&nbsp; </code><code>//</code><code>错误，类型T不存在length属性</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>arg;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

上面的例子中，我们在打印arg的length中报错了。原因是我们在使用这个函数的时候，传入的参数可能为数字，而数字是没有length属性的。  
当然，我们在调用函数的时候也要正确调用：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>function</code> <code>show&lt;T&gt;(arg: T): T { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>arg;</code></p> <p><code>}</code></p> <p><code>show&lt;string&gt;(1); </code><code>//</code><code>错误，参数1的类型不是string</code></p> <p><code>show&lt;&gt;(1); </code><code>//</code><code>错误，参数类型不能为空</code></p> </td> 
  </tr> 
 </tbody> 
</table>

针对数组：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>function</code> <code>show&lt;T&gt;(arg: T[]): T[] { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>arg;</code></p> <p><code>}</code></p> <p><code>show&lt;string&gt;([</code><code>"奥"</code><code>,</code><code>"利"</code><code>,</code><code>"给"</code><code>]);&nbsp; </code><code>//</code><code>[</code><code>"奥"</code><code>, </code><code>"利"</code><code>, </code><code>"给"</code><code>]</code></p> <p></p> <p><code>function</code> <code>show&lt;T&gt;(arg: Array&lt;T&gt;): Array&lt;T&gt; { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>arg;</code></p> <p><code>}</code></p> <p><code>show&lt;number&gt;([6, 6, 6]); </code><code>//</code> <code>[6, 6, 6]</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 泛型接口 ##

如下所示：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>interface IMan { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;T&gt;(arg: T): T</code></p> <p><code>}</code></p> <p></p> <p><code>function</code> <code>man</code><code>&lt;T&gt;(arg: T): T{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>arg;</code></p> <p><code>}</code></p> <p></p> <p><code>let</code> <code>showMan: IMan = </code><code>man</code><code>;</code></p> <p><code>showMan(</code><code>"james"</code><code>); </code><code>//</code><code>"james"</code></p> </td> 
  </tr> 
 </tbody> 
</table>

还有另外一种写法，这种方法我们可以把泛型参数当做整个接口的参数：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>interface IMan&lt;T&gt; { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>(arg: T): T</code></p> <p><code>}</code></p> <p></p> <p><code>function</code> <code>man</code><code>&lt;T&gt;(arg: T): T{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>arg;</code></p> <p><code>}</code></p> <p></p> <p><code>let</code> <code>showMan: IMan&lt;string&gt; = </code><code>man</code><code>;</code></p> <p><code>showMan(</code><code>"james"</code><code>); </code><code>//</code><code>"james"</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这样的好处就是在使用时知道具体的参数类型了。

## 泛型类 ##

我们可以使用（<>）和尖括号中间的变量，然后跟在类名的后面来表示泛型类。需要注意的是，泛型类指的是实例部分的类型，类的静态属性不能使用泛型类型。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>class Man&lt;T&gt; { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: T;</code></p> <p></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>constructor(arg: T) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = arg;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>play(a: T) : T { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>a;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</p> <p><code>}</code></p> <p><code>let</code> <code>showMan = new Man&lt;string&gt;(</code><code>"James"</code><code>);</code></p> <p><code>showMan.name;&nbsp; </code><code>//</code><code>"James"</code></p> <p><code>showMan.play(</code><code>"ball"</code><code>); </code><code>//</code><code>"ball"</code></p> </td> 
  </tr> 
 </tbody> 
</table>

也可以稍微复杂一点：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>class Man&lt;T&gt; { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: T;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>sum</code><code>: T[];</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>constructor(arg: T) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = arg;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.</code><code>sum</code> <code>= [];</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>push(item: T): void{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.</code><code>sum</code><code>.push(item) </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>output() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this.</code><code>sum</code><code>;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> <p><code>let</code> <code>showMan = new Man&lt;string&gt;(</code><code>"James"</code><code>);</code></p> <p><code>showMan.push(</code><code>"one for all"</code><code>);</code></p> <p><code>showMan.output(); </code><code>//</code><code>[</code><code>"one for all"</code><code>]</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 泛型约束 ##

让我们回到泛型变量一节中的一个例子：

如果我们想要使用length属性，那该怎么办？可以看下面的例子：

虽然上面的例子没有再报错，但是因为这个泛型函数被定义了约束，所以我们再调用函数的时候又有了讲究，也就是我们在传值的时候需要像下面的例子一样：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>interface ILen { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>length: number;</code></p> <p><code>&nbsp;</code><code>}</code></p> <p></p> <p><code>function</code> <code>show&lt;T extends ILen&gt;(arg: T): T { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(arg.length)&nbsp; </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>arg;</code></p> <p><code>}</code></p> <p><code>show(3); </code><code>//</code><code>错误，参数3不能分配给类型ILen </code></p> <p><code>show({ length: 2 }); </code><code>//</code> <code>2&nbsp; {length: 2}</code></p> <p><code>show({length:2, arg:1}) </code><code>//2</code>&nbsp; <code>{length: 2, arg: 1}</code></p> <p><code>show({length:2, arg:</code><code>"james"</code><code>}) </code><code>//2</code> <code>{length: 2, arg: </code><code>"james"</code><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**最后**

文中有些地方可能会加入一些自己的理解，若有不准确或错误的地方，欢迎指出~

[Link 1]: https://jq.qq.com/?_wv=1027&k=nKNuXAFr