TypeScript React.FC 混淆

我正在学习 TypeScript，有些内容让我感到困惑。下面一位：

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

const PrintName2 = (props: Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

对于上面的两个功能组件，我看到 TypeScript 生成相同的 JS 代码。这PrintName2就可读性而言，组件对我来说似乎更加精简。我想知道这两个定义有什么区别，是否有人使用第二种类型的 React 组件？

感谢大家的回答。它们是正确的，但我一直在寻找更详细的版本。我做了更多研究并发现了这一点React+TypeScript 备忘单在 GitHub 上。

功能组件
这些可以编写为带有 props 参数并返回 JSX 元素的普通函数。

type AppProps = { message: string }; /* could also use interface */

const App = ({ message }: AppProps) => <div>{message}</div>;

关于什么React.FC/React.FunctionComponent？ 您还可以使用以下方式编写组件React.FunctionComponent（或简写React.FC):

const App: React.FC<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

与“普通功能”版本的一些区别：

它为静态属性提供类型检查和自动完成，例如displayName, propTypes, and defaultProps- 但是，目前使用存在已知问题defaultProps with React.FunctionComponent。看到这个issue有关详细信息 - 向下滚动到我们的defaultProps在那里输入建议的部分。

它提供了子级的隐式定义（见下文）——但是隐式子级类型存在一些问题（例如，DefiniteTyped#33006），无论如何，明确使用子级的组件可能被认为是更好的风格。

const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title
}) => <div title={title}>{children}</div>;

将来，它可能会自动将 props 标记为只读，尽管如果 props 对象在参数列表中被解构，那么这是一个没有实际意义的问题。

React.FunctionComponent关于返回类型是显式的，而普通函数版本是隐式的（或者需要额外的注释）。

在大多数情况下，使用哪种语法几乎没有什么区别， 但是React.FC语法稍微详细一点，没有提供 优势明显，所以优先考虑“正常功能” 句法。