Erreur TypeScript: la propriété 'X' n'existe pas sur le type 'Window'

Question

J'ai ajouté TS à mon application React/Redux.

J'utilise window objet dans mon application comme ceci:

componentDidMount() {
  let FB = window.FB;
}

TS lance une erreur:

Erreur TypeScript: la propriété 'FB' n'existe pas sur le type 'Window'. TS2339

Je veux corriger l'erreur.

1 (doesn't work)

// 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'. TS2339

2 (fixes the error)

J'ai trouvé la réponse ici https://stackoverflow.com/a/56402425/1114926

declare const window: any;

componentDidMount() {
  let FB = window.FB;
}
// No errors, works well

Pourquoi la première version ne fonctionne-t-elle pas, mais la seconde, même si je ne spécifie pas du tout la propriété FB?

Answer 1

Pourquoi declare const window: any;?

Parce que vous déclarez une variable locale de type any. Avoir quelque chose de type any désactive essentiellement la vérification de type pour window afin que vous puissiez faire quoi que ce soit avec. Je ne recommande vraiment pas cette solution, elle est vraiment mauvaise.

Pourquoi type Window = { FB: any } Ne fonctionne pas? Vous définissez un type Window. Ce type, s'il est défini dans un module, n'a rien à voir avec le type de l'objet global window, c'est juste un type qui se trouve être appelé Window à l'intérieur de votre module.

La bonne solution Pour étendre window vous devez étendre l'interface globale Window. Vous pouvez faire ceci comme ceci:

declare global {
    interface Window {
        FB:any;
    }
}

let FB = window.FB; // ok now

Notez que cette extension sera disponible dans tout votre projet et pas seulement dans le fichier dans lequel vous la définissez. Aussi, si FB a des définitions, vous pourriez envisager de la taper un peu mieux (FB: typeof import('FBOrWhateverModuleNameThisHas'))