javascript - typeof typeguard在分配给变量时不起作用吗？

Question

当我使用如下所示的 typeof 时出现错误。

function func (variable: number | string) {
    const is_number = (typeof variable === 'number');
    let variable2: number,
        variable3: string;

    if (is_number)
        variable2 = variable;
        => Type 'string | number' is not assignable to type 'number'.
           Type 'string' is not assignable to type 'number'.
    else
        variable3 = variable;
        => Type 'string | number' is not assignable to type 'string'.
           Type 'number' is not assignable to type 'string'.
}

但是，没有出现如下错误。

function func (variable: number | string) {
    let variable2: number,
        variable3: string;

    if (typeof variable === 'number')
        variable2 = variable;
    else
        variable3 = variable;
}

URL for test

我总是必须像上面那样使用它吗？还是我哪里用错了？

感谢阅读:)

Answer 1

@Ry- 已经在评论中回答了实际问题。以下是该限制的解决方法。

可以使用我称之为 isNumber 的辅助函数来做一些类似于您尝试实现的事情，它断言给定的参数是否 extends a typescript 中的某种类型。毕竟，这提供了一种不内联 JS 领域类型断言的方法，例如 typeof variable === "number"。相反，断言现在包含在一个函数中。

这是使用 x is y 构造完成的，它被称为 Type predicate (你必须向下滚动一点)。在下面的代码片段中，isNumber 的返回类型就是这样一个类型谓词:

const isNumber = (subject: any): subject is number => {
    return typeof subject === 'number';
};

在这里，typescript 可以从 isNumber 返回的 bool 值中推断出类型 number。现在，如果您在自己的 func 中使用这个辅助函数，一切都应该很好:

function func (variable: number | string) {
    let variable2: number;
    let variable3: string;

    if (isNumber(variable)) {
        variable2 = variable;
    } else {
        variable3 = variable;
    }
}

由于 if block 只会在 isNumber(variable) 返回 true 时执行，Typescript 现在将假定 subject 是数字。下面的伪代码演示了上述代码应该如何被 TS 解释:

if (variable is number) {
    // ...
}

我还找到了this SO answer这进一步解释了类型谓词构造。