Расширить окно с новым свойством [duplicate]

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

Внутри файла определения .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");

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

Я решил сделать это вместо:

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

declare var window: MyWindow;

UPDATE : С TypeScript 0.9.5 принятый ответ снова работает.

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

(<any>window).MyNamespace

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

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

(window as any).MyNamespace

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

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

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

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

let myWindow = window as any;

, а затем myWindow.myProp = 'my value';

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

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

Итак, в конце файл получил что-то вроде:

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

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

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

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

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

Я также сталкиваюсь с аналогичной проблемой сегодня утром. Я пробовал так много «решений» на 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['MyNamespace']

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

Если вам нужно расширить объект 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

Вот как это сделать, если вы используете 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

Сделано, используйте его & zwnj; ! Тип машинописного текста больше не будет жаловаться:

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

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

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

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

Если вы используете Angular CLI, это очень просто (проверено на CLI RC.0):

src / polyfills.ts

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

my-custom-utils .ts

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

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

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

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

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

export interface CustomWindow extends Window {
    customAttribute: any;
}

Во-вторых, вы импортируете

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

Третье глобальное окно var cast с помощью CustomWindow

declare let window: CustomWindow;

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

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

Протестировано с помощью TypScript 2.4.x