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>