老师好 关于React.FC<BaseButtonProps>

Question

老师好，关于：

React.FC<BaseButtonProps>

这里的BaseButtonProps是对props的类型注解嘛？

我之前如果要用泛型，感觉一般是<T extends BaseButtonProps> = (props: T) => {.....}

这样来写的，请问老师，我这样写对吗？有点蒙圈

Answer 1

张轩 2020-06-20 21:33:02

同学你好 之前我们说过 泛型可以在 interface 中使用，这里就是一个例子，可以点进去研究一下 FC 的定义。

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

这个 P 就是传入的 props，其实它最终生成的一个类型就是一个混合类型，主体是一个函数，参数是 props 不仅有BaseButtonProps 还多了 children。

这个函数上面还有静态属性 propTypes，contextTypes 等等。

也就是说，我们声明一个变量为 React.FC<BaseButtonProps>类型的时候 ，它就能获得这么丰富的类型帮助，从另外一个侧面也能感受到 interface 这个 duck typing 的妙用。

• 提问者 袁门弟子 #1

  非常感谢！

• Lucky雷 #2

  按照视频编码出现这个报错  Type '{ (props: BaseButtonProps): Element | undefined; defaultProps: Partial<BaseButtonProps> | undefined; }' is not assignable to
  type 'FC<BaseButtonProps>'.
    Type 'Element | undefined' is not assignable to type 'ReactElement<any, any> | null'.
      Type 'undefined' is not assignable to type 'ReactElement<any, any> | null'.