TypeScript React.FC 混淆

发布于01月31日

我正在学习打字，有些地方让我感到困惑.下面是一位:

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组件？

推荐答案

谢谢大家的回答.我想找一个更详细的版本.我做了更多的研究，在GitHub上的React+TypeScript Cheatsheets上发现了这一点.

Function Components

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

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

React.FC/React.FunctionComponent怎么样？

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

与"正常功能"版本的一些区别:

然而，使用autocomplete defaultProps和autocomplete displayName目前都存在一些已知的问题.请参阅本issue了解详细信息-向下滚动到defaultProps部分，在那里输入建议.

它提供了 children 的隐式定义(见下文)——但是隐式 children 类型存在一些问题(例如DefinitelyTyped#33006)，而且不管怎样，对于使用 children 的组件，显式表达可能被认为是一种更好的方式.

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

将来，它可能会自动将props 标记为只读，但如果props 对象在参数列表中被分解，这是一个没有意义的点.

React.FunctionComponent对于返回类型是显式的，而普通函数版本是隐式的(否则需要额外的注释).

在大多数情况下，使用哪种语法差别很小，

TypeScript React.FC 混淆

推荐答案

Typescript相关问答推荐

如何在Jest中嘲笑location.back()方法调用进行Angular 组件测试？

具有条件通用props 的react 类型脚本组件错误地推断类型

如何根据数据类型动态注入组件？

TypScript在对象上强制执行值类型时推断对象文字类型？

React-Native运行方法通过监听另一个状态来更新一个状态

在这种情况下，如何获得类型安全函数的返回值？

返回具有递归属性的泛型类型的泛型函数

使用订阅时更新AG网格中的行

Cypress页面对象模型模式.扩展Elements属性

为什么Typescript不能推断类型？

如何编写在返回函数上分配了属性的类型安全泛型闭包

使用TypeScrip5强制使用方法参数类型的实验方法修饰符

TypeScrip：从对象中提取和处理特定类型的键

有没有办法在Zod中使用跨字段验证来判断其他字段，然后呈现条件

如何使这种一对一关系在旧表上起作用？

Typescript，如何在通过属性存在过滤后重新分配类型？

为什么TypeScrip假定{...省略类型，缺少类型，...选取类型，添加&>}为省略类型，缺少类型？

将类型脚本函数返回类型提取到VSCode中的接口

内联类型断言的工作原理类似于TypeScrip中的断言函数？

Next 13 + React 18 createContext 类型的构建问题