So verwenden Sie TypeScript mit Ihrem Node.js-Projekt

TypeScript ist praktisch, um komplexe Apps und robuste Architekturen wie Microservices zu erstellen. Natürlich kann TypeScript nichts, was JavaScript nicht kann, aber es kann komplexe Projekte überschaubarer machen. TypeScripts strenge Typisierung und Unterstützung für Schnittstellen bedeuten, dass es sich hervorragend für die objektorientierte Programmierung eignet. Wir haben viele Unternehmen gesehen, die sich für die Codierung ihres Backends an TypeScript gewandt haben.

Es gibt keinen besseren Zeitpunkt, um mit der Verwendung von TypeScript in Ihrem Node.js-Projekt zu beginnen, als jetzt. Aber wie können Sie es für Ihr Node.js-Projekt einrichten? Das erfährst du in diesem Artikel.

Was ist TypeScript?

TypeScript ist eine kompilierte, streng typisierte Version von JavaScript, die von Microsoft entwickelt und gepflegt wird. TypeScript-Code transpiliert in JavaScript.

Die strikte Typisierung von TypeScript hilft Entwicklern, Fehler in ihrem Code zu vermeiden. Es wird nur Code kompiliert, der die Regeln seiner angegebenen Datentypen erfüllt. Dadurch wird TypeScript-Code robuster als sein reines JavaScript-Pendant.

Es unterstützt auch sowohl funktionale als auch objektorientierte Programmierung. All diese Funktionen machen es hochskalierbar und für die Entwicklung komplexer Apps geeignet.

So richten Sie TypeScript in Node ein. JS

Sie müssen hier und da ein paar Konfigurationen vornehmen, um TypeScript mit Ihrem Node.js-Projekt verwenden zu können. Aber keine Sorge, es ist einfach.

Stellen Sie jedoch sicher, dass Sie Installieren Sie das Node.js-npm-Paket bevor Sie fortfahren.

Initialisieren Sie eine package.json-Datei

Öffnen Sie Ihr Terminal und erstellen Sie einen Projektordner. Geben Sie dann dieses neue Verzeichnis ein und initialisieren Sie ein Node.js-Projekt:

npm-Init

Der obige Befehl erstellt eine Paket.json Datei zum Speichern Ihrer Abhängigkeiten.

Installieren Sie TypeScript und andere Abhängigkeiten

Fahren Sie als Nächstes fort und installieren Sie TypeScript in Ihrem Node.js-Projekt:

npm i -D Typoskript

Das -D Das Schlüsselwort stellt sicher, dass TypeScript als Teil von installiert wird devAbhängigkeiten in Paket.json.

Sie müssen auch installieren @types/express, eine TypeScript-Definition für Express.js:

npm install -D @Typen/express

Als nächstes initialisieren Sie a tsconfig.json Datei. Hier werden die grundlegenden Compiler-Optionen für Ihr Projekt beschrieben:

npx tsc --drin

Der obige Befehl erstellt eine tsconfig.json Datei in Ihrem Projektstammordner.

Installieren Sie außerdem Express.js. Sie können dies überspringen, wenn Sie nur Server mit den integrierten HTTP-Primitiven von Node.js verwalten möchten. Aber Express.js macht das einfach:

npm Installieren ausdrücken

Als nächstes installieren Knotenmon, ein Paket, das Ihren Server automatisch neu startet, wenn Änderungen an Ihrem Code vorgenommen werden. Stellen Sie sicher, dass Sie dies global installieren, damit es funktioniert:

npm Installieren -g nodemon

Konfigurieren Sie TypeScript mit Node. JS

Öffne das tsconfig.json Datei, die Sie zuvor mit Ihrer initialisiert haben ausgewählten Code-Editor. In dieser Datei kann viel sein. Während Sie diese Datei möglicherweise in ihrer aktuellen Form konfigurieren, können Sie ihren gesamten Inhalt durch den folgenden ersetzen, um es einfacher zu machen.

Hier ist alles, was Sie brauchen tsconfig.json in Gang zu bringen:

{
"CompilerOptionen": {
"Modul": "commonjs",
"esModuleInterop": wahr,
"Ziel": "es6",
"ModulAuflösung": "Knoten",
"QuelleKarte": wahr,
"outDir": "Abstand" //Gibt das Transpiler-Verzeichnis an. 
 },
"lib": ["es2015"]
}

