打字稿泛型和类属性答案

【问题标题】：Typescript generics and class properties打字稿泛型和类属性
【发布时间】：2019-03-12 00:39:26
【问题描述】：

我目前正在 React 项目中使用 Typescript，并希望使用类属性来设置初始状态，但是在使用未定义的值和严格的 null 检查时遇到了一些问题。这是我的问题的最小重构，没有任何 React 特定代码来演示我的问题。

class Component<T> {
    state: T;
}

interface Foo {
    bar: number | undefined
}

class Test extends Component<Foo> {
    state = {
        bar: undefined
    }

    test(a: number) {
        //
    }

    callTest() {
        if (this.state.bar) {
            this.test(this.state.bar) // Argument of type 'undefined' is not assignable to parameter of type 'number'.
        }
    }
}

TS playground link

所以这个错误只有在启用严格的空检查时才会出现。

还有：

如果我在构造函数中设置状态而不是通过类属性没有错误。 playground
如果我在类属性上显式设置类型，则不会出现错误。 playground

那么这是 Typescript 处理不好还是我遗漏了什么/做错了什么？

编辑：看起来 TS-playground 不共享选项，所以请手动检查 sctrictNullChecks 以查看错误。

【问题讨论】：

标签： typescript

【解决方案1】：

因为undefined 在 Typescript 中被视为独立类型。您将 undefined 传递给测试函数的 number 类型的参数。如果您确定您的测试函数可以接受undefined，只需允许undefined 作为可接受的参数类型：

test(a: number | undefined) {
        //
}

【讨论】：

嗯，很抱歉，但这不是我想走的路。首先，如果我在构造函数中初始化状态，这并不能解释为什么代码可以工作。第二个test 可能是我无法影响的外部函数。
@giggo1604 在这种情况下你能分享你的构造函数吗？如果test 是一个外部函数，我认为一种选择是在将参数传递给test 之前进行空检查。
更新了原帖，请注意编辑评论。感谢您的帮助

【解决方案2】：

当您在Test 中重新声明state 属性时，它会根据初始化程序的类型获得一个新类型，即{bar: undefined}，您可以通过将鼠标悬停在state 上看到。这就是为什么 TypeScript 认为 this.state.bar 不能是 undefined 以外的任何东西，即使在你检查它是真的之后。在构造函数中初始化state是正确的解决方案。

【讨论】：