Ошибка TypeScript: свойство 'X' не существует для типа 'Window'

Question

Я добавил TS в свое приложение React / Redux.

Я использую window объект в моем приложении, например:

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

TS выдает ошибку:

Ошибка TypeScript: свойство 'FB' не существует для типа 'Window'. TS2339

Я хочу исправить ошибку.

1 (не работает)

// 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 (исправляет ошибку)

Я нашел ответ здесь https://stackoverflow.com/a/56402425/1114926

declare const window: any;

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

Почему первая версия не работает, а вторая работает, хотя я вообще не указываю свойство FB?

Answer 1

Почему declare const window: any;?

Поскольку вы объявляете локальную переменную типа any. Наличие чего-то типа any по сути отключает проверку типа для window, так что вы можете делать с ним все что угодно. Я действительно не рекомендую это решение, оно действительно плохое.

Почему type Window = { FB: any } не работает? Вы определяете тип Window. Этот тип, если он определен в модуле, не имеет ничего общего с типом глобального window объекта, это просто тип, который называется Window внутри вашего модуля.

Хорошее решение Для расширения window необходимо расширить глобальный интерфейс Window. Вы можете сделать это так:

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

let FB = window.FB; // ok now

Обратите внимание, что это расширение будет доступно во всем вашем проекте, а не только в файле, в котором вы его определяете. Также, если у FB есть определения, вы можете набрать его немного лучше (FB: typeof import('FBOrWhateverModuleNameThisHas'))