结合源码分析forward结合TS的泛型参数顺序问题

49 阅读1分钟

最近在实现input组件时需要对函数组件实现引用, 然后找到了forwardRef这个组件 在泛型中必须先有ref的参数类型, 其次才是props的参数类型, 这与后面的参数的顺序是相返的

不知道为什么会这样, 在网上也没找到相关的答案, 然后就硬着头皮点开源码进去看看, 发现也不过如此

image.png

让我们分解这个类型定义:

  • function forwardRef<T, P = {}>(...): 这定义了一个函数 forwardRef,它接受两个泛型参数 T 和 PT 通常用于指定 ref 的类型,而 P 用于指定组件的属性(props)的类型。P 有一个默认值 {},这意味着如果你不提供第二个泛型参数,它将默认为一个空对象。
  • render: ForwardRefRenderFunction<T, P>: 这是 forwardRef 函数的第一个参数,render 是一个函数,它的类型是 ForwardRefRenderFunction<T, P>ForwardRefRenderFunction 是一个预定义的类型,它要求你传递一个函数,这个函数接受两个参数:props 和 ref,其中 props 的类型是 Pref 的类型是 T
  • ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;: 这部分是函数的返回类型。ForwardRefExoticComponent 是一个特殊的组件类型,它允许你创建一个可以接收 ref 的组件。PropsWithoutRef<P> 是一个辅助类型,它从 P 中移除了 ref 属性,因为 ref 将通过 forwardRef 直接转发,不需要在 props 中再次出现。RefAttributes<T> 是一个包含 ref 属性的类型,它将 ref 添加到组件的属性中。

继续进入ForwardRefRenderFunction<T, P>

image.png

答案显而易见了, 源码中就是先T,P 后P,T

不知道为什么官方这样设计, 挺糊弄人的