objects - typescript static class

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

Question

Configuré espacios de nombres globales para mis objetos configurando explícitamente una propiedad en la window .

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

TypeScript subraya MyNamespace y se queja de que:

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

Puedo hacer que el código funcione declarando MyNamespace como una variable ambiental y eliminando la window explícita, pero no quiero hacer eso.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

¿Cómo puedo mantener la window allí y hacer que TypeScript sea feliz?

Como nota al margen, me parece especialmente gracioso que TypeScript se queje, ya que me dice que la window es de tipo any que definitivamente puede contener cualquier cosa.

Answer 1

¿Utilizando TSX? Ninguna de las otras respuestas funcionaba para mí.

Esto es lo que hice:

(window as any).MyNamespace

Answer 2

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

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

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

Básicamente, necesita ampliar la interfaz de la window existente para informarle sobre su nueva propiedad.

Answer 3

Aquí le indicamos cómo hacerlo, si está utilizando TypeScript Definition Manager .

npm install typings --global

Crear typings/custom/window.d.ts :

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Instala tu tipeo personalizado:

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

Hecho, úsalo‌ ! Typescript no se quejará más:

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

Answer 4

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 de la historia de la fusión de declaraciones, pero explica por qué podría funcionar lo siguiente.

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

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

Answer 5

Hacer una interfaz personalizada extiende la ventana y agregar su propiedad personalizada como opcional.

Luego, deje que la ventana personalizada use la interfaz personalizada, pero que se valore con la ventana original.

Se ha trabajado con [email protected].

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Answer 6

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

• Algunos de ellos simplemente suprimen la inferencia de tipo 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 me encuentro con el problema similar esta mañana. Intenté tantas "soluciones" en SO, pero ninguna de ellas produce ningún tipo de error y habilita el salto de tipo en IDE (webstorm o vscode).

Al fin, desde aqui

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

, Encuentro una solución razonable para adjuntar mecanografías 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 los tipos de espacio de nombres MyNamespace y la interfaz MyNamespace en la variable global myNamespace (la propiedad de window).

Answer 7

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

He tomado para hacer esto en su lugar:

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

declare var window: MyWindow;

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

Answer 8

Los globales 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;
}

Segundo importas

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

Tercera ventana global de var con CustomWindow

declare let window: CustomWindow;

De esta manera, no tiene una línea roja en un IDE diferente si usa con los atributos existentes del objeto de la ventana, así que al final intente:

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

Probado con Typescript 2.4.x

Answer 9

No necesito hacer esto muy a menudo, el único caso que tuve fue cuando usé 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 luego myWindow.myProp = ''my value'';

Answer 10

O...

usted puede simplemente escribir:

window[''MyNamespace'']

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

Answer 11

Para mantenerlo dinámico, solo usa:

(<any>window).MyNamespace

Answer 12

Para referencia (esta es la respuesta correcta):

Dentro de un archivo de definición .d.ts

type MyGlobalFunctionType = (name: string) => void

Si trabaja en el navegador, agregue miembros al contexto de la ventana del navegador volviendo 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 en realidad vivirá en la ventana o global)

declare const myGlobalFunction: MyGlobalFunctionType;

Luego, en un archivo .ts normal, pero importado como efecto secundario, realmente lo implementas:

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

Y finalmente, utilícelo en cualquier otra parte del código base, ya sea con:

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

myGlobalFunction("Kevin");

Answer 13

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

Para que mi biblioteca pueda usar declaraciones, tuve que usar la extensión d.ts para el archivo que declara las nuevas propiedades del objeto global.

Así que 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 tus public_api.ts .

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

Answer 14

Si está utilizando la CLI angular , es realmente sencillo (probado en CLI RC.0):

src / polyfills.ts

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

my-custom-utils.ts

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

Estoy usando IntelliJ, por lo que también tuve que cambiar la siguiente configuración en el IDE antes de que se recuperaran mis nuevos rellenos de polietileno:

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

Answer 15

Si necesita extender el objeto de la window con un tipo personalizado que requiera el uso de la 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