带有 React.forwardRef 功能组件的 VSCode TS 错误答案

【问题标题】：VSCode TS error with React.forwardRef functional component带有 React.forwardRef 功能组件的 VSCode TS 错误
【发布时间】：2021-02-18 14:45:25
【问题描述】：

我们正在使用 JavaScript（不是 TypeScript）来编写我们的组件库，我们在项目的 jsconfig.json 文件中有 checkJs: true。

我们所有的组件都是函数式组件（没有类组件）。当组件需要引用时，我们使用React.forwardRef。

为了这个问题的一个组件示例；不是一个实际的组件，而是展示我们如何编写我们的组件：

import React from 'react';
import { View } from 'react-native';
import propTypes from './propTypes';

export const Box = React.forwardRef(({ padding, children }, ref) => {
  return (
    <View ref={ref} style={{ padding }}>
      {children}
    </View>
  );
});

Box.propTypes = propTypes;

但是，这会导致 padding 属性下出现“红色波浪线”错误：

类型 '{ children?: ReactNode; 上不存在属性 'padding' }'.ts(2339)

propTypes 的分配位置：

类型 '{ 填充：必需； }' 与类型 'WeakValidationMap'.ts(2559)
没有共同的属性

而在实现这个<Box>组件的时候，组件的名字下面出现了红色的波浪线，报错是：

类型'{孩子：元素; }' 与类型 'IntrinsicAttributes & RefAttributes'.ts(2559) 没有共同的属性

代码本身是有效的，将checkJs 更改为false 可以解决此问题，但我们希望保留checkJs true。

我们到底做错了什么？

【问题讨论】：

标签： reactjs typescript react-native visual-studio-code

【解决方案1】：

我不确定你在用 propTypes 做什么，但你可以通过在 forwardRef 上设置泛型来定义 props 和 ref 类型：

export const Box = React.forwardRef<View, {padding?: string | number}>(({ padding, children }, ref) => {
  return (
    <View ref={ref} style={{ padding }}>
      {children}
    </View>
  );
});

Playground Link

【讨论】：