欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡單三行代碼函數實現(xiàn)幾十行Typescript類型推導

 更新時間:2023年01月15日 16:41:46   作者:xekin  
這篇文章主要為大家介紹了簡單三行代碼函數實現(xiàn)幾十行Typescript類型推導的方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

場景

最近在設計一些基礎的項目框架設計上的 sdk api,比如埋點系統(tǒng)、權限系統(tǒng)之類的,要提供一些便捷的封裝方法給上層使用。于是遇到了這么個場景。

有一個對象常量里,存了一些方法,例如:

    const METHODS = {
        a: () => "a" as const,
        b: () => "b" as const,
        c: () => "c" as const
    }

然后想要封裝這樣一個 hook 例如 useMethod 給上層的 React 上下文使用:

    type MethodKey = keyof typeof METHODS
    function useMethods(keys: MethodKey[]) {
        return keys.map(key => METHODS[key])
    }
    // case
    const [a, b] = useMethods(['a', 'b'])
    // expect to "a"
    a();

一切都簡簡單單,屬于是日常到不能再日常的代碼,可是當我在 IDE 里挪上去一看,這不對勁呀:

我預期這里應該類型直接就是字符串 a 了,怎么會是個聯(lián)合類型?

摸魚吃瓜式排查

我上上下下看了一遍類型推導,發(fā)現(xiàn) keys.map(key => METHODS[key]) 這一句里,key 直接被推導成了 "a" | "b" | "c"。

所以理所當然的結果也是推導成了 "a" | "b" | "c"。

emmm......這還有些麻煩,先單獨寫個類型方法來推導結果試試,遞歸傳入的數組泛型,取出每一次的 key 對應的 method,再組合為數組。

 type MethodValue<K extends MethodKey> = typeof METHODS[K]
 type GetMethodValue<T extends MethodKey[]> = T extends [] 
     ? [] 
     : T extends [infer F extends MethodKey, ...infer Rest extends MethodKey[]]
     ? [MethodValue<F>, ...GetMethodValue<Rest>]
     : never 

測試一下:

再將類型回到方法 useMethod 上帶入卻發(fā)現(xiàn)完全不行:

如果強行斷言 map 返回的結果,則直接會被推導為 never 類型

元組大法

其實不難從代碼里看出,之所以無法推導原因有兩點,第一點是在 Typescript 編譯時這個階段,是無法推導這個函數泛型傳參的多種形態(tài)中的 key 是怎樣排序的,其次是在 map 方法中,key 值一直被推導成 "a" | "b" | "c" 導致。

所以如果我用元組作為泛型限定值,倒是可以實現(xiàn):

type GetMethodValue<T extends (MethodKey | void)[]> = T extends []
     ? []
     : T extends [infer F extends MethodKey, ...infer Rest extends MethodKey[]] 
     ? [MethodValue<F>, ...GetMethodValue<Rest>] 
     : never 
function useMethods<T extends ['a'?, 'b'?, 'c'?]>(keys: T) {
    return keys.filter((key): key is MethodKey => !!key).map((key) => METHODS[key]) as GetMethodValue<T>
}
const [a, b] = useMethods(['a', 'b'])
const valueA = a()

理解到這,我就思考雖然類型不能自動推導出元組的組合排列方式,但是我卻可以寫一個方法來實現(xiàn)推導聯(lián)合類型生成元組。

    type Permutation<T, U = T> = [T] extends [never]
      ? []
      : U extends T
      ? [U, ...Permutation<Exclude<T, U>>]
      : never;
    // expect to ['a', 'b'] | ['b', 'a']
    type value = Permutation<'a' | 'b'>

這是我之前在寫 TypeChallenge 時寫過的方法,這就派上用場了。

直接將 MethodKey 這個聯(lián)合類型解成元組之后限定泛型 T,最后確實也可以成功推導結果。

type Permutation<T, U = T> = [T] extends [never]
  ? []
  : U extends T
  ? [U?, ...Permutation<Exclude<T, U>>]
  : never;
type MethodKey = keyof typeof METHODS
type MethodValue<K extends MethodKey> = typeof METHODS[K]
type GetMethodValue<T extends (MethodKey | void)[]> = T extends []
     ? []
     : T extends [infer F extends MethodKey, ...infer Rest extends MethodKey[]] 
     ? [MethodValue<F>, ...GetMethodValue<Rest>] 
     : never 
