Как явно задать новое свойство у `window` в TypeScript?
Я настроил глобальные пространства имен для своих объектов, явно задав свойство на объекте window
.
window.MyNamespace = window.MyNamespace || {};
Однако TypeScript подчеркивает MyNamespace
и жалуется, что:
Свойство 'MyNamespace' отсутствует в значении типа 'window any'
Я могу сделать код рабочим, объявив MyNamespace
как амбиентную переменную и убрав явное упоминание window
, но я не хочу этого делать.
declare var MyNamespace: any;
MyNamespace = MyNamespace || {};
Как мне оставить window
в коде и удовлетворить TypeScript?
К слову, мне особенно забавно, что TypeScript жалуется, ведь он указывает, что window
имеет тип any
, который по определению может содержать абсолютно всё.
5 ответ(ов)
Если вы столкнулись с проблемами при использовании Svelte или TSX и другие ответы не помогли, попробуйте следующий подход:
(window as any).MyNamespace
Этот код позволяет вам явно указать тип window
как any
, что может помочь избежать ошибок компиляции, связанных с отсутствием определенных свойств у объекта window
. Это может быть полезно, если вы добавляете свою собственную пространственную имя или свойства в глобальный объект.
Если у вас есть дополнительные вопросы или требуется уточнение, не стесняйтесь спрашивать!
На данный момент, начиная с TypeScript версии ^3.4.3, данное решение больше не работает.
Вы можете просто написать:
window['MyNamespace']
В этом случае вы не получите ошибки компиляции, и код будет работать так же, как если бы вы написали window.MyNamespace
.
Глобальные переменные — это «зло» 😃 Я думаю, что лучший способ сохранить портативность выглядит следующим образом:
Сначала вы экспортируете интерфейс (например, в файле ./custom.window.ts):
export interface CustomWindow extends Window {
customAttribute: any;
}
Затем вы импортируете его:
import { CustomWindow } from './custom.window.ts';
После этого вы приводите глобальную переменную window
к типу CustomWindow
:
declare let window: CustomWindow;
Таким образом, у вас не будет ошибок в других IDE, когда вы будете использовать существующие атрибуты объекта window
. В конечном итоге попробуйте:
window.customAttribute = 'works';
window.location.href = '/works';
Это проверено с TypeScript версии 2.4.x и новее!
Принятый ответ был тем, что я использовал раньше, но с TypeScript 0.9.* он больше не работает. Новое определение интерфейса Window
, похоже, полностью заменяет встроенное определение, а не дополняет его.
Я начал использовать следующий подход:
interface MyWindow extends Window {
myFunction(): void;
}
declare var window: MyWindow;
ОБНОВЛЕНИЕ: С TypeScript 0.9.5 принятый ответ снова работает.
Если вы используете create-react-app версии 3.3 и ищете самый простой способ расширить тип Window
, то вы можете сделать это, добавив интерфейс в автоматически сгенерированный файл react-app-env.d.ts
. Вот как это можно сделать:
interface Window {
MyNamespace: any;
}
Такой подход позволит вам добавлять свои собственные свойства в объект Window
, чтобы TypeScript не выдавал ошибки при их использовании. Убедитесь, что вы сохраняете изменения в файле, и после этого у вас будет доступ к window.MyNamespace
в вашем приложении.
Как преобразовать строку в число в TypeScript?
"Получение и установка значений в TypeScript: методы get и set"
Как конвертировать строку в enum в TypeScript?
Как удалить элемент массива в TypeScript?
'unknown' против 'any': в чем разница?