En el estado de mi tienda Vuex, tengo un objeto foo que posiblemente sea null . Entonces, antes de acceder a una de sus propiedades ( id , por ejemplo), debo verificar que this.$store.state.foo no sea nulo.
Funciona bien todo el tiempo, pero parece que TypeScript no detecta la condición en una devolución de llamada de 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 }); } } Obviamente, puedo verificar nuevamente si this.$store.state.foo no es nulo en la devolución de llamada, pero ¿hay alguna forma de decirle a TypeScript que detecte la condición de alcance superior?
Debe capturar su variable: TS asume que el valor de foo podría haberse vuelto indefinido en el momento en que se ejecuta la devolución de llamada.
Mira un ejemplo más simple:
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); } } }