12

Как явно задать новое свойство у `window` в TypeScript?

9

Я настроил глобальные пространства имен для своих объектов, явно задав свойство на объекте window.

window.MyNamespace = window.MyNamespace || {};

Однако TypeScript подчеркивает MyNamespace и жалуется, что:

Свойство 'MyNamespace' отсутствует в значении типа 'window any'

Я могу сделать код рабочим, объявив MyNamespace как амбиентную переменную и убрав явное упоминание window, но я не хочу этого делать.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Как мне оставить window в коде и удовлетворить TypeScript?

К слову, мне особенно забавно, что TypeScript жалуется, ведь он указывает, что window имеет тип any, который по определению может содержать абсолютно всё.

5 ответ(ов)

3

Если вы столкнулись с проблемами при использовании Svelte или TSX и другие ответы не помогли, попробуйте следующий подход:

(window as any).MyNamespace

Этот код позволяет вам явно указать тип window как any, что может помочь избежать ошибок компиляции, связанных с отсутствием определенных свойств у объекта window. Это может быть полезно, если вы добавляете свою собственную пространственную имя или свойства в глобальный объект.

Если у вас есть дополнительные вопросы или требуется уточнение, не стесняйтесь спрашивать!

2

На данный момент, начиная с TypeScript версии ^3.4.3, данное решение больше не работает.

Вы можете просто написать:

window['MyNamespace']

В этом случае вы не получите ошибки компиляции, и код будет работать так же, как если бы вы написали window.MyNamespace.

1

Глобальные переменные — это «зло» 😃 Я думаю, что лучший способ сохранить портативность выглядит следующим образом:

Сначала вы экспортируете интерфейс (например, в файле ./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 и новее!

0

Принятый ответ был тем, что я использовал раньше, но с TypeScript 0.9.* он больше не работает. Новое определение интерфейса Window, похоже, полностью заменяет встроенное определение, а не дополняет его.

Я начал использовать следующий подход:

interface MyWindow extends Window {
    myFunction(): void;
}

declare var window: MyWindow;

ОБНОВЛЕНИЕ: С TypeScript 0.9.5 принятый ответ снова работает.

0

Если вы используете create-react-app версии 3.3 и ищете самый простой способ расширить тип Window, то вы можете сделать это, добавив интерфейс в автоматически сгенерированный файл react-app-env.d.ts. Вот как это можно сделать:

interface Window {
    MyNamespace: any;
}

Такой подход позволит вам добавлять свои собственные свойства в объект Window, чтобы TypeScript не выдавал ошибки при их использовании. Убедитесь, что вы сохраняете изменения в файле, и после этого у вас будет доступ к window.MyNamespace в вашем приложении.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь