关于typescript:TS泛型理解学习笔记

概念定义
    泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在应用的时候再指定类型的一种个性，使函数或类更加通用
实战演示
    1. 简略演示
        <span class=”colour” style=”color: rgb(198, 120, 221);”>function</span><span class=”colour” style=”color: rgb(171, 178, 191);”> fn</span><span class=”colour” style=”color: rgb(102, 153, 0);”><</span><span class=”colour” style=”color: rgb(152, 195, 121);”>T</span><span class=”colour” style=”color: rgb(102, 153, 0);”>></span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span><span class=”colour” style=”color: rgb(153, 153, 153);”>(</span><span class=”colour” style=”color: rgb(171, 178, 191);”>value</span><span class=”colour” style=”color: rgb(153, 153, 153);”>:</span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span><span class=”colour” style=”color: rgb(152, 195, 121);”>T</span><span class=”colour” style=”color: rgb(153, 153, 153);”>)</span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span><span class=”colour” style=”color: rgb(153, 153, 153);”>:</span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span><span class=”colour” style=”color: rgb(152, 195, 121);”>T</span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span><span class=”colour” style=”color: rgb(153, 153, 153);”>{</span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span><span class=”colour” style=”color: rgb(198, 120, 221);”>return</span><span class=”colour” style=”color: rgb(171, 178, 191);”> value </span><span class=”colour” style=”color: rgb(153, 153, 153);”>}</span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span>
        <span class=”colour” style=”color: rgb(198, 120, 221);”>const</span><span class=”colour” style=”color: rgb(171, 178, 191);”> num</span><span class=”colour” style=”color: rgb(153, 153, 153);”>:</span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span><span class=”colour” style=”color: rgb(102, 153, 0);”>number</span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span><span class=”colour” style=”color: rgb(102, 153, 0);”>=1</span><span class=”colour” style=”color: rgb(171, 178, 191);”></span><span class=”colour” style=”color: rgb(171, 178, 191);”></span>
        <span class=”colour” style=”color: rgb(198, 120, 221);”>const</span><span class=”colour” style=”color: rgb(171, 178, 191);”> res1 </span><span class=”colour” style=”color: rgb(102, 153, 0);”>=</span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span><span class=”colour” style=”color: rgb(97, 174, 238);”>fn</span><span class=”colour” style=”color: rgb(153, 153, 153);”>(</span><span class=”colour” style=”color: rgb(171, 178, 191);”>num</span><span class=”colour” style=”color: rgb(153, 153, 153);”>)   ————– 返回 Number 类型 </span><span class=”colour” style=”color: rgb(171, 178, 191);”></span>
        <span class=”colour” style=”color: rgb(198, 120, 221);”>const</span><span class=”colour” style=”color: rgb(171, 178, 191);”> str</span><span class=”colour” style=”color: rgb(153, 153, 153);”>:</span><span class=”colour” style=”color: rgb(171, 178, 191);”> String</span><span class=”colour” style=”color: rgb(102, 153, 0);”>=</span><span class=”colour” style=”color: rgb(171, 178, 191);”> ‘1</span><span class=”colour” style=”color: rgb(152, 195, 121);”>'</span><span class=”colour” style=”color: rgb(171, 178, 191);”></span>
        <span class=”colour” style=”color: rgb(198, 120, 221);”>const</span><span class=”colour” style=”color: rgb(171, 178, 191);”> res1 </span><span class=”colour” style=”color: rgb(102, 153, 0);”>=</span><span class=”colour” style=”color: rgb(171, 178, 191);”> </span><span class=”colour” style=”color: rgb(97, 174, 238);”>fn</span><span class=”colour” style=”color: rgb(153, 153, 153);”>(</span><span class=”colour” style=”color: rgb(171, 178, 191);”>str</span><span class=”colour” style=”color: rgb(153, 153, 153);”>)  </span>    <span class=”colour” style=”color: rgb(153, 153, 153);”>————— 返回 String 类型 </span>
        总结：
        函数 fn 前面带的一个 \<T> 括号，括号外面的 T 是占位符能够随便写的，如 \<A> 或者 \<B>
        传入参数也可不申明类型，<span class=”colour” style=”color: rgb(18, 18, 18);”>TypeScript 的编译器会利用 </span> 类型推论 <span class=”colour” style=”color: rgb(18, 18, 18);”> 来确定参数的类型 </span>
        函数定义的时候不申明参数和返回值类型，而是在函数调用的时候去确定类型
    2. 泛型类型
        一个泛型函数的类型如下：
        < 泛型变量名称 >(参数 1: 泛型变量, 参数 2: 泛型变量, … 参数 n: 泛型变量) => 泛型变量

        <span class=”colour” style=”color: rgb(18, 18, 18);”>能够以对象字面量的模式来定义泛型函数（这更像是接口），如：</span>

        let foo: {\<T>(arg: T): void };
        foo = function \<T>(arg: T): void {
          console.log(arg);
        }
        foo(11); // 11

        将下面的例子中的 \`{\<T>(arg: T): void }\` 改为接口，则有：

        interface IGeneric {
          \<T>(arg: T): void
        }
        let foo: IGeneric = function \<T>(arg: T): void {
          console.log(arg)
        }
        foo(11); // 11

    3. 泛型束缚
        泛型能够通过 extends 一个接口来实现泛型束缚，写法如：< 泛型变量 extends 接口 >，例子：

        interface IArray {
              length: number
        }

        function logIndex\<T extends IArray>(arg: T): void {
          for (let i = 0; i < arg.length; ++i) {
            console.log(i)
          }
        }

        let arr = [1, 2, 3,4]
        logIndex\<number>(arr) // 报错
        logIndex\<number[]>(arr) // 容许
        logIndex(arr) // 主动类型推导，容许

<span class=”colour” style=”color:transparent”> 实战指在定 </span>
<span class=”colour” style=”color:transparent”> 义函数、接口或类的时候，不预先指定具体的类型，而在应用的时候再指定类型的一种个性。以此减少代码通用性。</span>