typescript - 为什么当我将对象显式包装在 `if` 中时，TS 会提示对象可能为空？

Question

这是我的代码:

import React from 'react';

export default class ErrorBoundary extends React.Component {

    state = {error: null, errorInfo: null};

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
        this.setState({
            error: error,
            errorInfo: errorInfo
        })
    }

    render() {
        if (this.state.errorInfo) {
            return (
                <div>
                    <h2>Something went wrong.</h2>
                    <pre>
                        <code>
                            {String(this.state.error)}
                            {this.state.errorInfo.componentStack} // <-- error is here
                        </code>
                    </pre>
                </div>
            );
        }

        return this.props.children;
    }
}

讯息是:

ERROR in [at-loader] ./src/components/ErrorBoundary.tsx:22:30 TS2531: Object is possibly 'null'.

但是 if如果 this.state.errorInfo，块将不会执行是 null ，所以我不确定是什么问题。

为什么我会收到此错误以及如何修复它？

即使我这样写:

 {this.state.errorInfo !== null ? this.state.errorInfo.componentStack : 'hello'}

或者

 {this.state && this.state.errorInfo ? this.state.errorInfo.componentStack : 'hello'}

我犯了同样的错误。

tsconfig 很好的衡量标准:

{
    "compilerOptions": {
        "strict": true,
        "importHelpers": false,
        "inlineSources": true,
        "noEmitOnError": true,
        "pretty": true,
        "module": "ES6",
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": false,
        "removeComments": true,
        "preserveConstEnums": false,
        "sourceMap": true,
        "lib": ["es2018","dom"],
        "skipLibCheck": true,
        "outDir": "dist",
        "target": "es2018",
        "declaration": true,
        "resolveJsonModule": false,
        "esModuleInterop": false,
        "jsx": "react",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true
    },
    "files": [
        "src/index.tsx"
    ],
    "include": [
        "src/types/**/*.d.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

Answer 1

看起来

state = {error: null, errorInfo: null};

覆盖 state的类型。 errorInfo 的推断类型始终为 null您可以通过明确给出类型来纠正它:

state: { error: Error | null, errorInfo: React.ErrorInfo | null } =
{ error: null, errorInfo: null };

此问题在此处报告和讨论 https://github.com/Microsoft/TypeScript/issues/10570