深入了解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;
    //下面的省略了
}

哇哦！

---

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 ，帮您省时省力!