web-dev-qa-db-fra.com

Créer une variable globale dans TypeScript

En JavaScript, je peux simplement faire ceci:

 something = 'testing';

Et puis dans un autre fichier:

 if (something === 'testing')

et il aura something être défini (tant qu'ils ont été appelés dans le bon ordre).

Je n'arrive pas à comprendre comment faire cela avec TypeScript.

C'est ce que j'ai essayé.

Dans un fichier .d.ts:

interface Window { something: string; }

Puis dans mon fichier main.ts:

 window.something = 'testing';

puis dans un autre fichier:

 if (window.something  === 'testing')

Et cela fonctionne. Mais je veux pouvoir perdre la partie window. et simplement que ma something soit globale. Existe-t-il un moyen de le faire dans TypeScript?

(Si quelqu'un est intéressé, j'essaie vraiment de configurer la journalisation de mon application. Je veux pouvoir appeler log.Debug à partir de n'importe quel fichier sans avoir à importer et créer des objets.)

typescript
56
Vaccano

D'accord, c'est probablement encore plus laid que ce que vous avez fait, mais de toute façon ...

mais je fais la même chose alors ...

Ce que vous pouvez faire pour le faire en TypeScript pur, est d’utiliser la fonction eval comme ceci:

declare var something: string;
eval("something = 'testing';")

Et plus tard tu pourras faire

if (something === 'testing')

Ce n’est rien de plus qu’un hack pour forcer l’exécution de l’instruction sans que TypeScript refuse de compiler, et nous declare var pour que TypeScript compile le reste du code.

10
tforgione

À l'intérieur d'un fichier de définition .d.ts

type MyGlobalFunctionType = (name: string) => void

Si vous travaillez dans le navigateur, vous ajoutez des membres au contexte de la fenêtre du navigateur:

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 réellement sur window ou global)

declare const myGlobalFunction: MyGlobalFunctionType;

Ensuite, dans un fichier .ts normal, mais importé comme effet secondaire, vous l'implémentez:

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

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

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

myGlobalFunction("Kevin");
48
Benoit B.

J'ai trouvé un moyen qui fonctionne si j'utilise JavaScript en combinaison avec TypeScript.

logging.d.ts:

declare var log: log4javascript.Logger;

log-declaration .js:

log = null;

initalize-app.ts

import './log-declaration.js';

// Call stuff to actually setup log.  
// Similar to this:
log = functionToSetupLog();

Cela le place dans la portée globale et TypeScript le sait. Je peux donc l'utiliser dans tous mes fichiers.

REMARQUE: cela ne fonctionne que parce que l'option allowJs TypeScript est définie sur true.

Si quelqu'un publie une solution purement TypeScript, je l'accepterai.

13
Vaccano

je n'utilise que cela

import {globalVar} from "./globals";
declare let window:any;
window.globalVar = globalVar;
6
Dima V

globalThis est l'avenir.

// Way 1
var abc: number
globalThis.abc = 200 // no error

// Way2
declare var age: number
globalThis.age = 18 // no error

REMARQUE: le fichier contenant les codes ci-dessus ne peut contenir aucune instruction import.

Jusqu'à présent, ce sont des façons dont j'ai imaginé étendre l'objet global.

Toute la magie vient de var. Remplacez var par let ou const ne fonctionnera pas.

J'ai essayé d'étendre le module globalThis de déclaration-fusion mais j'ai échoué.

2
edvard chen

Voici comment je l'ai corrigé:

Étapes:

  1. Déclaré un espace de noms global, par exemple custom.d.ts comme ci-dessous:

    declare global {namespace NodeJS {interface Global {Config: {}}}} export global par défaut;

  2. Mappez ce qui précède a créé un fichier dans "tsconfig.json" comme ci-dessous:

    "typeRoots": ["src/types/custom.d.ts"]

  3. Obtenez la variable globale créée ci-dessus dans l'un des fichiers comme ci-dessous:

    console.log (global.config)

Note:

  1. Version TypeScript: "3.0.1".

  2. Dans mon cas, l'exigence était de définir la variable globale avant de démarrer l'application et la variable devait accéder à tous les objets dépendants afin que nous puissions obtenir les propriétés de configuration requises.

J'espère que cela t'aides!

Je vous remercie

1
Vikash Kumar Choudhary

J'ai passé quelques heures à trouver le bon moyen de le faire. Dans mon cas, j'essaye de définir la variable "log" globale, donc les étapes étaient les suivantes:

1) Configurez votre tsconfig.json pour inclure vos types définis (le dossier src/types, node_modules - appartient à vous):

...other stuff...
"paths": {
  "*": ["node_modules/*", "src/types/*"]
}

2) créer le fichier src/types/global.d.ts avec le contenu suivant (pas d’importations! - c’est important), n'hésitez pas à modifier any selon vos besoins + utilisez window interface au lieu de NodeJS si vous utilisez un navigateur:

/**
 * IMPORTANT - do not use imports in this file!
 * It will break global definition.
 */
declare namespace NodeJS {
    export interface Global {
        log: any;
    }
}

declare var log: any;

3) maintenant vous pouvez enfin utiliser/mettre en œuvre log où il est nécessaire:

// in one file
global.log = someCoolLogger();
// in another file
log.info('hello world');
// or if its a variable
global.log = 'INFO'
0
Alexey