¿Cómo se puede establecer explícitamente una nueva propiedad en `la ventana` en el Manuscrito?

Question

Yo configuración global de espacios de nombres para mis objetos mediante la definición explícita de una propiedad en window.

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

Manuscrito subraya MyNamespace y se queja de que:

La propiedad 'MyNamespace" no existe en valor de tipo 'ventana' cualquier"

Puedo hacer que el código de trabajo, al declarar MyNamespace como un ambiente variable y soltando el window lo explícito, pero no quiero hacer eso.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

¿Cómo puedo mantener window y hacer Manuscrito feliz?

Como una nota del lado, me resulta especialmente curioso que el Manuscrito se queja ya que me dice que window es de tipo any que por definitivamente puede contener cualquier cosa.

Answer 1

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

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

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

Básicamente, usted necesita para ampliar el actual window interfaz para decirle acerca de su nueva propiedad.

Answer 2

Para mantener la dinámica, sólo tiene que utilizar:

(<any>window).MyNamespace

Answer 3

COMO DE TRANSCRIPCIÓN ^3.4.3 ESTA SOLUCIÓN NO FUNCIONA

O...

sólo se puede escribir:

window['MyNamespace']

y usted no obtiene un error de compilación y funciona de la misma como escribir window.MyNamespace

Answer 4

Utilizando TSX?Ninguna de las otras respuestas estaban trabajando para mí.

Esto es lo que hice:

(window as any).MyNamespace

Answer 5

La aceptación de respuesta es lo que yo solía usar, pero con el Manuscrito de 0,9.* ya no funciona.La nueva definición de la Window la interfaz se parece a sustituir completamente a la incorporada en la definición, en lugar de ampliarlo.

Me han llevado a hacer esto en su lugar:

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

declare var window: MyWindow;

ACTUALIZACIÓN: Con el Manuscrito 0.9.5 aceptado la respuesta está funcionando de nuevo.

Answer 6

Global están "mal" :), creo que la mejor manera de tener también la portabilidad es:

Primero de exportación de la interfaz:(por ejemplo:./personalizado.de la ventana.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

Segundo importar

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

Tercer lanzamiento global var ventana con CustomWindow

declare let window: CustomWindow;

De esta manera usted no tiene también la línea roja en diferentes IDE si se utiliza con la existente atributos de objeto de la ventana, así que al final trate de:

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

Probado con el Manuscrito 2.4.x y los más nuevos!

Answer 7

Si necesitas ampliar la window objeto con un tipo personalizado que requiere el uso de import usted puede usar el siguiente método:

de la ventana.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

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

Answer 8

No necesito hacer esto muy a menudo, el único caso que he tenido fue cuando se utiliza Redux Devtools con el middleware.

Yo simplemente hice:

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

O usted podría hacer:

let myWindow = window as any;

y, a continuación, myWindow.myProp = 'my value';

Answer 9

Para aquellos que utilizan el Angular de la CLI es sencillo:

src/polyfills.ts

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

mi-custom-utils.ts

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

Si usted está usando IntelliJ, usted también necesita cambiar la configuración siguiente en el IDE antes de que su nueva polyfills recoger:

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

Answer 10

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

• Algunos de ellos simplemente suprimir el tipo de inferencia para la tienda.
• Algunos de los otros solo se preocupa de la variable global como espacio de nombres, pero no como interfaz/clase

También me encuentro con el problema similar a la de esta mañana.He intentado muchas "soluciones" en TAN, pero ninguno de ellos no producen ningún tipo de error absoluto y habilitar la activación de tipo de salto en IDE(webstorm o vscode).

Finalmente, a partir de aquí

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

, Me parece una solución razonable para adjuntar tipificaciones para la variable global que actúa como interfaz de la clase y del espacio de nombres de ambos.

El ejemplo siguiente:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Ahora, el código anterior, se combina la tipificaciones de espacio de nombres MyNamespace y la interfaz MyNamespace en la variable global myNamespace(la propiedad de la ventana).

Answer 11

Después de encontrar respuestas a su alrededor, creo que esta página puede ser útil.https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation No estoy seguro acerca de la historia de la declaración de la fusión, pero explica por qué las siguientes podía trabajar.

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

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

Answer 12

Aquí está cómo hacerlo, si usted está utilizando Transcripción De La Definición De Administrador!

npm install typings --global

Crear typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Instalar su costumbre de escribir:

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

Hecho, lo uso! Manuscrito no quejarse más:

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

Answer 13

Si usted está utilizando el Manuscrito 3.x, usted puede ser capaz de omitir la declare global parte en las otras respuestas y en lugar de sólo usar:

interface Window {
  someValue: string
  another: boolean
}

Este trabajó conmigo cuando se utiliza el Manuscrito 3.3, WebPack y TSLint.

Answer 14

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

window["newProperty"] = customObj;

Idealmente, la variable global escenario debe ser evitado.Yo lo uso a veces para depurar un objeto en el navegador de la consola.

Answer 15

Para referencia (esta es la respuesta correcta):

En el interior de un .d.ts archivo de definición de

type MyGlobalFunctionType = (name: string) => void

Si usted trabaja en el navegador, agregar miembros a la ventana del navegador contexto de la reapertura de la Ventana de la interfaz:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Misma idea para NodeJS:

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

Ahora se declara la raíz de la variable (que en realidad vive en ventana o global)

declare const myGlobalFunction: MyGlobalFunctionType;

A continuación, en un regular .ts archivo, pero importados como efecto secundario, en realidad ponerlo en práctica:

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

Y por último usar en otras partes de la base de código, ya sea con:

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

myGlobalFunction("Kevin");

Answer 16

Hacer una interfaz personalizada amplía la Ventana y agregar su propiedad personalizada como opcional.

Luego, deje que los customWindow que el uso de la interfaz personalizada, pero valoran con el original de la ventana.

Se ha trabajado con los typescript@3.1.3.

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Answer 17

Para aquellos que quieren establecer un calculada o dinámica de la propiedad en el window objeto, usted encontrará que no es posible con el declare global método.Para aclarar de este caso de uso

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

Usted podría intentar hacer algo como esto

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

Lo anterior error, aunque.Esto es debido a que en el Manuscrito, las interfaces no jugar bien con la calculada propiedades y va a tirar un error como

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

Para evitar esto, usted puede ir con el sugerir de fundición window a <any> así que usted puede hacer

(window as any)[DynamicObject.key]

Answer 18

Yo quería usar esto en un Angular (6) de la biblioteca de hoy y me tomó un tiempo para conseguir que esto funcione como se espera.

En fin para mi biblioteca para el uso de declaraciones, tuve que usar el d.ts extensión para el archivo que declara que las nuevas propiedades del objeto global.

Así que al final, el archivo terminado con algo como:

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

Una vez creado, no te olvides de exponer en su public_api.ts.

Que hizo por mí.Espero que esto ayude.

Answer 19

En primer lugar usted necesita para declarar el objeto de ventana en el ámbito actual.
Porque manuscrito gustaría saber el tipo de objeto.
Desde la ventana de un objeto se define en alguna parte usted no puede definirla.
Pero usted puede declarar es el siguiente:-

declare var window: any;

Esto no va a redefinir el objeto de la ventana o no va a crear otra variable con nombre window.
Esto significa que la ventana se define en otro lugar y son sólo hace referencia a él en el ámbito actual.

A continuación, puede consultar su MyNamespace objeto simplemente:-

window.MyNamespace

O puede establecer la nueva propiedad en window objeto simplemente:-

window.MyNamespace = MyObject

Y ahora el manuscrito no se quejan.