Como você define explicitamente uma nova propriedade em `window` no TypeScript?

Eu configuro namespaces globais para meus objetos definindo explicitamente uma propriedade window.

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

O TypeScript sublinha MyNamespacee reclama que:

A propriedade 'MyNamespace' não existe no valor do tipo 'window' any "

Posso fazer o código funcionar declarando MyNamespacecomo uma variável de ambiente e eliminando a windowexplicitação, mas não quero fazer isso.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Como posso ficar windowlá e fazer o TypeScript feliz?

Como observação lateral, acho especialmente engraçado que o TypeScript se queixe, pois me diz que windowé do tipo anyque definitivamente pode conter qualquer coisa.

Acabei de encontrar a resposta para isso na resposta de outra pergunta do StackOverflow .

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

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

Basicamente, você precisa estender a windowinterface existente para informar sobre sua nova propriedade.

Para mantê-lo dinâmico, basta usar:

(<any>window).MyNamespace

A PARTIR DO TIPESCRIÇÃO ^ 3.4.3 ESTA SOLUÇÃO NÃO FUNCIONA MAIS

Ou...

você pode apenas digitar:

window['MyNamespace']

e você não receberá um erro de compilação e funciona da mesma maneira que digitar window.MyNamespace

Usando TSX? Nenhuma das outras respostas estava funcionando para mim.

Aqui está o que eu fiz:

(window as any).MyNamespace

A resposta aceita é o que eu costumava usar, mas com o TypeScript 0.9. * Ele não funciona mais. A nova definição da Windowinterface parece substituir completamente a definição interna, em vez de aumentá-la.

Eu comecei a fazer isso:

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

declare var window: MyWindow;

ATUALIZAÇÃO: Com o TypeScript 0.9.5, a resposta aceita está funcionando novamente.

Global são "maus" :), acho que a melhor maneira de ter também a portabilidade é:

Primeiro você exporta a interface: (por exemplo: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

Segundo você importa

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

Terceira janela de var global convertida com CustomWindow

declare let window: CustomWindow;

Dessa forma, você também não tem linha vermelha no IDE diferente se usar com atributos existentes do objeto window, portanto, no final, tente:

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

Testado com o Typecript 2.4.xe mais recente!

Se você precisar estender o windowobjeto com um tipo personalizado que exija o uso, importuse o seguinte método:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

Consulte 'Ampliação global' na seção 'Mesclagem de declaração' do Manual: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Para aqueles que usam a CLI Angular , é simples:

src / polyfills.ts

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

my-custom-utils.ts

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

Se você estiver usando o IntelliJ, também precisará alterar a seguinte configuração no IDE antes de seus novos polyfills:

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

Não preciso fazer isso com muita frequência, o único caso que tive foi ao usar o Redux Devtools com middleware.

Eu simplesmente fiz:

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

Ou você pode fazer:

let myWindow = window as any;

e depois myWindow.myProp = 'my value';

A maioria das outras respostas não é perfeita.

• Alguns deles apenas suprimem a inferência de tipo para a loja.
• Alguns dos outros se preocupam apenas com a variável global como espaço para nome, mas não como interface / classe

Eu também encontro o mesmo problema esta manhã. Eu tentei tantas "soluções" no SO, mas nenhuma delas produz nenhum erro de tipo absolutamente e habilita o disparo de tipo de salto no IDE (webstorm ou vscode).

Finalmente, daqui

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

, Acho uma solução razoável para anexar digitações para a variável global que atua como interface / classe e espaço para nome .

O exemplo está abaixo:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Agora, o código acima mescla as tipagens do namespace MyNamespacee da interface MyNamespacena variável global myNamespace(a propriedade da janela).

Depois de encontrar respostas, acho que esta página pode ser útil. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation Não tenho certeza sobre o histórico de mesclagem de declarações, mas explica por que o seguinte poderia funcionar.

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

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

Veja como fazer isso, se você estiver usando o TypeScript Definition Manager !

npm install typings --global

Criar typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Instale sua digitação personalizada:

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

Feito, use‌ ! Texto datilografado não vai mais reclamar:

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

O Typscript não executa verificação de tipo nas propriedades da string.

window["newProperty"] = customObj;

Idealmente, o cenário variável global deve ser evitado. Às vezes, uso-o para depurar um objeto no console do navegador.

Crie um arquivo chamado, global.d.tspor exemplo /src/@types/global.d.ts, defina uma interface como:

interface Window {
  myLib: any
}

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

Se você estiver usando o Typecript 3.x, poderá omitir a declare globalparte das outras respostas e, em vez disso, basta usar:

interface Window {
  someValue: string
  another: boolean
}

Isso funcionou comigo ao usar o Typecript 3.3, WebPack e TSLint.

Para referência (esta é a resposta correta):

Dentro de um .d.tsarquivo de definição

type MyGlobalFunctionType = (name: string) => void

Se você trabalha no navegador, adiciona membros ao contexto da janela do navegador reabrindo a interface do Windows:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Mesma idéia para o NodeJS:

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

Agora você declara a variável raiz (que realmente ficará na janela ou global)

declare const myGlobalFunction: MyGlobalFunctionType;

Em seguida, em um .tsarquivo regular , mas importado como efeito colateral, você realmente o implementa:

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

E, finalmente, use-o em outro lugar na base de código, com:

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

myGlobalFunction("Kevin");

Faça uma interface personalizada estender a Janela e adicione sua propriedade personalizada como opcional.

Em seguida, deixe o CustomWindow que usa a interface personalizada, mas avaliado com a janela original.

Trabalhou com o [email protected].

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Para aqueles que desejam definir uma propriedade computada ou dinâmica no windowobjeto, você verá que isso não é possível com o declare globalmétodo. Para esclarecer esse caso de uso

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

Você pode tentar fazer algo assim

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

O erro acima irá embora. Isso ocorre porque no Typescript, as interfaces não funcionam bem com as propriedades computadas e geram um erro como

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

Para contornar isso, você pode sugerir a transmissão windowpara <any>que você possa fazer

(window as any)[DynamicObject.key]

Usando create-react-app v3.3, encontrei a maneira mais fácil de conseguir isso: estender o Windowtipo no arquivo gerado automaticamente react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

Primeiro, você precisa declarar o objeto da janela no escopo atual.
Porque o texto datilografado gostaria de saber o tipo do objeto.
Como o objeto window está definido em outro lugar, você não pode redefini-lo.
Mas você pode declarar da seguinte forma: -

declare var window: any;

Isso não redefinirá o objeto da janela ou não criará outra variável com o nome window.
Isso significa que a janela está definida em outro lugar e você está apenas referenciando-a no escopo atual.

Em seguida, você pode se referir ao seu objeto MyNamespace simplesmente:

window.MyNamespace

Ou você pode definir a nova propriedade no windowobjeto simplesmente por: -

window.MyNamespace = MyObject

E agora o texto datilografado não vai reclamar.

Eu queria usar isso em uma biblioteca Angular (6) hoje e demorei um pouco para que isso funcionasse conforme o esperado.

Para que minha biblioteca use declarações, tive que usar a d.tsextensão do arquivo que declara as novas propriedades do objeto global.

Então, no final, o arquivo acabou com algo como:

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

Uma vez criado, não esqueça de expô-lo no seu public_api.ts.

Isso fez por mim. Espero que isto ajude.