Geekflare wird von unserem Publikum unterstützt. Wir können Affiliate-Provisionen durch den Kauf von Links auf dieser Website verdienen.
Teilen:

So verwenden Sie TypeScript mit Node.js: Das dynamische Duo für Webentwickler

Anleitung zur Verwendung von TypeScript mit Node.js
Invicti Web Application Security Scanner – die einzige Lösung, die eine automatische Verifizierung von Schwachstellen mit Proof-Based Scanning™ bietet.

TypeScript bahnt sich seinen Weg als eine der beliebtesten Programmiersprachen für moderne Organisationen. 

Typoskript ist ein kompiliertes, streng typisiertes hochgestelltes JavaScript (das auf der JavaScript-Sprache aufbaut). Diese statisch typisierte Sprache, die von Microsoft entwickelt und gepflegt wird, unterstützt objektorientierte Konzepte wie ihre Untermenge JavaScript. 

Diese Open-Source-Programmiersprache hat viele Anwendungsfälle, z. B. das Erstellen von Web-, groß angelegten und mobilen Anwendungen. TypeScript kann für die Frontend- und Backend-Entwicklung verwendet werden. Es verfügt auch über verschiedene Frameworks und Bibliotheken, die die Entwicklung vereinfachen und seine Anwendungsfälle erweitern. 

Warum TypeScript mit Node.js verwenden? In diesem Artikel wird erläutert, warum TypeScript als „besser“ als JavaScript gilt, wie man es mit Node.js installiert, wie man ein kleines Programm mit TypeScript und Node.js konfiguriert und erstellt. 

TypeScript with Node.js: Benefits

  • Optionale statische Typisierung: JavaScript wird dynamisch typisiert, was bedeutet, dass der Datentyp einer Variablen zur Laufzeit und nicht während der Kompilierzeit bestimmt wird. Andererseits bietet TypeScript optional statische Typisierung, was bedeutet, dass eine Variable, sobald Sie sie deklariert haben, ihren Typ nicht ändert und nur bestimmte Werte annimmt. 
  • Vorhersagbarkeit: Beim Umgang mit TypeScript besteht die Gewissheit, dass alles, was Sie definieren, gleich bleibt. Wenn Sie beispielsweise eine bestimmte Variable als booleschen Wert deklarieren, kann sie sich unterwegs niemals in einen String ändern. Als Entwickler haben Sie die Gewissheit, dass Ihre Funktionen dieselben bleiben. 
  • Fehler frühzeitig erkennen: TypeScript erkennt die meisten Tippfehler frühzeitig, sodass die Wahrscheinlichkeit, dass sie in die Produktion übergehen, gering ist. Dies reduziert die Zeit, die Entwickler in späteren Phasen mit dem Testen von Code verbringen. 
  • Unterstützt von den meisten IDEs: TypeScript funktioniert mit den meisten integrierten Entwicklungsumgebungen (IDEs). Die meisten dieser IDEs bieten Codevervollständigung und Syntaxhervorhebung. Dieser Artikel wird verwendet Visual Studio-Code, ein weiteres Microsoft-Produkt. 
  • Einfach zu refaktorisierender Code: Sie können Ihre TypeScript-App aktualisieren oder umgestalten, ohne ihr Verhalten zu ändern. Das Vorhandensein von Navigationswerkzeugen und die IDE, die Ihren Code versteht, macht es einfach, die Codebasis mühelos umzugestalten. 
  • Verwendet vorhandene Pakete: Sie müssen nicht alles von Grund auf neu erstellen; Sie können vorhandene NPM-Pakete mit TypeScript verwenden. Diese Sprache hat auch eine starke Community, die Typdefinitionen für beliebte Pakete verwaltet und erstellt. 

How to use TypeScript with Node.js

Obwohl TypeScript diese Vorteile hat, können moderne Browser seinen Code nicht in einfacher Form lesen. Daher muss TypeScript-Code zuerst in JavaScript-Code transpiliert werden, um auf Browsern ausgeführt zu werden. Der resultierende Code hat die gleiche Funktionalität wie der ursprüngliche TypeScript-Code und zusätzliche Funktionalitäten, die in JavaScript nicht verfügbar sind. 

Voraussetzungen: 

  • Node.js: Node ist eine plattformübergreifende Laufzeitumgebung, die es ermöglicht, JavaScript-Code außerhalb einer Browserumgebung auszuführen. Mit diesem Befehl können Sie überprüfen, ob der Knoten auf Ihrem Computer installiert ist.

node -v

Ansonsten kannst du Laden Sie Node.js herunter von der offiziellen Website. Führen Sie den obigen Befehl nach der Installation erneut aus, um zu überprüfen, ob er richtig konfiguriert wurde. 

  • Ein Node Package Manager: Sie können NPM oder Garn verwenden. Ersteres wird standardmäßig installiert, wenn Sie Installieren Sie Node.js. In diesem Artikel verwenden wir NPM als Paketmanager. Verwenden Sie diesen Befehl, um die aktuelle Version zu überprüfen;

npm -v

TypeScript mit Node.js installieren

