Typescript 和 React defaultProps 仍被视为可能未定义

Question

interface PageProps {
    foo?: Function;
    bar: number;
}

export class PageComponent extends React.Component<PageProps, {}> {
    public static defaultProps: Partial<PageProps> = {
        foo: () => alert('Did foo')
    };

    private doFoo() {
        this.props.foo(); // Typescript Error: Object is possibly 'undefined'
    }

    public render(): JSX.Element {
        return (
            <div>
                <span>Hello, world! The number is {this.props.bar}</span>
                <button onClick={() => this.doFoo()}>Do the Foo</button>
            </div>
        );
    }
}

有没有办法告诉 Typescript props.foo 将总是被定义？

有一个很好的SO question and answer 讨论了如何正确定义组件上的道具类型。它甚至讨论了如何让 TS 知道 stateless 组件上的 defaultProps。

但是，Typescript 仍然会在常规组件定义中抱怨您的 props 可能未定义（如我上面的示例所示）。

您可以使用 bang (this.props.foo!()) 调用它，这可以防止 TS 抛出错误，但它也可以防止对您传入的任何内容进行任何类型的检查。在上面的示例中，没什么大不了的.在更复杂的代码中，它已经咬了我。

所以我目前正在实施这样的事情：

private doFoo() {
    if (this.props.foo) this.props.foo();
}

这有一个缺点，我认为这很重要：它使我的代码有点混乱。实际上，我总是想调用this.props.foo()，但似乎，如果不更仔细地研究类，在doFoo 方法中什么都不会发生的情况。 （是的，我可以添加一条评论，解释 if 只是为了让 Typescript 高兴，但我宁愿我的代码在可能的时候自己说话。）

当我实际上需要从 this.props.foo() 返回某些内容时，我的代码变得更加复杂。

我目前正在使用 @types/react 进行类型定义。

Answer 1

所以，编译器说对象可能是undefined。你更清楚它不是，所以你只想写this.props.foo()。正确的做法是使用空断言类型运算符

this.props.foo!()

如果你说这之前已经咬过你，那是你自己没有检查它的错 :)，这意味着编译器 - 正确 - 对象可能是 undefined。如果有可能是undefined，你应该经常检查它。也许您喜欢if 语句的更短版本？少了一个字符：

private doFoo() {
  this.props.foo && this.props.foo();
}

或使用打字稿 >= 3.8：

private doFoo() {
  this.props.foo?.();
}

另一方面，您可以创建一个额外的接口，即extends PageProps。为了好玩，我们就叫它PagePropsFilled：

interface PagePropsFilled extends PageProps {
    foo: Function;
}

您现在可以将this.props 设置为PagePropsFilled，它不会再显示错误了