Comment définissez-vous explicitement une nouvelle propriété sur `window` dans TypeScript?

J'ai configuré des espaces de noms globaux pour mes objets en définissant explicitement une propriété window.

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

TypeScript souligne MyNamespaceet se plaint que:

La propriété 'MyNamespace' n'existe pas sur la valeur de type 'window' any "

Je peux faire fonctionner le code en déclarant MyNamespacecomme variable ambiante et en supprimant l' windowexplicitness, mais je ne veux pas le faire.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Comment puis-je y rester windowet faire plaisir à TypeScript?

En remarque, je trouve particulièrement drôle que TypeScript se plaint car il me dit que windowc'est du type anyqui peut certainement contenir n'importe quoi.

Je viens de trouver la réponse à cela dans une autre réponse à une question StackOverflow .

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

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

Fondamentalement, vous devez étendre l' windowinterface existante pour lui parler de votre nouvelle propriété.

Pour le garder dynamique, utilisez simplement:

(<any>window).MyNamespace

À PARTIR DE TYPESCRIPT ^ 3.4.3 CETTE SOLUTION NE FONCTIONNE PLUS

Ou...

vous pouvez simplement taper:

window['MyNamespace']

et vous n'obtiendrez pas une erreur de compilation et cela fonctionne de la même manière que la frappe window.MyNamespace

Vous utilisez TSX? Aucune des autres réponses ne fonctionnait pour moi.

Voici ce que j'ai fait:

(window as any).MyNamespace

La réponse acceptée est ce que j'utilisais auparavant, mais avec TypeScript 0.9. * Cela ne fonctionne plus. La nouvelle définition de l' Windowinterface semble remplacer complètement la définition intégrée, au lieu de l'augmenter.

Je me suis mis à le faire à la place:

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

declare var window: MyWindow;

MISE À JOUR: Avec TypeScript 0.9.5, la réponse acceptée fonctionne à nouveau.

Global sont "mal" :), je pense que la meilleure façon d'avoir aussi la portabilité est:

