Question

如果我有以下组件

interface Props {
    someOptionalProp?: string;
}


class SomeComponent extends React.Component<Props, {}> {
    public static defaultProps = {
        someOptionalProp: 'some default'
    };

    public render() {
        this.props.someOptionalProp.indexOf('a'); // Type error

        return <div />;
    }
}

然后this.props.someOptionalProp的类型为string | undefined，因为这是Props接口的可选字段。但是，在运行时它不能是未定义的，因为为此prop设置了defaultProp。

在这种情况下有没有办法避免类型转换？

Answer 1

我认为您可以将non-null assertion operator用于此目的：

this.props.someOptionalProp!.indexOf('a')

Answer 2

TypeScript试图警告你，这个道具可能没有任何价值。无论如何，如果你想在所使用的类型中具体，你可以使用Type Assertion。

请注意，类型断言纯粹是编译时结构，是一种向编译器提供有关如何分析代码的提示的方法。

您可以在此处阅读更多内容：https://basarat.gitbooks.io/typescript/docs/types/type-assertion.html

在您的情况下，解决方案可能是：

(this.props.someOptionalProp as string).indexOf('a');

使用React + TypeScript，如何在使用带有strictNullChecks的默认值的可选道具时避免类型转换？

2 个答案: