Question

我有一个关于在类中设置联合类型的简单示例。

class Foo {
  constructor() {}
  progress: number | string = 0;

  bar() {
        this.progress = this.progress + 5;
    }
}

我希望增加5，但我却收到ts（2365）错误。

Operator '+' cannot be applied to types 'string | number' and '5'.ts(2365)

我认为这会起作用，因为如果我在下面的此类代码之外的类中进行设置。

let progress: number | string = 0;
progress = progress + 5;

没有错误。

最终，我想做的是在类声明中设置一个变量，该声明接受setInterval中的数字，因此我试图将变量设置为数字和{{ 1}}，因为NodeJS.Timer返回了setInterval。

NodeJS.Timer

我知道我可以简单地分配export class CurrentTrainingComponent implements OnInit { interval: number | NodeJS.Timer; progress: number = 0; constructor() {} ngOnInit() { this.interval = setInterval(() => { this.progress = this.progress + 5; if (this.progress >= 100) { clearInterval(this.interval); } }, 100); } onStop() { clearInterval(this.interval); } }来解决此问题<any>，但是我想看看是否可以尝试使用Union类型。

与该问题无关的最后一件事，将this.interval = <any>setInterval( ()=>{} )设置为<number>会显示警告setInterval

Answer 1

在条形函数中，您不能确定现在的值是数字。您可以添加其他支票以使其起作用

class Foo {
    constructor() {}
    progress: number | string = 0;

    bar() {
        if (typeof this.progress === 'number')
            this.progress = this.progress + 5;
    }
}

如果是

let progress: number | string = 0;
progress = progress + 5;

值绝对是数字（在上面分配了1行）

类内的打字稿联合体类型

1 个答案: