reactjs - React-Typescript : How do I type a default prop?

Question

假设我有这个组件类:

interface SomeComponentProps {
  someOptionalProperty?: string;
}
interface SomeComponentState { /* ... */ }

class SomeComponent extends React.Component<SomeComponentProps, SomeComponentState> {
  static defaultProps = {
    someOptionalProp = 'some default value',
  }

  method() {
    const shouldNotBeOptional = this.props.someOptionalProp;
  }
}

如何断言 this.props.someOptionalProp 在类中不是未定义的，而且在尝试使用组件时也是可选的？

我一直在做的只是通过创建 getter 来完全忽略 defaultProps

return `this.props.someOptionalProp || 'the default value'`;

但我想使用 defaultProps 因为我的团队使用它。

Answer 1

此问题已在 here 中讨论并解决。 。现在您只需这样做:

interface Props {
  thing: string; // note: not optional within class, but is optional when writing due to the default
}

class Thing extends React.Component<Props> {
   static defaultProps = {
      thing: 'hello'
   }

  render() {
    console.log(this.props.thing) // strict type from `Props`
    // ...
 }
}
// ..
<Thing /> // works, thanks to `defaultProps`

它适用于 Typescript 3.1.6 和 React 16.5.0