为什么启用了 strictNullChecks 的 Typescript 会忽略对 React 状态的空检查？

Question

在下面的例子中：

interface AppState {
    text: string | null;
}

interface ChildProps {
    text: string;
}

class App extends React.Component<{}, AppState> {
    state = {
        text: null
    };
    componentDidMount() {
        setTimeout(() => {
            this.setState({ text: "rendered!" });
        }, 5000);
    }
    render() {
        return this.state.text !== null ? (
            <Child text={this.state.text} />
        ) : (
            "loading..."
        );
    }
}

class Child extends React.Component<ChildProps> {
    render() {
        const { text } = this.props;
        return <div>{text}</div>;
    }
}

<Child text={this.state.text} />下出现错误：

类型 'null' 不可分配给类型 'string'.ts(2322)

这没有意义，因为在渲染之前有一个明确的空检查。

为什么从状态中提取text时，错误消失了？

render() {
        const { text } = this.state;
        return text !== null ? (
            <Child text={text} />
        ) : (
            "loading..."
        );
    }

启用错误的工作示例，替换代码以查看它已修复：

https://codesandbox.io/s/react-typescript-playground-g15mw

Answer 1

如果将 state 初始化为类属性，则需要声明其类型定义。否则 typescript 假定你覆盖了它继承自 React.Component<{}, AppState> 的类型，它的类型变成了 { text: null }

class App extends React.Component<{}, AppState> {
    state: AppsState = {
        text: null
    };
}

或者只是在构造函数中初始化状态

class App extends React.Component<{}, AppState> {
    constructor(props: {}) {
        super(props)

        this.state = {
            text: null
        }
    }
}

---

至于提取

// typeof this.state === { test: null }
const { text } = this.state;

if (this.state.text !== null) {
    // typeof this.state.text is still null
}

if (text !== null) {
    // typeof text is never here
    // since never is subtype of all types
    // text can be assigned to any variable
}

在https://www.typescriptlang.org/docs/handbook/basic-types.html#never查看更多信息