W stanie mojego sklepu Vuex mam obiekt foo, który prawdopodobnie może być null. Tak więc przed uzyskaniem dostępu do jednej z jego właściwości (na przykład id), muszę sprawdzić, czy this.$store.state.foo nie ma wartości NULL.

Cały czas działa dobrze, ale wygląda na to, że TypeScript nie wykrywa warunku w wywołaniu zwrotnym 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
        });
    }
  }

Mogę oczywiście ponownie sprawdzić, czy this.$store.state.foo nie ma wartości NULL w wywołaniu zwrotnym, ale czy istnieje sposób, aby nakazać TypeScriptowi wykrycie warunku górnego zakresu?

1
Pochwar 5 styczeń 2022, 13:42
Co z params: { id: this.$tstore.state.foo?.id }
 – 
Boussadjra Brahim
5 styczeń 2022, 13:55
Nie działa, ponieważ router vue oczekuje, że parametry nie będą puste. I nie o to chodzi w moim pytaniu: dlaczego TypeScript nie wykrywa warunku w górnym zakresie?
 – 
Pochwar
5 styczeń 2022, 14:00

1 odpowiedź

Najlepsza odpowiedź

Musisz przechwycić swoją zmienną — TS zakłada, że ​​wartość foo mogła stać się niezdefiniowana do czasu uruchomienia wywołania zwrotnego.

Sprawdź prostszy przykład:

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);
    }
  }
}

Plac zabaw

1
Lesiak 5 styczeń 2022, 14:00
OK, dzięki za wyjaśnienia :)
 – 
Pochwar
5 styczeń 2022, 14:19