¿Cómo se establece explícitamente una nueva propiedad en `window` en TypeScript?

Configuro espacios de nombres globales para mis objetos estableciendo explícitamente una propiedad en window.

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

TypeScript subraya MyNamespacey se queja de que:

La propiedad 'MyNamespace' no existe en el valor de tipo 'window' any "

Puedo hacer que el código funcione declarándolo MyNamespacecomo una variable ambiental y descartando la windowexplicitación, pero no quiero hacer eso.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

¿Cómo puedo mantenerme windowallí y hacer feliz a TypeScript?

Como nota al margen, me parece especialmente divertido que TypeScript se queje, ya que me dice que windowes de tipo anyque definitivamente puede contener cualquier cosa.

Acabo de encontrar la respuesta a esto en la respuesta de otra pregunta de StackOverflow .

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

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

Básicamente, necesita extender la windowinterfaz existente para informarle sobre su nueva propiedad.

Para mantenerlo dinámico, solo use:

(<any>window).MyNamespace

A PARTIR DE TYPESCRIPT ^ 3.4.3 ESTA SOLUCIÓN NO FUNCIONA

O...

solo puedes escribir:

window['MyNamespace']

y no obtendrá un error de compilación y funciona igual que escribir window.MyNamespace

Usando TSX? Ninguna de las otras respuestas me funcionó.

Esto es lo que hice:

(window as any).MyNamespace

La respuesta aceptada es lo que solía usar, pero con TypeScript 0.9. * Ya no funciona. La nueva definición de laWindow interfaz parece reemplazar por completo la definición incorporada, en lugar de aumentarla.

En cambio, he decidido hacer esto:

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

declare var window: MyWindow;

ACTUALIZACIÓN: Con TypeScript 0.9.5 la respuesta aceptada está funcionando nuevamente.

Global son "malvados" :), creo que la mejor manera de tener también la portabilidad es:

Primero exporta la interfaz: (por ejemplo: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

En segundo lugar importas

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

Tercera ventana de conversión global de conversión con CustomWindow

declare let window: CustomWindow;

De esta manera, no tiene también una línea roja en IDE diferente si lo usa con atributos existentes de objetos de ventana, así que al final intente:

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

Probado con Typecript 2.4.xy más nuevo!

Si necesita extender el windowobjeto con un tipo personalizado que requiera su uso import, puede usar el siguiente método:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

Consulte 'Aumento global' en la sección 'Fusión de declaraciones' del Manual: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Para aquellos que usan la CLI Angular es sencillo:

src / polyfills.ts

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

my-custom-utils.ts

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

Si está utilizando IntelliJ, también debe cambiar la siguiente configuración en el IDE antes de que se recuperen sus nuevos polyfills:

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

No necesito hacer esto muy a menudo, el único caso que tuve fue cuando utilicé Redux Devtools con middleware.

Simplemente hice:

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

O podrías hacer:

let myWindow = window as any;

y entonces myWindow.myProp = 'my value';

La mayoría de las otras respuestas no son perfectas.

• Algunos de ellos simplemente suprimen la inferencia de tipos para la tienda.
• Algunos de los otros solo se preocupan por la variable global como espacio de nombres, pero no como interfaz / clase

También encuentro el problema similar esta mañana. Probé tantas "soluciones" en SO, pero ninguna de ellas produce absolutamente ningún error de tipo y permite activar el salto de tipo en IDE (tormenta web o vscode).

Finalmente desde aquí

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

, Encuentro una solución razonable para adjuntar tipings para la variable global que actúa como interfaz / clase y espacio de nombres .

El ejemplo está abajo:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Ahora, el código anterior combina las tipificaciones del espacio de nombres MyNamespacey la interfaz MyNamespaceen la variable global myNamespace(la propiedad de la ventana).

Después de encontrar respuestas, creo que esta página podría ser útil. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation No estoy seguro sobre el historial de fusión de declaraciones, pero explica por qué lo siguiente podría funcionar.

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

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

¡Aquí le mostramos cómo hacerlo si usa el Administrador de definiciones de TypeScript !

npm install typings --global

Crear typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Instala tu mecanografía personalizada:

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

Listo, úsalo ! La mecanografía ya no se quejará:

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

Typscript no realiza la verificación de tipo en las propiedades de cadena.

window["newProperty"] = customObj;

Idealmente, se debe evitar el escenario variable global. Lo uso a veces para depurar un objeto en la consola del navegador.

Cree un archivo llamado, global.d.tspor ejemplo, /src/@types/global.d.tsluego defina una interfaz como:

interface Window {
  myLib: any
}

ref: https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html

Si está utilizando Typecript 3.x, es posible que pueda omitir la declare globalparte en las otras respuestas y, en su lugar, simplemente use:

interface Window {
  someValue: string
  another: boolean
}

Esto funcionó conmigo cuando usé Typecript 3.3, WebPack y TSLint.

Como referencia (esta es la respuesta correcta):

Dentro de un .d.tsarchivo de definición

type MyGlobalFunctionType = (name: string) => void

Si trabaja en el navegador, agrega miembros al contexto de la ventana del navegador al volver a abrir la interfaz de Windows:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

La misma idea para NodeJS:

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

Ahora declara la variable raíz (que realmente vivirá en la ventana o global)

declare const myGlobalFunction: MyGlobalFunctionType;

Luego, en un .tsarchivo normal , pero importado como efecto secundario, en realidad lo implementa:

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

Y, finalmente, úselo en otra parte de la base de código, ya sea con:

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

myGlobalFunction("Kevin");

Hacer una interfaz personalizada extiende la Ventana y agrega tu propiedad personalizada como opcional.

Luego, deje la ventana personalizada que usa la interfaz personalizada, pero que se valora con la ventana original.

Se trabajó con el [email protected].

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Para aquellos que quieran establecer una propiedad calculada o dinámica en el windowobjeto, encontrarán que eso no es posible con el declare globalmétodo. Para aclarar para este caso de uso

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

Podrías intentar hacer algo como esto

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

Sin embargo, lo anterior será un error. Esto se debe a que, en Typecript, las interfaces no funcionan bien con las propiedades calculadas y arrojan un error como

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

Para evitar esto, puedes ir con la sugerencia de emitir windowpara <any>que puedas hacer

(window as any)[DynamicObject.key]

Usando create-react-app v3.3, encontré que la forma más fácil de lograr esto era extender el Windowtipo en el autogenerado react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

Primero debe declarar el objeto de ventana en el alcance actual.
Porque mecanografiado quisiera saber el tipo del objeto.
Como el objeto de ventana está definido en otro lugar, no puede redefinirlo.
Pero puede declararlo de la siguiente manera:

declare var window: any;

Esto no redefinirá el objeto de la ventana o no creará otra variable con nombre window.
Esto significa que la ventana está definida en otro lugar y solo está haciendo referencia a ella en el alcance actual.

Entonces puede referirse a su objeto MyNamespace simplemente por: -

window.MyNamespace

O puede establecer la nueva propiedad en el windowobjeto simplemente: -

window.MyNamespace = MyObject

Y ahora el mecanografiado no se quejará.

Quería usar esto en una biblioteca Angular (6) hoy y me tomó un tiempo lograr que funcionara como se esperaba.

Para que mi biblioteca use declaraciones, tuve que usar la d.tsextensión del archivo que declara las nuevas propiedades del objeto global.

Entonces, al final, el archivo terminó con algo como:

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

Una vez creado, no olvides exponerlo en tu public_api.ts.

Eso lo hizo por mí. Espero que esto ayude.