Globale Variable in TypeScript

1. Erstellen Sie ein neues Projekt in TypeScript
2. Was ist ein globales Objekt?
3. Deklarieren Sie globale Variablen in TypeScript
4. Greifen Sie in TypeScript auf globale Variablen zu
5. Abschluss

Die TypeScript-Dokumentation definiert eine globale Bibliothek als Module, auf die über den globalen Geltungsbereich zugegriffen wird, und wir wissen normalerweise, dass wir den globalen Geltungsbereich verwenden, wenn wir nicht das Schlüsselwort import verwenden, um auf ihre Mitglieder zuzugreifen.

Die globalen Bibliotheken enthalten globale Variablen, Schnittstellen, namespaces und andere Deklarationen, auf die andere Module in der Anwendung zugreifen können. In diesem Tutorial lernen wir, wie man globale Variablen in TypeScript erstellt und von anderen Dateien aus darauf zugreift.

Erstellen Sie ein neues Projekt in TypeScript

Öffnen Sie WebStorm IDEA und wählen Sie Datei > Neu > Projekt. Wählen Sie im sich öffnenden Fenster auf der linken Seite Node.js und ändern Sie den Projektnamen im Abschnitt Location von untitled in global-scope oder verwenden Sie einen beliebigen Namen.

Stellen Sie sicher, dass die Laufzeitumgebung node installiert ist, bevor Sie dieses Projekt erstellen, um sicherzustellen, dass die Abschnitte Node interpreter und Package manager automatisch aus dem Dateisystem hinzugefügt werden.

Drücken Sie abschließend die Schaltfläche Erstellen, um das Projekt zu generieren. Nachdem das Projekt generiert wurde, öffnen Sie mit der Tastenkombination Alt+F12 ein neues Terminalfenster und erstellen mit folgendem Befehl eine tsconfig.json-Datei.

~/WebstormProjects/global-scope$ tsc --init

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

Die meisten Konfigurationen in dieser Datei werden automatisch generiert, und wir haben die Eigenschaft noEmitOnError: true hinzugefügt, um sicherzustellen, dass die JavaScript-Dateien nicht generiert werden, wenn ein Transpile-Fehler auftritt.

Was ist ein globales Objekt?

Bevor wir globale Variablen erstellen, müssen wir verstehen, was ein globales Objekt ist, da es in diesem Zusammenhang eine Schlüsselrolle spielt. Wenn in einer JavaScript-Umgebung globale Variablen mit dem Schlüsselwort var erstellt werden, werden sie dem globalen Objekt hinzugefügt.

In einer Node.js-Umgebung werden die Variablen je nach Ausführungskontext zum globalen Objekt hinzugefügt. Zu den verschiedenen verfügbaren Ausführungskontexten gehören der Browser, der Code wird in einem Worker ausgeführt oder der Code wird von Node.js ausgeführt.

Das Objekt für jeden dieser Kontexte umfasst Window, Worker und global.

Um auf das globale Objekt zuzugreifen, ohne den Ausführungskontext zu berücksichtigen, verwenden wir eine Eigenschaft namens globalThis. Die Eigenschaft globalThis hilft uns beim Zugriff auf die Eigenschaften, die dem globalen Geltungsbereich hinzugefügt wurden.

Beachten Sie, dass alle mit let oder const deklarierten Variablen nicht zum globalen Gültigkeitsbereich hinzugefügt werden und alle mit dem Schlüsselwort var deklarierten Variablen zum globalen Gültigkeitsbereich hinzugefügt werden.

Deklarieren Sie globale Variablen in TypeScript

Erstellen Sie eine Datei namens module.d.ts unter dem Paket global-scope und kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

declare var userName: string

declare var age: number

Wenn wir ein Modul für die globalen Variablen erstellen möchten, müssen wir dies in einer Datei mit der Erweiterung .d.ts tun, wie wir es in diesem Beispiel getan haben.

In diesem Code haben wir zwei globale Variablen namens userName und age erstellt. Beachten Sie, dass wir den Variablendeklarationen das Schlüsselwort declare vorangestellt haben.

Wir müssen sicherstellen, dass den auf der obersten Ebene deklarierten globalen Variablen das Schlüsselwort declare vorangestellt wird, da dies eine Konvention für alle in dieser Datei deklarierten Variablen ist.

Greifen Sie in TypeScript auf globale Variablen zu

Erstellen Sie eine Datei namens main.ts unter dem Paket global-scope und kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

globalThis.userName = "john doe"
globalThis.age = 34

function main(){
    console.log(userName);
    console.log(age);
}
main();

In diesem Code haben wir die Eigenschaft globalThis verwendet, um auf die globalen Variablen userName und age aus dem globalen Objekt zuzugreifen, und jede globale Variable mit Werten für ihren Typ initialisiert.

Die Funktion main() protokolliert die Werte für jede globale Variable in der Konsole. Führen Sie diesen Code mit dem folgenden Befehl aus, um zu überprüfen, ob unser Code wie erwartet funktioniert.

~/WebstormProjects/global-scope$ tsc && node main.js

Der Befehl tsc transpiliert den TypeScript-Code in JavaScript-Code, und der Befehl node führt die Datei namens main.js aus. Stellen Sie sicher, dass die Ausgabe wie unten gezeigt ist.

john doe
34

Abschluss

In diesem Tutorial haben wir gelernt, wie man globale Variablen in TypeScript erstellt. Die in diesem Lernprogramm behandelten Themen umfassen, was ein globales Objekt ist, wie globale Variablen deklariert werden und wie auf globale Variablen zugegriffen wird.

Beachten Sie, dass in der .d.ts-Datei nicht nur Variablen deklariert werden können. Wir können Schnittstelle, Klasse, Funktion und andere deklarieren.

Wenn wir alle diese Details in einer Variablen enthalten möchten, können wir einen namespace verwenden, der auch wie erwartet funktioniert.