type challenge刷題之(middle 部分)示例解析

更新時間：2023年08月18日 11:24:10 作者：goblin_pitche

這篇文章主要為大家介紹了type challenge刷題之(middle 部分)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

引言

續(xù)接上篇：[easy 部分] http://www.dbjr.com.cn/javascript/295625e3z.htm

熟悉了基本知識點之后，middle整體比較順暢，就是題目太多，更多是知識點的查漏補缺。

middle部分

type MyReturnType<T extends (...args: any[]) => any> = 
    T extends (...args: any[]) => infer R ? R : never;
// 實現(xiàn)Omit
type Exclude<T, K> = T extends K ? never : T;
type MyOmit<T, K extends keyof T> = {[k in Exclude<keyof T, K>]: T[k]}
// 指定部分readonly,此處假設已經(jīng)實現(xiàn)了MyOmit..
type MyReadonly2<T, K extends keyof T = keyof T> = {readonly [k in K]: T[k]} & MyOmit<T, K>
type DeepReadonly<T> = {
  readonly [P in keyof T]: keyof T[P] extends never ? T[P] : DeepReadonly<T[P]>;
};
type TupleToUnion<T extends any[]> = T[number];
type Last<T extends any[]> = T extends [...any[], infer U] ? U : never;
type Pop<T extends any[]> = T extends [...infer U, any] ? U : T;
type LookUp<U, T> = U extends {type: T} ? U : never;
// Trim相關，先實現(xiàn)Space類型
type Space = ' '|'\n'|'\t';
type TrimLeft<S extends string> = S extends `${Space}${infer U}` ? TrimLeft<U> : S;
type Trim<S extends string> = S extends `${Space}${infer U}`|`${infer U}${Space}` ? Trim<U>: S;
type Replace<S extends string, From extends string, To extends string> = From extends '' ? S : (S extends `${infer H}${From}${infer T}` ? `${H}${To}${T}` : S);

DeepReadonly

這塊內(nèi)容還是【分配條件類型】沒掌握好，可以參看另一篇文檔.

Chinable

type MyAssign<T extends {}, Q extends {}> = {[k in (keyof T|keyof Q)]: k extends keyof Q ? Q[k] : (k extends keyof T ? T[k]: undefined)}
type Chainable<T extends {} = {}> = {
  option<P extends string, Q>(key: P extends keyof T ? never : P, value: Q): Chainable<MyAssign<T, Record<P, Q>>>
  get(): T
}

這里難點有兩個：

重復賦值時，怎么讓其報錯

const result2 = a
    .option('name', 'another name')
    // @ts-expect-error
    .option('name', 'last name')
    .get()

給name屬性賦值后，再次賦值name屬性就會報錯，但ts type沒法直接用非判斷，大多只能利用其補集進行判斷
參數(shù)側(cè)option肯定是沒法用條件語句進行判斷，如果這么寫option，會直接報錯Type parameter 'P' has a circular constraint.
因此，只能在函數(shù)的參數(shù)中進行判定，option(key: P extends keyof T ? never : P, value: Q)
新添加的屬性，需要實現(xiàn)類似Assign的方法
- 這里不能用Object.assign方法的實現(xiàn)方式，原本Object.assign的實現(xiàn)方式如下
- assign<T extends {}, U>(target: T, source: U): T & U;
- 這種實現(xiàn)方式帶來了一個問題，即const b = Object.assign(aa, { name: 11 });，typeof b的結(jié)果為{ name: string;} & { name: number;}，顯然不符合需求，因此自己實現(xiàn)
- type MyAssign<T extends {}, Q extends {}> = {[k in (keyof T|keyof Q)]: k extends keyof Q ? Q[k] : (k extends keyof T ? T[k]: undefined)}

PromiseAll

// 最終答案
declare function PromiseAll<A extends any[]>(values: readonly [...A]): Promise<{
  [key in keyof A]: Awaited<A[key]>
}>

這一題如果按照測試用例慢慢拼的話，也不算太難，最開始拼湊出來的寫法如下：

type PromiseValue<T> = T extends Promise<infer V> ? PromiseValue<V> : T;
type PromiseValues<T extends any[], R extends any[] = []> = T extends [infer H, ...infer E] ? PromiseValues<E, [...R, PromiseValue<H>]>: ([] extends R ? PromiseValue<T[number]>[] : R);
declare function PromiseAll<T extends any[]>(values: readonly [...T]): Promise<PromiseValues<T>>;

這里遇到了兩個問題：

PromiseAll<T extends any[]>(values: readonly [...T])這里為什么要用readonly
- 其中有個測試用例是這樣的PromiseAll([1, 2, Promise.resolve(3)] as const)
- 自己沒查到as const是什么意思，問了chat-gpt，給的答復是這里的as const是將數(shù)據(jù)變?yōu)橹蛔x，這樣的話很明確了，readonly的T不是T的子類，我們要將values提升為readonly的類型

是否可以用對象表示數(shù)組

type A = [number, string, {a: number}]
  type B = {
    [k in keyof A]: A[k]
  }
  type C = A extends B ? (B extends A ? true: false): false; // true!!!

這種復制對象的方式，可以用在數(shù)組上

MyCapitalize

這一題一開始沒想多少，直接寫出了正確答案

type MyCapitalize<S extends string> = S extends `${infer H}${infer T}` ? `${Uppercase<H>}${T}` : S;

但回頭想到了一個問題，infer H為什么只匹配了第一個字母，正則具有貪婪性，infer不具備嗎？

網(wǎng)上沒找到相關文章，問了chat-gpt，它一本正經(jīng)告訴我infer H這種格式的語法只能匹配一個字母，并給了我下面的例子

type Substring2<S extends string> = S extends `${infer A}${infer _}${infer B}` ? `${A}${B}` : never;
type Test = Substring2<'hello'>; // chat-gpt說結(jié)果是'hl'，實際跑是'hllo'

多測試了幾個例子，諸如

type UpperFirstPart<S extends string> = S extends `${infer H} ${infer T}` ? `${Uppercase<H>} ${T}` : S;
type Test = UpperFirstPart<"hello world">; // HELLO world

發(fā)現(xiàn)infer會以第一個找到的匹配模式為標準，類似Array.find方法，這樣的話，理解MyCapitalize的實現(xiàn)就容易多了

以上就是type challenge刷題之(middle 部分)示例解析的詳細內(nèi)容，更多關于type challenge middle的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: