如何将默认道具设置为功能组件中所需的道具？

Question

在 Typescript 中，我设置了一个组件如下：

interface MyComponentProps {
  type: 'round' | 'square';
}

const MyComponent: FC<MyComponentProps> = ({type = 'round'}) => {
  return (
    <div />
  );
};

type 属性是必需的，并且在组件定义中设置了默认值，但在调用组件时仍然出现错误：

<MyComponent />
// Property 'type' is missing in type '{ }' but required in type 'MyComponentProps'.

将属性type 设置为可选的type? 可以通过将类型隐式更改为'round' | 'square' | undefined 来解决问题，但我不希望该属性可能是undefined，因为这会导致问题和奇怪的代码在我必须考虑type 在每一点上都是undefined 的地方。

我想要发生什么？

我希望 'type' 在未传递时具有默认值，但不定义为 undefined（即可选）。

我尝试了什么？

我尝试添加

MyComponent.defaultProps = {
  type: 'round'
};

但这根本没有帮助，而且我知道 defaultProps 无论如何都将被功能组件弃用。

Answer 1

如果你想传递默认值，这意味着值不是强制性的。如果值不会出现，那么你有默认值。

Answer 2

我建议您尝试以下操作：

interface MyComponentProps {
  type?: 'round' | 'square';
}

const defaultProps: MyComponentProps = {
  type: 'round'
};

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

MyComponent.defaultProps = defaultProps;

Answer 3

更新typescript@4.4

由于ts@4.4 设置了exactOptionalPropertyTypes 标志，您可以在没有显式类型断言的情况下定义这样的类型：

type MyComponentProps = {
  type: 'round' | 'square';
} | {
  type?: never
}

const MyComponent = ({type = 'round'}: MyComponentProps) => {
  return (
    <div />
  );
}

const NoProps = <MyComponent />
const UndefProp = <MyComponent type={undefined} /> // error
const WithProp = <MyComponent type="round" />

playground link

不幸的是，TS 游乐场还不支持在 url 中存储 exactOptionalPropertyTypes 标志。所以你必须进入TS Config并手动设置。

---

我相信您无法通过简单的打字稿功能获得您想要的东西。但是使用类型断言稍微按摩你的类型，你可以非常接近：

interface MyComponentProps {
  type: 'round' | 'square';
}

const MyComponent = (({type = 'round'}: MyComponentProps) => {
  return (
    <div />
  );
}) as React.FC<MyComponentProps | {}>

const NoProps = <MyComponent />
const UndefProp = <MyComponent type={undefined} /> // error
const WithProp = <MyComponent type="round" />

playground link