Як ви явно встановите нове властивість на `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

Для тих, хто використовує кутовий CLI, це просто:

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'.

Мені це не потрібно робити дуже часто, єдиний випадок, який я мав, був при використанні 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/isissue/3180#issuecomment-102523512

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

Приклад наведено нижче:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Тепер код вище об'єднує типізацію простору імен MyNamespaceта інтерфейс MyNamespaceу глобальну змінну myNamespace(властивість windows ).

Знайшовши відповіді навколо, я думаю, що ця сторінка може бути корисною. 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
}

ref: 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, який використовує користувальницький інтерфейс, але оцінюється з оригінальним вікном.

Він працює з typecript@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-react-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.

Це зробило це для мене. Сподіваюсь, це допомагає.