打字稿不检测回调条件 - Vue

Question

在我的 Vuex 存储状态下，我有一个 foo 对象，它可能是 null。因此，在访问其中一个属性（例如 id）之前，我必须检查 this.$store.state.foo 是否不为空。

它一直运行良好，但似乎 TypeScript 没有检测到 axios 回调中的条件：

private join(): void {
    if (this.$store.state.foo) { // <- condition to check that `this.$store.state.foo` is not null
      this.axios.post(`/foo/${this.$tstore.state.foo.id}/join`) // <- No error here
        .then((response) => {
          // ... some code
          this.$router.push({
            name: 'bar',
            params: { id: this.$tstore.state.foo.id } // <- TS error here, foo is potentially null
          });
        })
        .catch((error: AxiosError) => {
          // ... some code
        });
    }
  }

我显然可以再次检查 this.$store.state.foo 是否在回调中不为空，但它有办法告诉 TypeScript 检测上范围条件吗？

Answer 1

您需要捕获您的变量 - TS 假定 foo 的值在回调运行时可能已变为未定义。

检查一个更简单的例子：

class X {
  foo: string | undefined;

  print = (x: string) => console.log(x);

  private join(): void {
    if (this.foo) { 
      setTimeout(() => {
        this.print(this.foo);   // ERROR
      }, 1000);
    }
  }

  private joinWithCapture(): void {
    const fooCapture = this.foo;
    if (fooCapture) { 
      setTimeout(() => {
        this.print(fooCapture); // OK
      }, 1000);
    }
  }
}

Playground

打字稿不检测回调条件 - Vue

Typescript does not detect condition in callback - Vue

javascript

callback

typescript

vue.js

vuex