Vous exportez d'abord l'interface: (par exemple: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

Deuxièmement, vous importez

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

Fenêtre var globale de troisième distribution avec CustomWindow

declare let window: CustomWindow;

De cette façon, vous n'avez pas de ligne rouge dans différents IDE si vous utilisez avec des attributs existants de l'objet fenêtre, donc à la fin, essayez:

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

Testé avec Typescript 2.4.x et plus récent!

Si vous devez étendre l' windowobjet avec un type personnalisé qui nécessite l'utilisation de importvous pouvez utiliser la méthode suivante:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

Voir «Augmentation globale» dans la section «Fusion de déclarations» du manuel: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Pour ceux qui utilisent la CLI angulaire, c'est simple:

src / polyfills.ts

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

my-custom-utils.ts

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

Si vous utilisez IntelliJ, vous devez également modifier le paramètre suivant dans l'EDI avant que vos nouveaux polyfills ne soient récupérés:

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

Je n'ai pas besoin de le faire très souvent, le seul cas que j'ai eu était lors de l'utilisation de Redux Devtools avec un middleware.

J'ai simplement fait:

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

Ou vous pourriez faire:

let myWindow = window as any;

et alors myWindow.myProp = 'my value';

La plupart des autres réponses ne sont pas parfaites.

• Certains d'entre eux suppriment simplement l'inférence de type pour shop.
• Certains des autres ne se soucient que de la variable globale en tant qu'espace de nom, mais pas en tant qu'interface / classe

Je rencontre également le même problème ce matin. J'ai essayé tant de "solutions" sur SO, mais aucune d'entre elles ne produit absolument aucune erreur de type et permet de déclencher un saut de type dans IDE (webstorm ou vscode).

Enfin, d'ici

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

, Je trouve une solution raisonnable pour attacher des typages pour une variable globale qui agit à la fois comme interface / classe et espace de noms .

L'exemple est ci-dessous:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Maintenant, le code ci-dessus fusionne les typages de l'espace de noms MyNamespaceet de l'interface MyNamespacedans la variable globale myNamespace(la propriété de la fenêtre).

Après avoir trouvé des réponses, je pense que cette page pourrait être utile. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation Pas sûr de l'historique de la fusion des déclarations, mais cela explique pourquoi les éléments suivants pourraient fonctionner.

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

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

Voici comment procéder, si vous utilisez le gestionnaire de définition TypeScript !

npm install typings --global

Créer typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Installez votre saisie personnalisée:

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

Terminé, utilisez-le ! Le tapuscrit ne se plaindra plus

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

Typscript n'effectue pas de vérification de type sur les propriétés de chaîne.

window["newProperty"] = customObj;

Idéalement, le scénario de variable globale devrait être évité. Je l'utilise parfois pour déboguer un objet dans la console du navigateur.

Créez un fichier appelé global.d.tspar exemple /src/@types/global.d.tspuis définissez une interface comme:

interface Window {
  myLib: any
}

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

Si vous utilisez Typescript 3.x, vous pourrez peut-être omettre la declare globalpartie dans les autres réponses et simplement utiliser à la place:

interface Window {
  someValue: string
  another: boolean
}

Cela a fonctionné avec moi lors de l'utilisation de Typescript 3.3, WebPack et TSLint.

Pour référence (c'est la bonne réponse):

À l'intérieur d'un .d.tsfichier de définition

type MyGlobalFunctionType = (name: string) => void

Si vous travaillez dans le navigateur, vous ajoutez des membres au contexte de la fenêtre du navigateur en rouvrant l'interface de Window:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Même idée pour NodeJS:

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

Maintenant, vous déclarez la variable racine (qui vivra en fait sur une fenêtre ou globale)

declare const myGlobalFunction: MyGlobalFunctionType;

Ensuite, dans un .tsfichier normal , mais importé comme effet secondaire, vous l'implémentez réellement:

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

Et enfin, utilisez-le ailleurs dans la base de code, avec:

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

myGlobalFunction("Kevin");

Créer une interface personnalisée étend la fenêtre et ajoutez votre propriété personnalisée en option.

Ensuite, laissez le customWindow qui utilise l'interface personnalisée, mais évalué avec la fenêtre d'origine.

Cela a fonctionné avec le [email protected].

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Pour ceux qui souhaitent définir une propriété calculée ou dynamique sur l' windowobjet, vous constaterez que cela n'est pas possible avec la declare globalméthode. Pour clarifier ce cas d'utilisation

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

Vous pourriez essayer de faire quelque chose comme ça

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

Ce qui précède fera cependant une erreur. En effet, dans Typescript, les interfaces ne fonctionnent pas bien avec les propriétés calculées et génèrent une erreur comme

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

Pour contourner ce problème, vous pouvez aller avec le suggérer de jeter windowà de <any>sorte que vous pouvez faire

(window as any)[DynamicObject.key]

En utilisant create-react-app v3.3, j'ai trouvé que le moyen le plus simple d'y parvenir était d'étendre le Windowtype dans la génération automatique react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

Vous devez d'abord déclarer l'objet window dans la portée actuelle.
Parce que tapuscrit voudrait connaître le type de l'objet.
Puisque l'objet fenêtre est défini ailleurs, vous ne pouvez pas le redéfinir.
Mais vous pouvez le déclarer comme suit: -

declare var window: any;

Cela ne redéfinira pas l'objet fenêtre ou ne créera pas une autre variable avec le nom window.
Cela signifie que la fenêtre est définie ailleurs et que vous ne faites que la référencer dans la portée actuelle.

Ensuite, vous pouvez vous référer à votre objet MyNamespace simplement en: -

window.MyNamespace

Ou vous pouvez définir la nouvelle propriété sur l' windowobjet simplement en: -

window.MyNamespace = MyObject

Et maintenant le tapuscrit ne se plaindra pas.

Je voulais l'utiliser dans une bibliothèque Angular (6) aujourd'hui et il m'a fallu un certain temps pour que cela fonctionne comme prévu.

Pour que ma bibliothèque utilise des déclarations, j'ai dû utiliser l' d.tsextension pour le fichier qui déclare les nouvelles propriétés de l'objet global.

Donc à la fin, le fichier s'est retrouvé avec quelque chose comme:

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

Une fois créé, n'oubliez pas de l'exposer dans votre public_api.ts.

Ça l'a fait pour moi. J'espère que cela t'aides.