react 方法定义返回值_翻译系列：定义 React 组件的更好方式

翻译系列出现的首要目的是督促本人每周学习以及提升英语能力，所以无法保证文章质量（无论是原文还是翻译），如果本文能让您对原文有大致认知对我来说就很开心了。
原文地址： https:// medium.com/variant-as/a -better-way-to-type-react-components-9a6460a1d4b7

https://www.yuque.com/docs/share/20211741-c6d2-4b20-97ce-3920b4b7430f?# 《翻译系列：定义React组件类型的更好方式》

我很晚才接受 TypeScript。并不是觉得它不好，而是我更喜欢 JavaScript 的活力。令人惊讶的是，当我回顾过去的项目时发现他们都已经使用了 TypeScript。我想我需要面对我其实经常使用 TypeScript 这样的现实。但是在React 项目中 React.FC 一直令我困扰。

当我在学习 TypeScript 和 React 的时候，我发现由于一些原因，几乎所有的博客、教程和示例都使用 React.FC 来定义函数式组件的类型。使用 React 内置的类型 React.FunctionComponent 从某种程度上来说是正确的，而且看起来也非常合适。但是我认为这是错误的，而且有很明显的缺陷。我建议使用直接定义函数参数的类型来替代 React.FC :

type MyComponentProps = { title: string };

//   Like this..
function MyComponentFC(props: MyComponentProps) {}

//   ...not like this
const MyComponent: React.FC<MyComponentProps> = (props) => {};

一起看看我的理由！

所有的一切都源自表达式

如果你想使用 React.FC 来定义类型，你需要注解的不是函数的参数或返回值，而是函数本身。这意味着它必须是一个表达式，它可以是箭头函数或函数表达式。我喜欢函数表达式，但对于顶级函数来说我更喜欢函数声明。原因是通过函数声明可以提升的特性以及将其直接导出可以明确文件内容的优先级。

:::tips 译者注： 函数声明：function foo() {} 函数表达式：const foo = function() {} https://www.runoob.com/js/js-function-definition.html :::

文件内容优先级

我在创建 J