const METHODS = {
    a: () => "a" as const,
    b: () => "b" as const,
    c: () => "c" as const
}
function useMethods<T extends Permutation<MethodKey>>(keys: T) {
    return keys.filter((key): key is MethodKey => !!key)
               .map((key) => METHODS[key]) as GetMethodValue<T>
}
const [a, b] = useMethods(['a', 'b'])
const valueA = a()

感嘆

只是一個三行代碼就實現(xiàn)的簡單方法,但要做出準確的結果推導卻需要這么復雜的類型聲明去鋪墊,雖然最后寫出來很爽,但也感嘆作為庫開發(fā)者的一方真是非常不容易,這當中為了類型推導,還增加了冗余的代碼,為了支持元組的可選值,不得不將變量打為可選,從而需要先 filtermap 才能保證結果不會出現(xiàn)空值的類型推導。

身為一個前端,在寫 Ts 時時不時就要為幾個簡單結果的推導準確性花上小半天時間,有時候也覺得很不值得,不知道其他語言在類型上是否也有類似的煩惱,也希望 Typescript 團隊能有更好的類型推斷手段演進。

本文最后的解決方案不一定為最佳解決方案,不過作者也在社區(qū)和搜索網站上檢索過答案,最后也沒找到滿意的解答,更多關于Typescript類型推導代碼函數的資料請關注腳本之家其它相關文章!

相關文章

  • typescript難學嗎?前端有必要學?該怎么學typescript

    typescript難學嗎?前端有必要學?該怎么學typescript

    TypeScript代碼與?JavaScript?代碼有非常高的兼容性,無門檻,你把?JS?代碼改為?TS?就可以運行。TypeScript?應該不會脫離?JavaScript?成為獨立的語言。學習?TypeScript?應該主要指的是學習它的類型系統(tǒng)。
    2022-12-12
  • TypeScript類型any never void和unknown使用場景區(qū)別

    TypeScript類型any never void和unknown使用場景區(qū)別

    這篇文章主要為大家介紹了TypeScript類型any never void和unknown使用場景區(qū)別,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • typescript快速上手的進階類型與技術

    typescript快速上手的進階類型與技術

    本文講述了typescript開發(fā)的一些高級的類型與技術,算是對于基礎知識點的補充,具體內容包括:比如元組、枚舉類、接口、泛型相關概念等。雖說是進階,但是內容不算多也并不難理解。
    2022-12-12
  • type-challenge刷題(easy部分)示例詳解

    type-challenge刷題(easy部分)示例詳解

    這篇文章主要為大家介紹了type-challenge刷題(easy部分)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • postman數據加解密實現(xiàn)APP登入接口模擬請求

    postman數據加解密實現(xiàn)APP登入接口模擬請求

    對于Postman的使用,一般情況下只要發(fā)發(fā)確定的請求與參數就可以的了,然而,在使用的時候,尤其是接口測試時,請求接口的設計里面都有數據加密,參數驗簽,返回數據也有進行加密的,這個時候就需要使用一些腳本做處理,模擬app登入請求的操作
    2021-08-08
  • ts?類型體操?Chainable?Options?可鏈式選項示例詳解

    ts?類型體操?Chainable?Options?可鏈式選項示例詳解

    這篇文章主要為大家介紹了ts?類型體操?Chainable?Options?可鏈式選項示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • TypeScript十大排序算法插入排序實現(xiàn)示例詳解

    TypeScript十大排序算法插入排序實現(xiàn)示例詳解

    這篇文章主要為大家介紹了TypeScript十大排序算法插入排序實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • TypeScript手寫一個簡單的eslint插件實例

    TypeScript手寫一個簡單的eslint插件實例

    這篇文章主要為大家介紹了TypeScript手寫一個簡單的eslint插件實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • typescript快速上手的基礎知識篇

    typescript快速上手的基礎知識篇

    靜態(tài)類型的typescript與傳統(tǒng)動態(tài)弱類型語言javascript不同,在執(zhí)行前會先編譯成javascript,因為它強大的type類型系統(tǒng)加持,能讓我們在編寫代碼時增加更多嚴謹的限制。注意,它并不是一門全新的語言,所以并沒有增加額外的學習成本
    2022-12-12
  • TypeScript 交叉類型使用方法示例總結

    TypeScript 交叉類型使用方法示例總結

    這篇文章主要為大家介紹了TypeScript 交叉類型使用方法示例總結,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08

最新評論