TypeScript泛型的相關知識點有哪些

本篇內(nèi)容主要講解“TypeScript泛型的相關知識點有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“TypeScript泛型的相關知識點有哪些”吧!

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設計、成都網(wǎng)站建設與策劃設計,忠縣網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設十年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:忠縣等地區(qū)。忠縣做網(wǎng)站價格咨詢:18982081108

1、ts的泛型很難嗎？

如果你：

1.  剛開始學ts

2.  剛開始接觸泛型

3.  正在掙扎得學習ts的泛型

看到以下代碼有沒有很疑惑？

function makePair<    F extends number | string,    S extends boolean | F  >()

Java是和typescript一樣支持泛型的，當我在大學開始學習Java的時候，我還是一個菜鳥碼農(nóng)，遇到難點(比如泛型)就直接跳過，能學多少學多少，回寢室就LOL開黑。直到大學畢業(yè)我依舊沒有理解泛型的概念，可能你和我一樣覺得泛型很難，下面我會分享我的理解，希望對你有所幫助。

2、一起來看一下makeState()這個函數(shù)

首先，我寫了makeState這個函數(shù)，我們會用這個函數(shù)來討論泛型

function makeState() {    let state: number    function getState() {      return state    }    function setState(x: number) {      state = x    }    return { getState, setState }  }

當你運行這個函數(shù)，我們會得到getState() 和 setState()這兩個函數(shù)。

讓我們來試一下，下面這段代碼會打印出什么

const { getState, setState } = makeState()  setState(1)  console.log(getState())  setState(2)  console.log(getState())

1  2

會打印出1和2，沒那么難對吧?

Note: 如果你正在使用react，你可能會發(fā)覺，makeState()和鉤子函數(shù)useState()很像。這里也涉及到了閉包和ES6的解構(gòu)賦值

3、我們傳入字符串會如何?

我們把剛才給setState的入?yún)?和2替換成字符串'foo'會輸出什么呢？

const { getState, setState } = makeState()  setState('foo')  console.log(getState())

Argument of type '"foo"' is not assignable to parameter of type 'number'.

會編譯失敗，因為setState()需要的參數(shù)類型是number

我們可以用以下方法解決這個問題

function makeState() {    // Change to string    let state: string    function getState() {      return state    }    // Accepts a string    function setState(x: string) {      state = x    }    return { getState, setState }  }

const { getState, setState } = makeState()  setState('foo')  console.log(getState())

foo

4、挑戰(zhàn)：獲取兩個不同類型的state

我們能不能修改makeState()這個函數(shù)，來輸出兩個不同類型的state，比如一個是字符串，一個是數(shù)字。

以下代碼簡略得表示我想表達的意思：

// One that only allows numbers, and…  const numState = makeState()  numState.setState(1)  console.log(numState.getState()) // 1  // The other that only allows strings.  const strState = makeState()  strState.setState('foo')  console.log(strState.getState()) // foo

要達到以上效果，我們可能需要創(chuàng)建兩個內(nèi)部不一樣的makeState(),一個state的類型是數(shù)字，一個是字符串。

怎么用才能只寫一個來實現(xiàn)呢？

5、實驗一：設置多個類型

這是我們的第一個嘗試：

function makeState() {    let state: number | string    function getState() {      return state    }    function setState(x: number | string) {      state = x    }    return { getState, setState }  }

const numAndStrState = makeState()  //數(shù)字  numAndStrState.setState(1)  console.log(numAndStrState.getState())  //字符串  numAndStrState.setState('foo')  console.log(numAndStrState.getState())

1  foo

結(jié)果看上去我們貌似成功了，但是這并不是我真實想要的，我們真正要實現(xiàn)的是只能輸出數(shù)字state和只能輸出字符串state。

numAndStrState是既能輸出數(shù)字類型，又能輸出字符串類型

6、實現(xiàn)二：使用泛型

接下來我們的泛型要登場了：

function makeState<S>() {    let state: S    function getState() {      return state    }    function setState(x: S) {      state = x    }    return { getState, setState }  }

makeState() 被定義成 makeState<S>()，你可以把<S>當作函數(shù)參數(shù)，但它傳入的不是值，而是類型。

比如你可以傳入數(shù)字類型：

makeState<number>()

在makeSate()這個函數(shù)內(nèi)部state會變成數(shù)字類型

let state: S // <- number  function setState(x: S /* <- number */) {    state = x  }

這樣就實現(xiàn)了只能輸出數(shù)字state

// Creates a number-only state  const numState = makeState<number>()  numState.setState(1)  console.log(numState.getState())  // numState.setState('foo') 輸入字符串foo會報錯

同理我們也可以實現(xiàn)只能輸出字符串state

// Creates a string-only state  const strState = makeState<string>()  strState.setState('foo')  console.log(strState.getState())  // strState.setState(1) 輸入數(shù)字1會報錯

Note: 我們把makeState<S>()稱作泛型函數(shù)，就是一個普通的函數(shù)支持類型參數(shù)的傳入

你可能會疑惑為什么類型參數(shù)是S, 其實隨便什么都可以，但是通常來說我們會用一個變量的第一個字母的大寫來代表這個變量的類型：

•   T(for“T”ype)

•   E(for“E”lement)

•   K(for“K”ey)

•   V(for“V”alue)

7、泛型的類型范圍限制

目前，在我們改進下的makeState()實現(xiàn)了只能輸出數(shù)字state和只能輸出字符串state。但是它也能實現(xiàn)輸出布爾值。

// Creates a boolean-only state  const boolState = makeState<boolean>()  boolState.setState(true)  console.log(boolState.getState())

問題：那么我們要如何限制它就只能輸入輸出number和string類型呢？

方法：聲明makeState()這個函數(shù)時，把類型參數(shù)<S>變?yōu)?lt;S extends number | string>，這樣就只能輸入number或者string類型了

function makeState<S extends number | string>() {    let state: S    function getState() {      return state    }    function setState(x: S) {      state = x    }    return { getState, setState }  }  // 如果我傳入boolean類型  const boolState = makeState<boolean>()

Type 'boolean' does not satisfy the constraint 'string | number'.

8、泛型的默認類型

現(xiàn)在每次調(diào)用makeState()時，我們可以任意傳入<number> 或<string>類型，那怎么設置一個默認類型呢？

比如讓下面兩個語句起到相同的作用：

const numState1 = makeState()  const numState2 = makeState<number>()

其實和給函數(shù)參數(shù)設置默認值一樣：

function makeState<S extends number | string = number>()

這樣，變量state默認類型就是number了

const numState = makeState()  numState.setState(1)  console.log(numState.getState())

到此，相信大家對“TypeScript泛型的相關知識點有哪些”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

標題名稱：TypeScript泛型的相關知識點有哪些
轉(zhuǎn)載來源：http://muchs.cn/article46/pgddeg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、動態(tài)網(wǎng)站、服務器托管、虛擬主機、網(wǎng)站收錄、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)