成人免费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基礎

2022-06-19 22:54:08

TypeScript泛型工具

2025-04-10 05:00:00

JavaScriptReactWeb

2025-02-14 08:26:47

TypeScripDeepSeek

2016-10-28 21:13:33

JavaScript基本包裝類型

2021-05-18 22:11:27

DNS記錄類型

2021-07-21 09:15:57

Python工具編程語言

2024-03-21 09:58:27

ExtractTypeScript工具類型

2024-04-01 07:51:49

Exclude?工具類型TypeScript
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 美女一级毛片 | 在线观看日本高清二区 | 国产一级特黄aaa大片评分 | 日日爱视频| 国产精品日韩欧美一区二区 | 国产欧美一区二区三区久久手机版 | 日日骚av | 成人精品一区二区三区中文字幕 | 久草电影网 | 成人特级毛片 | 成人激情视频免费在线观看 | 在线观看免费av网 | 日韩av中文 | 精品欧美一区二区三区久久久 | 成人一区二区三区视频 | 极品电影院| 国产精品美女久久久久aⅴ国产馆 | 日韩视频免费 | 三级欧美 | 日韩欧美专区 | 欧美日韩综合一区 | 天堂一区 | 成人国产在线视频 | 国产精品一码二码三码在线 | 欧美不卡在线 | 久久伊人一区 | 日韩2020狼一二三 | 超碰在线97国产 | 性国产丰满麻豆videosex | 久草www | 久久久久久成人 | 中文字幕在线视频免费视频 | 日本大片在线播放 | 91中文字幕 | 国产精品1区2区3区 欧美 中文字幕 | 欧美成视频 | 欧美黄色网络 | 一区二区三区免费 | 国产成人精品一区二区三 | 精品一区二区三区电影 | 久久av一区二区 |