Как вы явно устанавливаете новое свойство для `window` в TypeScript?

Question

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

1249

typescript

Источник

user31308 03 окт '12 в 13:01

30 ответов

Решение

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

(<any>window).MyNamespace

567

Источник

user851913 09 июн '15 в 19:18

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

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

(window as any).MyNamespace

309

Источник

user1489830 15 авг '16 в 23:25

Или же...

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

window['MyNamespace']

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

232

Источник

user224125 20 ноя '12 в 19:36

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

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

142

Источник

user3090602 27 июл '17 в 13:28

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

SRC /polyfills.ts

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

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

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

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

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

103

Источник

user1087131 21 мар '17 в 13:38

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

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

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

declare var window: MyWindow;

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

83

Источник

user768100 27 авг '13 в 21:22

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

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

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

70

Источник

user274837 23 окт '16 в 15:24

Создайте файл с именем 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

55

Источник

user12278945 09 янв '20 в 22:50

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

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

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

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

https://github.com/Microsoft/TypeScript/issues/3180

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

Пример ниже:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

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

49

Источник

user3326749 19 май '17 в 03:26

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

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

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

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

let myWindow = window as any;

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

37

Источник

user4625144 06 июн '18 в 13:13

Начиная с версии 3.4 TypeScript поддерживает globalThis. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#type-checking-for-globalthis

По ссылке выше:

      // in a global file:
var abc = 100;
// Refers to 'abc' from above.
globalThis.abc = 200;

«Глобальный» файл - это файл, не имеющий инструкции импорта / экспорта. Итак, декларация var abc; можно записать в .d.ts.

23

Источник

24 фев '21 в 14:59

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

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

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

22

Источник

user2200250 16 мар '17 в 17:38

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

interface Window {
    MyNamespace: any;
}

18

Источник

user12685419 04 мар '20 в 05:51

      // In typings.d.ts(is Global)
export declare global {
    interface Window {
        __PUBLIC__: string;
    }
}

17

Источник

user11727422 27 янв '22 в 03:44

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

window["newProperty"] = customObj;

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

17

Источник

user2321724 18 июн '19 в 22:01

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

interface Window {
  someValue: string
  another: boolean
}

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

17

Источник

user529829 12 фев '19 в 21:50

С помощью

window["MyNamespace"] = window["MyNamespace"] || {};

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

interface MyNamespacedWindow extends Window {
    MyNamespace: object;
}

declare var window: MyNamespacedWindow;

16

Источник

user5423108 13 июл '20 в 07:07

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

16

Источник

user309031 19 ноя '16 в 21:31

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

declare var window: any;

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

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

window.MyNamespace

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

window.MyNamespace = MyObject

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

12

Источник

user4630113 01 июн '19 в 01:41

[2022]: Нам нужно расширить объект «окно» в нашем проекте React или Nextjs. Мы можем использовать следующий шаг, чтобы решить эту проблему.

Создайте папку внутри имени папки src как типы.
Создайте файл внутри имени папки типов как index.d.ts

напишите этот код в файле index.d.ts.

        export {};
 declare global {
   interface Window {
    NameSpace: any;
   }

 }
 window.NameSpace= window.NameSpace|| {};

сохраните этот файл.

Теперь последнее изменение.

Измените файл « tsConfig.json ». чтобы наследовать как тип модуля узла, так и наши типы.

      {
  "compilerOptions": {
   ...
    "typeRoots": [
      "./node_modules/@types",
      "./src/types"
    ],
 ....
}

11

Источник

user11711849 29 июн '22 в 10:02

Полный и краткий ответ

1- Добавить `typeRoots`собственность на `tsconfig.json`:

      {
  "compilerOptions": {
    ...
    "typeRoots": ["src/@types", "node_modules/@types"]
    ...
  }
}

2- Продлить `Window`тип

      // file: src/@types/global.d.ts

declare global {
    interface Window { customProperty: <type>; }
}

11

Источник

user5062890 11 янв '22 в 16:32

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

Внутри .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");

9

Источник

user264514 20 апр '17 в 15:50

Для тех, кто хочет установить вычисляемое или динамическое свойство на 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]

8

Источник

user1168661 13 фев '19 в 00:15

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

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

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

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {}

7

Источник

user2279763 12 ноя '18 в 07:29

      (window as { test: string } & Window & typeof globalThis).test = `Hello World`;

5

Источник

user5505474 16 янв '22 в 07:47

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

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

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

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

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

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

2

Источник

user6488401 01 авг '18 в 11:29

Typescript предотвращает доступ к объекту без присвоения типа, который имеет желаемое свойство или уже назначен any поэтому вы можете использовать необязательную цепочку window?.MyNamespace = 'value'.

1

Источник

user11052491 06 ноя '20 в 10:20

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

-2

Источник

user12225851 09 фев '22 в 10:21

Я знаю, что этот вопрос может быть слишком старым для новых ответов, но недавно я сделал это с помощью метода, который здесь не упоминался -Object.defineProperty(). Так:

      Object.defineProperty(window, 'MyNamespace', {
  enumerable: true,
  configurable: true,
  value: MyNamespace || {}
});

-2

Источник

user10155120 05 мар '23 в 08:30

Другие вопросы по тегам typescript

user31308 03 окт '12 в 13:46 2012-10-03 13:46 · Accepted Answer · 2012-10-03 13:46

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

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

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

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

1485

Источник

user31308 03 окт '12 в 13:46

Как вы явно устанавливаете новое свойство для `window` в TypeScript?

30 ответов

Полный и краткий ответ

1- Добавить typeRootsсобственность на tsconfig.json:

2- Продлить Windowтип

1- Добавить `typeRoots`собственность на `tsconfig.json`:

2- Продлить `Window`тип