Erstellen Sie eine globale Variable in TypeScript

In JavaScript kann ich das einfach so machen:

 something = 'testing';

Und dann in einer anderen Datei:

 if (something === 'testing')

und es wird somethingdefiniert worden sein (solange sie in der richtigen Reihenfolge aufgerufen wurden).

Ich kann anscheinend nicht herausfinden, wie das in TypeScript geht.

Das habe ich versucht.

In einer .d.ts-Datei:

interface Window { something: string; }

Dann in meiner main.ts-Datei:

 window.something = 'testing';

dann in einer anderen Datei:

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

Und das funktioniert. Aber ich möchte in der Lage sein, den window.Teil davon zu verlieren und einfach somethingglobal zu sein. Gibt es eine Möglichkeit, dies in TypeScript zu tun?

(Falls jemand interessiert ist, versuche ich wirklich, meine Protokollierung für meine Anwendung einzurichten. Ich möchte log.Debugaus jeder Datei aufrufen können, ohne Objekte importieren und erstellen zu müssen.)

Okay, das ist wahrscheinlich noch hässlicher als das, was du getan hast, aber trotzdem ...

^{aber ich mache das gleiche so ...}

Um dies in reinem TypeScript zu tun, können Sie die folgende evalFunktion verwenden:

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

Und später können Sie es tun

if (something === 'testing')

Dies ist nichts weiter als ein Hack, um die Ausführung der Anweisung zu erzwingen, ohne dass TypeScript die Kompilierung verweigert, und wir declare varfür TypeScript, um den Rest des Codes zu kompilieren.

In einer .d.tsDefinitionsdatei

type MyGlobalFunctionType = (name: string) => void

Wenn Sie im Browser arbeiten, fügen Sie dem Fensterkontext des Browsers Mitglieder hinzu:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Gleiche Idee für NodeJS:

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

Jetzt deklarieren Sie die Stammvariable (die tatsächlich im Fenster oder global lebt).

declare const myGlobalFunction: MyGlobalFunctionType;

Dann .tsimplementieren Sie es in einer regulären Datei, die jedoch als Nebeneffekt importiert wurde:

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

Und schließlich verwenden Sie es an anderer Stelle in der Codebasis, entweder mit:

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

myGlobalFunction("Kevin");

globalThis ist die Zukunft.

Erstens gibt es bei TypeScript-Dateien zwei Arten von scopes

globaler Geltungsbereich

Wenn Ihre Datei keine importoder keine exportZeile enthält , wird diese Datei im globalen Bereich ausgeführt sodass alle darin enthaltenen Deklarationen außerhalb dieser Datei sichtbar sind.

Wir würden also globale Variablen wie folgt erstellen:

// xx.d.ts
declare var age: number

// or 
// xx.ts
// with or without declare keyword
var age: number

// other.ts
globalThis.age = 18 // no error

Alle Magie kommt von var. Ersetzen vardurch letoder constfunktioniert nicht.

Modulumfang

Wenn Ihre Datei eine importoder eine exportZeile enthält , wird diese Datei in ihrem eigenen Bereich ausgeführt, den wir durch Zusammenführen von Deklarationen global erweitern müssen .

// xx[.d].ts
declare global {
  var age: number;
}

// other.ts
globalThis.age = 18 // no error

Weitere Informationen zum Modul finden Sie in den offiziellen Dokumenten

So habe ich es behoben:

Schritte:

1. Deklarierte einen globalen Namespace, z. B. custom.d.ts wie folgt:

declare global {
    namespace NodeJS {
        interface Global {
            Config: {}
        }
    }
}
export default global;

2. Ordnen Sie die oben erstellte Datei wie folgt in "tsconfig.json" zu:

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

3. Rufen Sie die oben erstellte globale Variable in einer der folgenden Dateien ab:

console.log(global.config)

Hinweis:

1. Typoskript-Version: "3.0.1".

2. In meinem Fall bestand die Anforderung darin, die globale Variable festzulegen, bevor die Anwendung gestartet wird, und die Variable sollte auf alle abhängigen Objekte zugreifen, damit wir die erforderlichen Konfigurationseigenschaften erhalten können.

Hoffe das hilft!

Danke dir

Ich habe einen Weg gefunden, der funktioniert, wenn ich JavaScript in Kombination mit TypeScript verwende.

logging.d.ts:

declare var log: log4javascript.Logger;

Protokolldeklaration. js :

log = null;

initalize-app.ts

import './log-declaration.js';

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

Dies versetzt es in den globalen Bereich und TypeScript weiß davon. So kann ich es in allen meinen Dateien verwenden.

HINWEIS: Ich denke, dies funktioniert nur, weil ich die allowJsTypeScript-Option auf true gesetzt habe.

Wenn jemand eine reine TypeScript-Lösung veröffentlicht, werde ich das akzeptieren.

Ich benutze nur das

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

Ich habe ein paar Stunden damit verbracht, herauszufinden, wie ich es richtig machen kann. In meinem Fall versuche ich, eine globale "Protokoll" -Variable zu definieren, also waren die Schritte:

1) Konfigurieren Sie Ihre tsconfig.json, um Ihre definierten Typen src/typeseinzuschließen ( Ordner, Knotenmodule - liegt bei Ihnen):

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

2) Erstellen Sie eine Datei src/types/global.d.tsmit folgendem Inhalt ( keine Importe! - das ist wichtig). Sie können sie jederzeit anyan Ihre Bedürfnisse anpassen und die windowBenutzeroberfläche verwenden, anstatt NodeJSmit dem Browser zu arbeiten:

/**
 * 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) Jetzt können Sie endlich verwenden / implementieren, logwo es benötigt wird:

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

Als Ergänzung zu Dima Vs Antwort habe ich dies getan, um diese Arbeit für mich zu machen.

// First declare the window global outside the class

declare let window: any;

// Inside the required class method

let globVarName = window.globVarName;

Ich musste lodash global machen, um eine vorhandene .js-Datei zu verwenden, die ich nicht ändern konnte, sondern nur benötigte.

Ich fand, dass dies funktionierte:

import * as lodash from 'lodash';

(global as any)._ = lodash;

Dies funktioniert für mich, wie in diesem Thread beschrieben :

declare let something: string;
something = 'foo';