Jetzt offen Paket.json. So sieht es derzeit nach der Installation von TypeScript und Express aus:

Fügen Sie als Nächstes die folgenden Konfigurationen zu der hinzu Skripte Array:

"Skripte": {
"Prüfung": "echo \"Fehler: kein Test angegeben\"&& Ausgang 1",
"bauen": "npx tsc",
"Anfang": "Knoten ./dist/app.js",
"Abstand": "tsc-p .",
 "dev": "nodemon ./src/app.ts", //Ersetzen diese mit die richtige VerzeichnisWegzum app.ts in dein Fall
"Typ": "Modul"
}

Die obige Konfiguration weist darauf hin, dass Ihr Server gestartet werden soll app.js, der Transpiler. Keine Sorge, dies ist eine Standarddatei, die automatisch in a erstellt wird Abstand Ordner, wenn Sie die ausführen bauen Skript. Sie werden dies später auf der ganzen Linie tun.

Die Konfiguration gibt dann das primäre Entwicklungsskript als an app.ts.

Wenn Sie also die Entwicklungsumgebung starten, Knotenmon läuft app.ts. Node.js kompiliert dies dann in JavaScript app.js—die mit dem HTTP-Server kommuniziert.

Als nächstes erstellen Sie eine Quelle Ordner in Ihrem Projektstammverzeichnis. Erstellen Sie in diesem Ordner eine leere TypeScript-Datei und benennen Sie sie app.ts.

Erstellen Sie das Transpiler-Verzeichnis

Der Transpiler ist eine JavaScript-Datei, die TypeScript-Code in natives JavaScript kompiliert. Dadurch wird sichergestellt, dass der Server Ihren Code als JavaScript anstelle des streng typisierten Skripts verarbeiten kann.

Während also TypeScript die Codestruktur verarbeitet, kompiliert die Transpiler-Datei sie in JavaScript.

Führen Sie nun die bauen Skript zum Erstellen der Abstand Transpiler-Verzeichnis automatisch:

npm-Run-Build

Der obige Befehl kompiliert Ihren TypeScript-Code in JavaScript. Der erstellte Ordner enthält zwei Dateien; app.js und app.js.map.

Offen Paket.json wieder. Sie sehen einen Schlüssel im Array namens hauptsächlich. Sie können sehen, dass sein Wert auf zeigt index.js. Ersetzen Sie diese durch die app.js (transpiler) Dateiverzeichnis:

"hauptsächlich": "./dist/app.js",

Nach dem Formatieren Paket.json sollte so aussehen:

Das war's für den Konfigurationsteil.

Erstellen Sie eine HTTP-Anfrage und führen Sie sie aus

Versuchen Sie nun, eine HTTP-Anforderung über den Express.js-Server zu erstellen und auszuführen, um zu sehen, ob Ihr Code ordnungsgemäß kompiliert wird.

Innerhalb app.ts:

importieren ausdrücken, {Anfrage, Antwort} aus 'ausdrücken'
konst app = ausdrücken()
app.get('/', async (req: Anfrage, res: Antwort)=>{
 Konsole.log ('Hallo Welt')
 res.send('Hallo Welt')
})
konst Hafen = 8080
app.listen (Port, (): Leere=>{
Konsole.Protokoll(„App hört zu http://localhost:${port}`)
})

Öffnen Sie als Nächstes die Befehlszeile für Ihr Projektstammverzeichnis und führen Sie die Entwickler Skript zum Starten Ihres Projekts:

npm laufen dev

Öffnen Sie Ihren Browser und gehen Sie zu lokaler Host: 8080, und Sie sehen die Antwort (Hallo Welt). Sie sehen dies auch im Terminal, wenn Sie die angewendet haben Konsole.log Befehl, wie wir es im obigen Beispiel getan haben.

TypeScript hat eine hohe Nachfrage

Es gibt kaum einen großen Unterschied zwischen TypeScript und JavaScript. Aber ersteres erleichtert die Entwicklung durch das Hinzufügen einer strengen Typisierung.

TypeScript ist eine wertvolle Sprache in Frontend-Frameworks wie Angular, und wir können ihre Leistung und Skalierbarkeit nicht leugnen. Es wird immer beliebter und die Jobaussichten für TypeScript-Entwickler steigen weiter.

Eine Einführung in Angular

Lesen Sie weiter

Über den Autor