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>