typescript 3.0 和 react defaultProps答案

【问题标题】：typescript 3.0 and react defaultPropstypescript 3.0 和 react defaultProps
【发布时间】：2019-02-26 08:13:48
【问题描述】：

如果我有这样定义的道具：

interface Props {
  Layout?: LayoutComponent;
}

如果我在 ClassComponent 上提供 defaultProps：

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 不支持这个。

有没有办法让编译器知道它不能被取消定义？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

TL；DR 没有将 Layout 属性定义为可选，typescript 将自行处理。

在内部 Layout 属性不应是可选的，因为它总是由于 defaultProps: 而定义的：

interface Props {
  Layout: LayoutComponent;
}

对于外部用户，任何具有默认 prop 的 prop 都由 LibraryManagedAttributes 转换为可选

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

【讨论】：