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
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);
}
}
}
1
Lesiak
5 styczeń 2022, 14:00
OK, dzięki za wyjaśnienia :)
– Pochwar
5 styczeń 2022, 14:19
params: { id: this.$tstore.state.foo?.id }