Schritt 1: Richten Sie einen Projektordner ein

Wir beginnen mit der Erstellung eines Projektordners für das TypeScript-Projekt. Sie können diesem Ordner einen beliebigen Namen geben. Sie können diese Befehle verwenden, um loszulegen;

mkdir typescript-node

cd typescript-node

Schritt 2: Initialisieren Sie das Projekt

Verwenden Sie npm, um Ihr Projekt mit diesem Befehl zu initialisieren;

npm init -y

Der obige Befehl erstellt eine package.json-Datei. Das Flag -y im Befehl weist npm an, Standardwerte einzuschließen. Die generierte Datei hat eine ähnliche Ausgabe. 

{

  "name": "typescript-node",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

TypeScript mit Node.js konfigurieren

Schritt 1: Installieren Sie den TypeScript-Compiler

Sie können jetzt den TypeScript-Compiler in Ihrem Projekt installieren. Führen Sie diesen Befehl aus;

npm install --save-dev typescript

Die Ausgabe auf Ihrer Befehlszeile wird in etwa so aussehen;

added 1 package, and audited 2 packages in 26s

found 0 vulnerabilities

Hinweis: Der obige Ansatz installiert TypeScript lokal in dem Projektordner, an dem Sie arbeiten. Sie können TypeScript global auf Ihrem System installieren, sodass Sie es nicht jedes Mal installieren müssen, wenn Sie an einem Projekt arbeiten. Verwenden Sie diesen Befehl, um TypeScript global zu installieren;

npm install -g typescript

Mit diesem Befehl können Sie überprüfen, ob TypeScript installiert wurde;

tsc -v

Schritt 2: Fügen Sie Ambient Node.js-Typen für TypeScript hinzu

TypeScript hat verschiedene Typen, wie z Implicit, Explicit und Ambient. Umgebungstypen werden immer zum globalen Ausführungsbereich hinzugefügt. Verwenden Sie diesen Befehl, um Umgebungstypen hinzuzufügen;

npm install @types/node --save-dev

Schritt 3: Erstellen Sie eine tsconfig.json Datei

Dies ist die Konfigurationsdatei, die alle TypeScript-Kompilierungsoptionen angibt. Führen Sie diesen Befehl aus, der mit mehreren definierten Kompilierungsoptionen geliefert wird. 

npx tsc --init --rootDir src --outDir build \

--esModuleInterop --resolveJsonModule --lib es6 \

--module commonjs --allowJs true --noImplicitAny true

Diese wird auf dem Terminal ausgegeben;

Bild-237

Das tsconfig.json Datei, die einige Standardwerte und Kommentare enthält, wird generiert.

Bild-238
tsconfig.json Datei

Folgendes haben wir konfiguriert:

  • Das rootDir Hier sucht TypeScript nach unserem Code. Wir haben es gerichtet /src Ordner, in den wir unseren Code schreiben werden. 
  • Das outDir Ordner definiert, wo der kompilierte Code abgelegt wird. Dieser Code ist so konfiguriert, dass er gespeichert werden kann build/ Ordner.

Verwenden von TypeScript mit Node.js

Schritt 1: Erstellen src Ordner und index.ts-Datei

Jetzt haben wir die Grundkonfiguration. Wir können jetzt eine einfache TypeScript-App erstellen und kompilieren. Die Dateierweiterung für eine TypeScript-Datei ist .ts. Führen Sie diese Befehle aus, während Sie sich in dem Ordner befinden, den wir in den vorherigen Schritten erstellt haben.

mkdir src

touch src/index.ts

Schritt 2: Code zur TypeScript-Datei hinzufügen (index.ts)

Sie können mit etwas Einfachem beginnen wie;

console.log('Hello world!')

Schritt 3: TypeScript-Code in JavaScript-Code kompilieren

Führen Sie diesen Befehl aus;

npx tsc

Sie können das überprüfen build Ordner (build/index.js), und Sie werden sehen, dass eine index.js mit dieser Ausgabe generiert wurde;

Bild-243

TypeScript wurde in JavaScript-Code kompiliert. 

Schritt 4: Führen Sie den kompilierten JavaScript-Code aus

Denken Sie daran, dass TypeScript-Code nicht auf Browsern ausgeführt werden kann. Wir werden daher den Code in index.js im Build-Ordner ausführen. Führen Sie diesen Befehl aus;

node build/index.js

Dies wird die Ausgabe sein;

Bild-242

Schritt 5: Konfigurieren Sie TypeScript so, dass es automatisch in JavaScript-Code kompiliert wird

Das manuelle Kompilieren von TypeScript-Code, wenn Sie Ihre TypeScript-Dateien ändern, kann Zeit verschwenden. Sie können installieren ts-node (führt TypeScript-Code direkt aus, ohne auf die Kompilierung zu warten) und nodemon (überprüft Ihren Code auf Änderungen und startet den Server automatisch neu). 

Führen Sie diesen Befehl aus;

npm install --save-dev ts-node nodemon

Sie können dann zur Datei package.json gehen und dieses Skript hinzufügen;

"scripts": {

   "start": "ts-node ./src/index.ts"

}

Wir können einen neuen Codeblock zu Demonstrationszwecken verwenden;

function sum (num1:number, num2:number, num3:number){

    return num1 + num2 +num3;

}

console.log(sum(10,15,30))

Löschen Sie die index.js Datei (/build/index.js) und führen Sie npm start aus. 

Ihre Ausgabe wird dieser ähnlich sein;

Bild-241
Summe von 3 Zahlen

Configure TypeScript Linting with eslint

Schritt 1: Installieren Sie eslint

Linting kann nützlich sein, wenn Sie die Codekonsistenz beibehalten und Fehler vor der Laufzeit abfangen möchten. Installieren Sie eslint mit diesem Befehl;

npm install --save-dev eslint

Schritt 2: Initialisieren Sie eslint

Sie können eslint mit diesem Befehl initialisieren;

npx eslint --init

Der Initialisierungsprozess führt Sie durch mehrere Schritte. Verwenden Sie den folgenden Screenshot, um Sie durch den Vorgang zu führen.

Bild-240

Sobald der Vorgang abgeschlossen ist, sehen Sie eine Datei mit dem Namen .eslintrc.js mit ähnlichem Inhalt;

module.exports = {

  env: {

    browser: true,

    es2021: true

  },

  extends: 'standard-with-typescript',

  overrides: [

  ],

  parserOptions: {

    ecmaVersion: 'latest',

    sourceType: 'module'

  },

  rules: {

  }

}

Schritt 3: Führen Sie eslint aus

Führen Sie diesen Befehl aus, um alle Dateien mit dem zu überprüfen und zu linten .ts Verlängerung;

npx eslint . --ext .ts

Schritt 4: Aktualisieren paket.json 

Hinzufügen lint Skript für diese Datei zum automatischen Linting. 

"scripts": {

    "lint": "eslint . --ext .ts",

  },

TypeScript with Node.js: Best practices

  • TypeScript aktuell halten: TypeScript-Entwickler veröffentlichen ständig neue Versionen. Stellen Sie sicher, dass Sie die neueste Version auf Ihrem Computer/Projektordner installiert haben und profitieren Sie von neuen Funktionen und Fehlerbehebungen. 
  • Strikten Modus aktivieren: Sie können die häufigsten Programmierfehler zur Kompilierzeit abfangen, wenn Sie den strikten Modus für die Datei tsconfig.json aktivieren. Dies reduziert Ihre Debugging-Zeit und führt zu mehr Produktivität. 
  • Aktivieren Sie strenge Nullprüfungen: Sie können alle Null- und undefinierten Fehler zur Kompilierzeit abfangen, indem Sie strenge Nullprüfungen für die Datei tsconfig.json aktivieren. 
  • Verwenden Sie einen Code-Editor, der TypeScript unterstützt: Es gibt jede Menge Code-Editoren. Eine gute Praxis ist die Auswahl Code-Editoren B. VS Code, Sublime Text oder Atom, die TypeScript über Plugins unterstützen. 
  • Nutzungsarten und Schnittstellen: Mit Typen und Schnittstellenkönnen Sie benutzerdefinierte Typen definieren, die Sie in Ihrem gesamten Projekt wiederverwenden können. Ein solcher Ansatz macht Ihren Code modularer und einfacher zu warten. 

Fazit

Sie haben jetzt die Grundstruktur einer App, die mit TypeScript auf Node.js erstellt wurde. Sie können jetzt die regulären Node.js-Pakete verwenden, aber trotzdem Ihren Code in TypeScript schreiben und alle zusätzlichen Funktionen nutzen, die mit letzterem geliefert werden. 

Wenn Sie gerade erst mit TypeScript beginnen, stellen Sie sicher, dass Sie die Unterschiede zwischen verstehen TypeScript und JavaScript

Danke an unsere Sponsoren
Weitere großartige Lektüre zum Thema Entwicklung
Treiben Sie Ihr Geschäft an
Einige der Tools und Dienste, die Ihr Unternehmen beim Wachstum unterstützen.
  • Invicti verwendet das Proof-Based Scanning™, um die identifizierten Schwachstellen automatisch zu verifizieren und innerhalb weniger Stunden umsetzbare Ergebnisse zu generieren.
    Versuchen Sie es mit Invicti
  • Web-Scraping, Wohn-Proxy, Proxy-Manager, Web-Unlocker, Suchmaschinen-Crawler und alles, was Sie zum Sammeln von Webdaten benötigen.
    Versuchen Sie es mit Brightdata
  • Semrush ist eine All-in-One-Lösung für digitales Marketing mit mehr als 50 Tools in den Bereichen SEO, Social Media und Content-Marketing.
    Versuchen Sie es mit Semrush
  • Intruder ist ein Online-Schwachstellenscanner, der Cyber-Sicherheitslücken in Ihrer Infrastruktur findet, um kostspielige Datenschutzverletzungen zu vermeiden.
    MIT DER INTELLIGENTEN SCHADENKALKULATION VON Intruder