typescript 3.0 和 react defaultProps

IT技术 reactjs typescript
2022-07-14 01:59:16

如果我有这样定义的props:

interface Props {
  Layout?: LayoutComponent;
}

然后,如果我在 a 上提供 defaultProps ClassComponent

class MyComp extends React.Component<Props> {
  static defaultProps: Pick<Props, 'Layout'> = {
    Layout: ({ children }) => <>{children}</>
  };
}

Typescript 没有发现它不能被取消定义的事实:

render() {
    const { previousLocation, data } = this.state;
    const { location, Layout } = this.props;
    const initialData = this.prefetcherCache[location.pathname] || data;

    return (
      <Layout> // JSX element type 'Layout' does not have any construct or call signatures.
        <Switch>

由于defaultProps. typescript没有选择这个。

无论如何让编译器知道它不能是未定义的?

1个回答

TL;DR 没有将Layoutprop 定义为可选,typescript将自行处理。

内部Layoutprop 不应该是可选的,因为它总是由于以下原因而定义的defaultProps

interface Props {
  Layout: LayoutComponent;
}

对于外部用户,任何具有默认props的props都通过以下方式转换为可选propsLibraryManagedAttributes

这个帮助器类型在用于检查针对它的 JSX 表达式之前,在组件的 Props 类型上定义了一个转换;因此允许自定义,例如:如何处理提供的props和推断的props之间的冲突,如何映射推理,如何处理可选性,以及如何组合来自不同地方的推理