深入瞭解TypeScript的使用

有些東西只可意會不可言傳,先跟着用,然後慢慢消化


document.querySelector("textarea") 返回的類型是HTMLTextAreaElement

定義如下

 querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;

(selectors: K)是函數的簽名,而泛型K通過 <K extends keyof HTMLElementTagNameMap>來約束的,返回值 HTMLElementTagNameMap[K] | null

HTMLElementTagNameMap定義如下

interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    //下面的省略了
}

哇哦!


immerproduce

        produce(state, (drafState) => {
          drafState.visible = true;
          drafState.src = src;
        })

在使用drafState會獲得提示,具備和state相同的屬性。

export declare const produce: IProduce;

IProduce的定義如下

export interface IProduce {
    //省略
    <Base, D = Draft<Base>, Return = void>(base: Base, recipe: (draft: D) => Return, listener?: PatchListener): Produced<Base, Return>;
}

(base: Base, recipe: (draft: D) => Return, listener?: PatchListener) 是函數的的簽名,泛型BaseD在前面定義。

<Base, D = Draft<Base>, Return = void>,結合上面的例子,Base代表state的類型

Draft的定義

export declare type Draft<T> = T extends AtomicObject ? T : T extends ReadonlyMap<infer K, infer V> ? Map<Draft<K>, Draft<V>> : T extends ReadonlySet<infer V> ? Set<Draft<V>> : T extends WeakReferences ? T : T extends object ? {
    -readonly [K in keyof T]: Draft<T[K]>;
} : T;

本文將持續更新

關注專題 前端便利店 https://www.jianshu.com/c/c3f77a86d9a5 ,幫您省時省力!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章