字数

683 字

阅读时间

3 分钟

因为函数和组件是一个东西, 所以函数参数 props和组件的 props也是一个东西

type MyComponentProps = {
  title: string;
  color?: string; // 可选的属性
};

const MyComponent: FC<MyComponentProps> = (props: MyComponentProps) => {
  return (
    <div style={{ color: props.color || 'black' }}>
      {props.title}
    </div>
  );
};

• MyComponent: FC<MyComponentProps>：(**MyComponent: FC)声明了组件的返回值类型（一个 React 元素）并(<MyComponentProps>)指定了组件 props` 的类型。
• props: MyComponentProps：声明了函数组件的参数类型。
• 参数类型和返回值类型可以不同。在 React 中，参数是 props 对象，而返回值通常是 JSX（JSX.Element），它们类型上没有必须相同的要求。

<MyComponentProps> 的作用

• 当我们写 FC<MyComponentProps> 时，MyComponentProps 是作为泛型参数传给 FC，告诉 TypeScript 这个组件的 props 应该符合 MyComponentProps 类型的结构。

在有MyComponent: FC<MyComponentProps>的情况写, 写不写props: MyComponentProps没有区别吗

在有 MyComponent: FC<MyComponentProps> 的情况下，写不写 props: MyComponentProps 确实没有区别，因为 TypeScript 会根据 FC<MyComponentProps> 自动推断 props 的类型为 MyComponentProps。下面是详细解释。

为什么写不写 props: MyComponentProps 没有区别

1. FC<MyComponentProps> 自动推断 props 类型：

   • 当你使用 FC<MyComponentProps> 时，TypeScript 已经知道这个组件的 props 类型应该是 MyComponentProps。因此，当你在组件的参数中写 (props) 时，TypeScript 会自动将 props 类型设置为 MyComponentProps。
   • 这样一来，即使不显式写出 (props: MyComponentProps)，TypeScript 仍然会提供正确的类型检查和代码提示。

2. 显式声明 props 类型是多余的：

   • 在这种情况下，显式地写出 (props: MyComponentProps) 并不会提供额外的类型信息，只是重复了一次类型声明。虽然这样做并不会导致错误，但它显得有些冗余。

示例对比

省略显式声明：

const MyComponent: FC<MyComponentProps> = (props) => {
  return (
    <div>
      {props.title}
    </div>
  );
};

显式声明 props 类型：

const MyComponent: FC<MyComponentProps> = (props: MyComponentProps) => {
  return (
    <div>
      {props.title}
    </div>
  );
};

两者在功能上和类型检查上完全相同，因为 TypeScript 会根据 FC<MyComponentProps> 推断出 props 的类型。

总结

• 有 FC<MyComponentProps> 的时候写不写 props: MyComponentProps 没有区别，因为 FC<MyComponentProps> 已经为 TypeScript 提供了足够的信息来推断 props 的类型。
• 为了代码简洁，通常推荐省略显式的 props 类型声明，让 TypeScript 自动推断。这样可以减少冗余代码，同时保持代码的可读性和清晰性。

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名