typescript - VueJS、this.$route.query.page 和类型 'null' 不可分配给类型 'string'

Question

我已经为此工作了大约 2 个小时，但无济于事。我已经在互联网上搜索过，尝试过创建条件等。

所以我在 VueJS 组件中有一个如下所示的方法:

paginate() {
  const test = this.$route.query.page;
  console.log(test);
  this.currPage = parseInt(test);
}

最后一行的“测试”一词有红色下划线，我收到一条错误消息:

const test: LocationQueryValue | LocationQueryValue[]

Argument of type 'LocationQueryValue | LocationQueryValue[]' is not assignable to parameter of type 'string'.

Type 'null' is not assignable to type 'string'.Vetur(2345)

不编辑TypeScript配置文件，如何解决TypeScript错误？

Answer 1

这意味着test可以是null。它的类型可能是 string | null 是联合类型。您需要对其进行测试以消除 null 情况。

例如

paginate() {
  const test = this.$route.query.page;
  console.log(test);

  if (typeof test === 'string') {
    // `test` has type string here because of the predicate.
    this.currPage = parseInt(test);
  }
}

Playground Link

请注意，上述解决方案虽然确实正确，但改变了原始代码的含义，如果 test 是，则 this.currPage 不变不是字符串。