Globale Variable in TypeScript
- Erstellen Sie ein neues Projekt in TypeScript
- Was ist ein globales Objekt?
- Deklarieren Sie globale Variablen in TypeScript
- Greifen Sie in TypeScript auf globale Variablen zu
- 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.
David is a back end developer with a major in computer science. He loves to solve problems using technology, learning new things, and making new friends. David is currently a technical writer who enjoys making hard concepts easier for other developers to understand and his work has been published on multiple sites.
LinkedIn GitHub