<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                [TOC] >[success] # 泛型(Generics) 第一部分 ![](https://img.kancloud.cn/08/cb/08cb56d19fc956d2ce623b65258b4068_359x297.png) 上面用一張圖描述了學習 **TypeScript** 的一個過程, **Adding simple type annotations** 的意思是 **給我們的變量加一些簡單的類型聲明** ,這個 **滑梯很平滑** ,但是到了 **Generics(泛型)** 就直線下降到 **地獄難度** ,這意味著,我們只要掌握了 **Generics(泛型)** 就把 **typescript** 給攻破了,接下來我們講一講 **Generics(泛型)** 是怎么出現的,它是 **為了解決什么問題** ? >[success] ## 函數使場景問題 demo 舉例:現在我們有一個 **函數 echo** ,它只做一件事,我們 **傳入一個參數,它把參數返回** **index.ts** ~~~ function echo (arg){ return arg } const result = echo(123) ~~~ **編輯器圖片** : ![](https://img.kancloud.cn/e0/0d/e00d3580515c61c36a1e23ed3ced52e5_286x137.png) 上面的代碼會出現什么問題呢 ?我們 **傳入的數字 123** ,鼠標指向 **result** 時,返回的類型是 **any** ,這 **不是我們想要的結果,這樣我們的變量就喪失了類型** ,這不是一個好現象,怎么辦呢,我們 **給函數的參數以及返回的參數定義一個 number 類型** ,代碼如下: **index.ts** ~~~ function echo (arg: number): number{ return arg } const result = echo(123) ~~~ **編輯器圖片**: ![](https://img.kancloud.cn/0f/67/0f67c50bcb1a05812dab8941a6ee7dd6_377x130.png) 但是我們有可能想 **不單單只是想傳入 number 類型的參數,有可能是 string、boolean 甚至是復雜類型** ,該怎么辦呢,大家可能就會想了,換成 **any** 唄,代碼如下: **index.ts** ~~~ function echo (arg: any): any{ return arg } const result = echo(123) ~~~ 但是這還不是我們想要的結果,這只能說 **傳入的值是 any ,返回的值也是 any** ,但是我們 **傳入與返回的值都無法做到統一** ,我們還是 **喪失了類型** ,甚至我們還可以出現一個 **bug** ,還可以把 **result** 常量 **定義成 string** 類型,因為 **echo 返回的是 any 類型,string 屬于 any 下的一個類型** ,代碼如下: **index.ts** ~~~ function echo (arg: any): any{ return arg } const result:string = echo(123) ~~~ **編輯器圖片**: ![](https://img.kancloud.cn/02/5b/025b320cc50b5207c94e0fda7cbf4af0_356x134.png) 但是理論上我們都知道,我們 **傳入的 數字,要返回一個 number** ,那么怎么樣來解決這個問題呢,這時候 **泛型(Generics)** 就來拯救我們了。 >[success] ## 用泛型(Generics)解決函數問題 **泛型(Generics)** : 在 **定義函數、接口、Class類時,我們不預先指定具體類型,而是在使用時再指定類型** 我們要寫 **泛型(Generics)** 首先要找到 **函數名稱 echo** , 在 **echo 后面加一對尖括號(<T\>),尖括號里面可以定義泛型(Generics)的名稱** ,我這里就叫做 **T** ,這個 **名稱叫什么都可以**, **T** 只是一種習慣的寫法罷了,這樣 **我們就創造了我們第一個泛型的參數** ,相當于 **它創造了一個占位符 ,這個占位符叫 T** ,可以 **把它看做是一個神秘的變量** ,它現在是什么 **類型** 我們不知道,可以是 **任意類型**,在使用時候我會講到,這時候我們把 **參數的類型** 改成 **T** , **返回值** 也 **修改成 T** ,具體代碼如下: **index.ts** ~~~ function echo<T>(arg: T): T{ return arg } const str: string = 'str' const result = echo(str) ~~~ **編輯器圖片**: ![](https://img.kancloud.cn/52/18/5218b1d505123d0d648977f9342f7e53_363x217.png) 傳入的是 **string** , **返回** 的也是 **string** ,這樣就達到了我們想要的效果,當然我們也可以不給 **str 常量定義類型**,因為它可以自動做 **[類型推論](http://www.hmoore.net/wangjiachong/vue_notes/2165550)** ,代碼如下: **index.ts** ~~~ function echo<T>(arg: T): T{ return arg } const result = echo('str') ~~~ **編輯器圖片**: ![](https://img.kancloud.cn/2a/d2/2ad28d3da6c467cb83490043e688c43c_303x127.png) 當然剛才上面說的那個 **bug** 也不會再出現了,如下: **index.ts** ~~~ function echo<T>(arg: T): T{ return arg } const result:string = echo(123) ~~~ **編輯器圖片**: ![](https://img.kancloud.cn/b0/27/b0275242ed7c8494c96e9bf905143e23_544x192.png) >[success] ## 泛型(Generics)傳多個值 **需求**: 我們有一個 **[元祖](http://www.hmoore.net/wangjiachong/vue_notes/2165547#_26)** ,里面有 **2 個值** , **它們的類型都是隨意的** ,這時候我們要 **返回一個新的元祖** **index.ts** ~~~ function swap(tuple){ return [tuple[1], tuple[0]] } ~~~ 像上面這樣寫,我們就會 **喪失它們的類型** ,我們需要這樣寫: **index.ts** ~~~ function swap<T, U>(tuple: [T, U]):[U, T] { return [tuple[1], tuple[0]] // 注意返回的類型是 [U,T], 不是 [T, U] } const result = swap(['string', 123]) ~~~ **編輯器圖片**: ![](https://img.kancloud.cn/73/c7/73c7f64058e7dcf5cf0aab0444f8dbcb_700x157.png) 這樣的話 **result** 的第 **0** 個就是 **number 類型** ,第 **1** 個就是 **string 類型** ,我們可以使用 **對應類型給提供的方法** ,如下圖: ![](https://img.kancloud.cn/13/d0/13d01119dcd41d41fc4fab756aea9c71_809x472.png)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看