给反应无状态功能组件一个打字稿类型的正确方法是什么答案

【问题标题】：What's the proper way of giving react stateless functional component a typescript type给反应无状态功能组件一个打字稿类型的正确方法是什么
【发布时间】：2020-01-15 19:15:31
【问题描述】：

只是使用React.FC类型吗？

import React from 'react'

const MyComponent: React.FC = () => (
  ...
);

export default MyComponent;

【问题讨论】：

React.SFC? props 还有一个可选的泛型

标签： reactjs typescript

【解决方案1】：

是的，您也可以使用FunctionComponent。 FC 实际上只是它的别名。 SFC 已被弃用。

【讨论】：

【解决方案2】：

在将 React 函数式组件与 TypeScript 一起使用时，您应该定义 generics 并将其与您的函数式组件一起使用。

这将在构建组件时提供额外的安全层，从而让您更快地发现错误。

interface MyProps {
  value: string,
}

const MyComponent: React.FC<MyProps> = (props) => {
  const { value } = props;

  return <span>{value}</span>;
}

同样，您可以对通用 React 组件使用泛型。

【讨论】：

如果我添加那个泛型，是否还需要添加MyComponent.propTypes？
两者都不是绝对必要的，但是 propTypes 的优点是在代码运行时被检查，而不是像 TypeScript 那样只在开发中检查。 TS 仅在开发中真正存在于捕获错误，但在部署时被编译为普通浏览器就绪 JS。然而，PropTypes 在编译后仍然存在，并且当您的应用程序处理来自外部源（如 API 或用户本身）的数据时，它可以在实践中提供额外的类型安全层。为了获得最大的类型安全性，请同时使用这两种方法，但这取决于您的应用在这方面需要多少安全性。
@RannieAguilarPeralta 在您的情况下，维护propTypes 和 TypeScript 接口/泛型并没有多大用处。这是因为您的逻辑似乎相当“内部”，并且接口会在编译时捕获错误。但是，如果您实际打包应用程序并将其发布为npm 包，您可能还需要使用propTypes，因为类型检查需要在运行时完成，因为数据将来自外部而类型检查不足跨度>
在这个 stackoverflow 帖子中有关于 propTypes 与 TS interfaces 的详细讨论：stackoverflow.com/questions/41746028/…