成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

類型體操之 Chainable 工具類型

開發 前端
首先我們根據類型挑戰的要求,來定義一個基礎的 Chainable 接口。option 方法返回 Chainable 類型以支持鏈式調用。

在本次挑戰中,你需要定義一個 Chainable 接口,它包含 option(key, value) 和 get 兩個方法。在 option 方法中,你需要使用給定的 key 和 value 擴展當前 config 對象的類型,通過 get 方法來獲取最終結果。

假設 key 僅接受字符串,而 value 可以是任何值。

interface Chainable = {}

declare const config: Chainable

const result = config
    .option('name', 'semlinker')
    .option('age', 30)
    .option('email', { value: 'semlinker@gmail.com' })
    .get()

// expect the type of result to be:
interface Result {
    name: string
    age: number
    email: {
        value: string
    }
}

Solution

首先我們根據類型挑戰的要求,來定義一個基礎的 Chainable 接口。option 方法返回 Chainable 類型以支持鏈式調用。

interface Chainable {
    option(key: string, value: any): Chainable
    get(): Chainable
 }

有了上述的接口之后,TypeScript 編譯器會推斷出 result 的類型是 Chainable 類型。很明顯這并不符合要求。其實,result 的最終類型,是由用戶的使用方式來決定的,所以我們也無法明確 result 的類型。這時,我們可以定義一個泛型變量 T 來表示 get 方法返回的類型。

interface Chainable<T> {
    option(key: string, value: any): Chainable<T>
    get(): T
 }

因為 get 方法最終返回的是對象類型,因此我們使用 TypeScript 泛型約束來約束泛型變量的類型,同時為該泛型變量設置一個默認值:

interface Chainable<T extends object = {}> {
    option(key: string, value: any): Chainable<T>
    get(): T
}

使用了新的 Chainable 接口之后,result 的類型返回的是 {} 類型,還不滿足類型挑戰的要求。接下來,我們從簡單的代碼入手,來分析如何繼續完善 Chainable 接口的代碼:

declare const config: Chainable

const result = config
    .option('name', 'semlinker')
    .get()

對于以上代碼,我們希望 TypeScript 編譯器能推斷出 result 的類型是 { name: string } 類型。因此,我們需要獲取 option 方法中 key 和 value 的類型。因為 option 方法中的 key 和 value 是由用戶動態設置的,我們也無法提前知道它們的類型,所以我們再次定義兩個泛型變量 Key 和 Value 來表示它們的類型。因為類型挑戰中,要求 key 的類型是字符串類型,所以我們使用泛型約束來約束泛型變量 Key 的類型。

interface Chainable<T extends object = {}> {
    option<Key extends string, Value>(key: Key, value: Value): Chainable<T>
    get(): T
}

定義了 Key 和 Value 泛型變量之后,我們就可以更新 option 方法的返回值類型:

interface Chainable<T extends object = {}> {
   option<Key extends string, Value>(key: Key, value: Value): 
     Chainable<T & { Key: Value }>
   get(): T
}

更新完 Chainable 接口后,你會發現 TypeScript 編譯器推斷出 result 的類型如下:

const result: {
    Key: string;
}

很明顯這還是不能滿足類型挑戰的要求,那么如何解決上述的問題呢?這時,你可以利用 TypeScript 映射類型。如果你對 TypeScript 映射類型不熟悉的話,可以閱讀這篇文章。

interface Chainable<T extends object = {}> {
    option<Key extends string, Value>(key: Key, value: Value): 
      Chainable<T & { [P in Key]: Value }>
    get(): T
}

之后,TypeScript 編譯器就能正常推斷出 result 對象的類型了:

const result: {
    name: string;
}

當然,你也可以使用 TypeScript 內置的 Record 工具類型來實現同樣的功能:

interface Chainable<T extends object = {}> {
    option<Key extends string, Value>(key: Key, value: Value): 
      Chainable<T & Record<Key, Value>>
    get(): T
}
責任編輯:姜華 來源: 全棧修仙之路
相關推薦

2024-03-04 06:40:49

工具類型TypeScripDeepPick

2022-09-20 14:43:55

TypeScript類型體操

2022-01-19 23:41:56

TS索引類型

2022-02-12 22:16:53

TypeScript類型字符串

2021-12-10 08:21:15

TypeScript高級類型類型體操

2023-09-11 17:55:44

Python測試運算符

2023-09-08 09:38:59

2010-06-13 18:00:56

MySQL數據類型

2022-03-09 20:18:49

TypeScript類型函數

2022-02-09 08:11:50

架構

2021-11-20 10:27:43

Python數據類型

2021-11-22 06:21:31

Python數據類型Python基礎

2025-04-10 05:00:00

JavaScriptReactWeb

2022-06-19 22:54:08

TypeScript泛型工具

2025-02-14 08:26:47

TypeScripDeepSeek

2016-10-28 21:13:33

JavaScript基本包裝類型

2021-05-18 22:11:27

DNS記錄類型

2024-04-01 07:51:49

Exclude?工具類型TypeScript

2024-03-21 09:58:27

ExtractTypeScript工具類型

2021-07-21 09:15:57

Python工具編程語言
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 四虎永久影院 | 亚洲国产精品一区二区www | 涩色视频在线观看 | 欧美日韩久 | 男女国产网站 | 成人在线视频免费观看 | 97精品超碰一区二区三区 | av在线天天| 日日干天天操 | 天天躁日日躁狠狠躁白人 | 日韩精品一区二区三区在线观看 | 亚洲 中文 欧美 日韩 在线观看 | 色综合色综合色综合 | 日韩欧美电影在线 | 九九伦理电影 | 亚洲欧美日韩精品久久亚洲区 | 日韩图区| 久久99久久 | 亚洲精品福利视频 | 九九免费视频 | 国产精品久久久久久久久久久久 | 欧美福利专区 | 国产精品海角社区在线观看 | 色综合一区二区 | 国产欧美在线观看 | 欧美在线日韩 | 国产高清视频 | 狠狠综合久久av一区二区小说 | 久久精品性视频 | 一区二区精品电影 | 99精品免费久久久久久久久日本 | 国产精品九九 | 波多野结衣av中文字幕 | 91最新入口| 日本不卡一区二区三区在线观看 | 在线观看免费av网站 | 精品国产一区二区三区av片 | 超碰男人天堂 | www.99re| 久久久精品网站 | 欧美另类视频 |