TypeScript-Projekt starten: Ihre Schritt-für-Schritt-Anleitung

Einleitung

Vielleicht haben Sie bereits mit TypeScript gearbeitet, indem Sie ein Starterprojekt oder ein Tool wie Angular CLI verwendet haben. In diesem Tutorial erfahren Sie, wie Sie ein TypeScript-Projekt ohne Hilfe eines Starters einrichten. Außerdem lernen Sie, wie das Kompilieren in TypeScript funktioniert und wie Sie einen Linter in Ihr Projekt integrieren.

Stellen Sie Ihre Frontend-Anwendungen über GitHub mit der DigitalOcean App Platform bereit. Überlassen Sie DigitalOcean das Skalieren Ihrer App.

Inhaltsverzeichnis

• Das TypeScript-Projekt starten
• Das Projekt kompilieren
• Google TypeScript Style für Linting und Code verwenden

Voraussetzungen

Um dieses Tutorial abzuschließen, benötigen Sie Folgendes:

• Die neueste Version von Node auf Ihrem Rechner installiert. Befolgen Sie das Tutorial How to Install Node.js and Create a Local Development Environment.
• Grundkenntnisse in npm. Um mehr zu erfahren, lesen Sie das Tutorial How To Use Node.js Modules with npm and package.json.
• Eine aktuelle Version von Ubuntu (20.04, 22.04 oder 24.04). Aktualisieren Sie ältere Versionen bei Bedarf.

Schritt 1 — Das TypeScript-Projekt starten

Erstellen Sie ein Verzeichnis für Ihr Projekt:

mkdir typescript-projekt

Wechseln Sie in Ihr Projektverzeichnis:

cd typescript-projekt

Installieren Sie TypeScript als Entwicklungsabhängigkeit:

npm i typescript --save-dev

Initialisieren Sie Ihr Projekt:

npx tsc --init

Dies erstellt eine tsconfig.json-Datei in Ihrem Projektverzeichnis. Passen Sie diese bei Bedarf an, z. B. durch Festlegen von outDir auf "./build", um kompilierte Dateien zu organisieren.

Schritt 2 — Das TypeScript-Projekt kompilieren

Erstellen Sie eine neue Datei namens index.ts und fügen Sie den folgenden Code hinzu:

  const world = 'world';
  export function hello(who: string = world): string {
    return `Hello ${who}! `;
  }

Kompilieren Sie Ihr Projekt:

npx tsc

Setzen Sie den Compiler in den Beobachtungsmodus, um die Neukompilierung zu automatisieren:

npx tsc -w

Schritt 3 — Google TypeScript Style für Linting und Korrektur verwenden

Installieren Sie Google TypeScript Style (GTS):

npm i gts --save-dev

Initialisieren Sie GTS:

npx gts init

Führen Sie Lint-Überprüfungen durch und kompilieren Sie Ihren Code mit GTS:

npm run check

npm run compile

Erweitern Sie die Standard-ESLint-Regeln, indem Sie eine Datei namens .eslintrc erstellen:

  ---
  extends:
    - './node_modules/gts'

Fazit zum TypeScript-Projekt

In diesem Tutorial haben Sie ein Projekt eingerichtet, seine Konfiguration angepasst und Google TypeScript Style integriert. GTS vereinfacht die Projekteinrichtung und stellt Konsistenz mit Standard-Linting- und Formatierungsregeln sicher.