Как явно задать новое свойство у `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?
Перегрузка конструктора в TypeScript
Как подавить ошибку "error TS2533: Object is possibly 'null' or 'undefined'"?
Использование async/await с методом Array.map