Как вы явно устанавливаете новое свойство для `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который определенно может содержать что угодно.

Только что нашел ответ на этот вопрос в ответе на другой вопрос StackOverflow .

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

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

По сути, вам нужно расширить существующий windowинтерфейс, чтобы рассказать о своем новом свойстве.

Чтобы сохранить динамичность, просто используйте:

(<any>window).MyNamespace

КАК ТИПИСКРИПТ ^ 3.4.3 НАСТОЯЩЕГО РЕШЕНИЯ НЕ ДЕЙСТВУЕТ

Или...

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

window['MyNamespace']

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

Используете TSX? Ни один из других ответов не работал для меня.

Вот что я сделал:

(window as any).MyNamespace

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

Я взялся за это вместо этого:

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

declare var window: MyWindow;

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

Глобальные являются «злом» :), я думаю, что лучший способ иметь также переносимость:

Сначала вы экспортируете интерфейс: (например: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

Второй вы импортируете

import {CustomWindow} from './custom.window.ts';

Третье приведенное глобальное окно var с CustomWindow

declare let window: CustomWindow;

Таким образом, у вас также не будет красной линии в другой IDE, если вы используете существующие атрибуты объекта окна, поэтому в конце попробуйте:

window.customAttribute = 'works';
window.location.href = '/works';

Протестировано с Typescript 2.4.x и новее!

Если вам нужно расширить windowобъект пользовательским типом, который требует его использования, importвы можете использовать следующий метод:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

См. «Глобальное увеличение» в разделе «Слияние деклараций» Руководства: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation.

Для тех, кто использует Angular CLI, это просто:

SRC / polyfills.ts

declare global {
  interface Window {
    myCustomFn: () => void;
  }
}

My-таможенно-utils.ts

window.myCustomFn = function () {
  ...
};

Если вы используете IntelliJ, вам также необходимо изменить следующие настройки в IDE, прежде чем ваши новые полифиллы будут загружены:

> File 
> Settings 
> Languages & Frameworks 
> TypeScript 
> check 'Use TypeScript Service'.

Мне не нужно делать это очень часто, единственный случай, который у меня был, это когда я использовал Redux Devtools с промежуточным ПО.

Я просто сделал:

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Или вы могли бы сделать:

let myWindow = window as any;

а потом myWindow.myProp = 'my value';

Большинство других ответов не идеальны.

• Некоторые из них просто подавляют вывод типа для магазина.
• Некоторые другие заботятся только о глобальной переменной как о пространстве имен, но не как интерфейс / класс

Я также сталкиваюсь с подобной проблемой этим утром. Я пробовал так много «решений» на SO, но ни одно из них не выдает абсолютно никакой ошибки типа и не позволяет запускать переходы типа в IDE (webstorm или vscode).

Наконец, отсюда

https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512

Я нахожу разумное решение, чтобы прикрепить типизации для глобальной переменной, которая действует как интерфейс / класс и пространство имен как .

Пример ниже:

// typings.d.ts
declare interface Window {
    myNamespace?: MyNamespace & typeof MyNamespace
}

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Теперь вышеприведенный код объединяет типизацию пространства имен MyNamespaceи интерфейса MyNamespaceв глобальную переменную myNamespace(свойство window).

После поиска ответов, я думаю, что эта страница может быть полезной. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation Не уверен насчет истории слияния объявлений, но он объясняет, почему может работать следующее.

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

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

Вот как это сделать, если вы используете TypeScript Definition Manager !

npm install typings --global

Создать typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Установите свой пользовательский набор:

typings install file:typings/custom/window.d.ts --save --global

Готово, используй это ! Машинопись больше не будет жаловаться:

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

Typscript не выполняет проверку типов в свойствах строки.

window["newProperty"] = customObj;

В идеале сценарий глобальной переменной следует избегать. Я использую его иногда для отладки объекта в консоли браузера.

Создайте файл с именем, global.d.tsнапример, /src/@types/global.d.tsзатем определите интерфейс, например:

interface Window {
  myLib: any
}

ссылка: https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html

Если вы используете Typescript 3.x, вы можете пропустить declare globalчасть в других ответах и ​​вместо этого просто использовать:

interface Window {
  someValue: string
  another: boolean
}

Это работало со мной при использовании Typescript 3.3, WebPack и TSLint.

Для справки (это правильный ответ):

Внутри .d.tsфайла определения

type MyGlobalFunctionType = (name: string) => void

Если вы работаете в браузере, вы добавляете элементы в контекст окна браузера, открывая интерфейс Window:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Та же идея для NodeJS:

declare module NodeJS {
  interface Global {
    myGlobalFunction: MyGlobalFunctionType
  }
}

Теперь вы объявляете корневую переменную (которая на самом деле будет жить в окне или глобальной переменной)

declare const myGlobalFunction: MyGlobalFunctionType;

Затем в обычном .tsфайле, но импортированном как побочный эффект, вы фактически реализуете его:

global/* or window */.myGlobalFunction = function (name: string) {
  console.log("Hey !", name);
};

И, наконец, используйте его в другом месте кодовой базы:

global/* or window */.myGlobalFunction("Kevin");

myGlobalFunction("Kevin");

Создание настраиваемого интерфейса расширяет окно и добавляет ваше настраиваемое свойство как необязательное.

Затем позвольте customWindow, использующему пользовательский интерфейс, но оцененному в исходном окне.

Это работает с typcript@3.1.3.

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Для тех, кто хочет установить вычисляемое или динамическое свойство windowобъекта, вы обнаружите, что это невозможно с помощью declare globalметода. Чтобы уточнить для этого случая использования

window[DynamicObject.key] // Element implicitly has an 'any' type because type Window has no index signature

Вы можете попытаться сделать что-то вроде этого

declare global {
  interface Window {
    [DyanmicObject.key]: string; // error RIP
  }
}

Выше будет ошибка, хотя. Это связано с тем, что в Typescript интерфейсы плохо работают с вычисляемыми свойствами и выдают ошибку вроде

A computed property name in an interface must directly refer to a built-in symbol

Чтобы обойти эту проблему , вы можете пойти с внушал кастинг windowна <any>так что вы можете сделать

(window as any)[DynamicObject.key]

Используя create-Reaction-app v3.3, я обнаружил, что самый простой способ добиться этого - расширить Windowтип в сгенерированном автоматически react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

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

declare var window: any;

Это не переопределит объект окна или не создаст другую переменную с именем window.
Это означает, что окно определено где-то еще, и вы просто ссылаетесь на него в текущей области видимости.

Затем вы можете обратиться к своему объекту MyNamespace просто: -

window.MyNamespace

Или вы можете установить новое свойство windowобъекта просто:

window.MyNamespace = MyObject

И теперь машинопись не будет жаловаться.

Я хотел использовать это в библиотеке Angular (6) сегодня, и мне потребовалось некоторое время, чтобы заставить это работать как ожидалось.

Чтобы моя библиотека использовала объявления, мне пришлось использовать d.tsрасширение для файла, который объявляет новые свойства глобального объекта.

Итак, в конце концов, файл закончился чем-то вроде:

/path-to-angular-workspace/angular-workspace/projects/angular-library/src/globals.d.ts

После создания не забудьте выставить его в своем public_api.ts.

Это сделало это для меня. Надеюсь это поможет.