He agregado TS a mi aplicación React/Redux.
Uso un objeto de window en mi aplicación de esta manera:
componentDidMount() { let FB = window.FB; }TS arroja un error:
Error de TypeScript: la propiedad 'FB' no existe en el tipo 'Ventana'. TS2339
Quiero corregir el error.
// Why doesn't this work? I have defined a type locally type Window = { FB: any } componentDidMount() { let FB = window.FB; } // TypeScript error: Property 'FB' does not exist on type 'Window'. TS2339Encontré la respuesta aquí https://stackoverflow.com/a/56402425/1114926
declare const window: any; componentDidMount() { let FB = window.FB; } // No errors, works well¿Por qué la primera versión no funciona, pero la segunda sí, aunque no especifico la propiedad FB en absoluto?
¿Por qué declare const window: any; ¿trabaja?
Porque declaras una variable local de tipo any . Tener algo de tipo any esencialmente desactiva la verificación de tipos para la window para que pueda hacer cualquier cosa con él. Realmente no recomiendo esta solución, es realmente mala.
¿Por qué no funciona el type Window = { FB: any } ? Defina un tipo Window . Este tipo, si se define en un módulo, no tiene nada que ver con el tipo del objeto de window global, es solo un tipo que se llama Window dentro de su módulo.
La buena solución Para ampliar la window debe ampliar la interfaz global de la Window . Puedes hacer esto así:
declare global { interface Window { FB:any; } } let FB = window.FB; // ok now Tenga en cuenta que esta extensión estará disponible en todo su proyecto, no solo en el archivo en el que lo define. Además, si FB tiene definiciones, podría considerar escribirlo un poco mejor ( FB: typeof import('FBOrWhateverModuleNameThisHas') )
Hay algunas maneras de resolver este problema:
Algunos ejemplos:
1-) Hazlo en yeso:
(window as any).X2-) Pon el siguiente código en el archivo react-app-env.d.ts
interface Window { X?: { Y?: { ....... } } }puede resolver el problema fácilmente sin necesidad de declaración
window["FB"]