react useRef 利用重载实现不同类型的技巧

[981377660LMT]

    /**
     * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
     * (`initialValue`). The returned object will persist for the full lifetime of the component.
     *
     * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
     * value around similar to how you’d use instance fields in classes.
     *
     * @version 16.8.0
     * @see https://reactjs.org/docs/hooks-reference.html#useref
     */
    // TODO (TypeScript 3.0): <T extends unknown>
    function useRef<T>(initialValue: T): MutableRefObject<T>;
    // convenience overload for refs given as a ref prop as they typically start with a null value
    /**
     * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
     * (`initialValue`). The returned object will persist for the full lifetime of the component.
     *
     * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
     * value around similar to how you’d use instance fields in classes.
     *
     * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type
     * of the generic argument.
     *
     * @version 16.8.0
     * @see https://reactjs.org/docs/hooks-reference.html#useref
     */
    // TODO (TypeScript 3.0): <T extends unknown>
    function useRef<T>(initialValue: T|null): RefObject<T>;
    // convenience overload for potentially undefined initialValue / call with 0 arguments
    // has a default to stop it from defaulting to {} instead
    /**
     * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
     * (`initialValue`). The returned object will persist for the full lifetime of the component.
     *
     * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
     * value around similar to how you’d use instance fields in classes.
     *
     * @version 16.8.0
     * @see https://reactjs.org/docs/hooks-reference.html#useref
     */
    // TODO (TypeScript 3.0): <T extends unknown>
    function useRef<T = undefined>(): MutableRefObject<T | undefined>;

[981377660LMT]

1. function useRef<T>(initialValue: T): MutableRefObject<T>;

   这个重载接受一个初始值 initialValue，并返回一个 MutableRefObject 对象。这个对象的 .current 属性被初始化为 initialValue。T 是你希望引用的类型。

2. function useRef<T>(initialValue: T|null): RefObject<T>;

   这个重载是为了方便处理 ref 属性通常以 null 值开始的情况。它接受一个可能为 null 的初始值 initialValue，并返回一个 RefObject 对象。如果你需要 useRef 的结果直接可变，可以在泛型参数的类型中包含 | null。

3. function useRef<T = undefined>(): MutableRefObject<T | undefined>;

   这个重载是为了方便处理可能未定义初始值或者没有参数的调用。它不接受任何参数，返回一个 MutableRefObject 对象，其 .current 属性被初始化为 undefined。如果没有提供类型参数 T，则默认为 undefined。

[981377660LMT]

• 约定：初始值为 initialValue，期望的类型为泛型参数 T；
• 重载规则：
  1. 如果初始值类型与期望相同，使用此重载，推导为 MutableRefObject；
  2. 如果初始值类型与期望不同，且初始值为null，期望不为 null，推导为 RefObject;
  3. 如果不传初始值，视为传入了初始值undefined (相当于默认类型参数)，推导为 MutableRefObject<T | undefined>;
  4. 否则，ts 报错。