有些東西只可意會不可言傳,先跟着用,然後慢慢消化
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;
//下面的省略了
}
哇哦!
immer
中produce
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)
是函數的的簽名,泛型Base
和D
在前面定義。
<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 ,幫您省時省力!