Javascript 使用typescript在react中创建功能组件的正确方法是什么

使用typescript在react中创建功能组件的正确方法是什么

我应该为道具使用界面还是类型？ 我应该使用React.FC还是React.FunctionComponent？ 如何使用eslint验证道具？ 现在，我的组件通常如下所示：

interface IProps {
  color: string;
}

const Example = (props: IProps) => {
  const { color } = props;

  return (
    <>
      {color}
    </>
  );
};

我不确定这是不是最好的方式

此外，我不知道如何使用IngesLink验证道具，例如，当我想将颜色作为数字传递时

这两种方法在社区中经常使用。我更喜欢打字，因为我觉得它更容易使用，但你可以在这里阅读，并提出自己的意见。 React.FC是React.FunctionComponent的缩写 道具将通过TypeScript静态分析进行验证。 我发现这种模式在开始使用功能组件时很有用：

type Props {
  color: string;
}

const Example: React.FC<Props> = ({color}: Props) => {

  return (
    <>
      {color}
    </>
  );
};

根据指南，最佳方法是：

从“React”导入React； 从“react”导入类型{FC}； 接口样本{ 颜色：字符串； } 常量示例：FC={color}=>{ 回来 {color} ; };

---

React.FC和React.FunctionComponent是相同的。您的代码几乎就在这里。您只需要将const-Example=props:IProps=>{更改为const-Example:React.FC=props=>{。此外，您的界面很好！谢谢，有没有任何选项可以从命令行仅运行TypeScript静态分析？我想在eslint检查后提交之前运行它。或者您是指TSLINT？如果您使用npx create react app my app-template TypeScript引导您的项目，默认情况下它已经在那里了，如果您违反TypeScript的规则，在运行npm start时，它会抱怨。有关从命令行运行它的信息，请参阅此处示例