Einrichten von TypeScript mit Visual Studio Code

Visual Studio Code (VSCode) ist ein leistungsstarker und beliebter Code-Editor, der die TypeScript-Entwicklung hervorragend unterstützt. Diese Anleitung führt Sie durch die Schritte zum Einrichten von TypeScript in VSCode und stellt sicher, dass Sie über alles verfügen, was Sie zum effektiven Programmieren benötigen.

Installieren von Visual Studio Code

Wenn Sie Visual Studio Code noch nicht installiert haben, führen Sie die folgenden Schritte aus:

1. Gehen Sie zur offiziellen VSCode-Website.
2. Laden Sie das Installationsprogramm für Ihr Betriebssystem herunter.
3. Führen Sie das Installationsprogramm aus und folgen Sie den Anweisungen auf dem Bildschirm, um die Installation abzuschließen.

Installieren von Node.js und npm

TypeScript wird über npm (Node Package Manager) verwaltet, wofür Node.js erforderlich ist. So installieren Sie Node.js und npm:

1. Besuchen Sie die offizielle Node.js-Website.
2. Laden Sie die LTS-Version von Node.js herunter und installieren Sie sie, die npm enthält.
3. Überprüfen Sie die Installation, indem Sie ein Terminal öffnen und node -v und npm -v ausführen, um die Versionen von Node.js und npm zu überprüfen.

Installieren von TypeScript

Nachdem Node.js und npm installiert sind, können Sie TypeScript nun global installieren. Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus:

npm install -g typescript

Dieser Befehl installiert TypeScript global, sodass Sie mit dem Befehl tsc TypeScript-Dateien von überall auf Ihrem System kompilieren können.

Einrichten eines TypeScript-Projekts

Um ein neues TypeScript-Projekt zu starten, folgen Sie diesen Schritten:

1. Erstellen Sie ein neues Verzeichnis für Ihr Projekt und navigieren Sie dorthin:

mkdir my-typescript-project
cd my-typescript-project

1. Initialisieren Sie ein neues npm-Projekt:

npm init -y

1. Installieren Sie TypeScript als Entwicklungsabhängigkeit:

npm install --save-dev typescript

1. Generieren Sie eine TypeScript-Konfigurationsdatei:

npx tsc --init

Dieser Befehl erstellt in Ihrem Projektverzeichnis eine Datei tsconfig.json, die Konfigurationseinstellungen für den TypeScript-Compiler enthält.

Konfigurieren von VSCode für TypeScript

VSCode verfügt über integrierte TypeScript-Unterstützung, Sie können Ihre Entwicklungserfahrung jedoch noch weiter verbessern, indem Sie den Editor konfigurieren:

Öffnen Ihres Projekts

Öffnen Sie Ihr TypeScript-Projekt in VSCode:

1. Starten Sie VSCode.
2. Wählen Sie Datei > Ordner öffnen… und wählen Sie Ihr Projektverzeichnis.

Installieren von TypeScript-Erweiterungen

VSCode bietet bereits von Haus aus hervorragende TypeScript-Unterstützung, für erweiterte Funktionalität können Sie jedoch zusätzliche Erweiterungen installieren:

• TypeScript-Erweiterung: Bietet TypeScript-Sprachunterstützung und Funktionen wie IntelliSense, Codenavigation und mehr.
• Prettier: Eine Erweiterung zur Codeformatierung, die einen einheitlichen Codestil gewährleistet.

Konfigurieren des TypeScript-Compilers

Öffnen Sie die Datei tsconfig.json, um die TypeScript-Compilereinstellungen zu konfigurieren. Hier ist eine Beispielkonfiguration:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Diese Konfiguration legt die Zielversion von ECMAScript auf ES6 fest, gibt das CommonJS-Modulformat an, aktiviert eine strenge Typprüfung und legt das Ausgabeverzeichnis auf ./dist fest. Sie enthält außerdem Quellzuordnungen für einfacheres Debuggen.

Schreiben und Ausführen von TypeScript-Code

Erstellen Sie eine neue TypeScript-Datei im Verzeichnis src:

mkdir src
touch src/index.ts

Fügen Sie etwas TypeScript-Code zu index.ts hinzu:

const message: string = "Hello, TypeScript!";
console.log(message);

Führen Sie zum Kompilieren Ihres TypeScript-Codes Folgendes aus:

npx tsc

Dieser Befehl kompiliert Ihre TypeScript-Dateien und gibt die JavaScript-Dateien in das Verzeichnis dist aus.

Um den kompilierten JavaScript-Code auszuführen, verwenden Sie:

node dist/index.js

Abschluss

Das Einrichten von TypeScript mit Visual Studio Code ist ein unkomplizierter Vorgang, der die Installation der erforderlichen Tools, die Konfiguration Ihres Projekts und die Verwendung der leistungsstarken Funktionen von VSCode umfasst. Wenn Sie dieser Anleitung folgen, verfügen Sie über eine voll funktionsfähige TypeScript-Entwicklungsumgebung und sind bereit, robuste Anwendungen mit TypeScript zu erstellen.