So richten Sie ein neues TypeScript-Projekt ein

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:

Wechseln Sie in Ihr Projektverzeichnis:

Installieren Sie TypeScript als Entwicklungsabhängigkeit:

    npm i typescript --save-dev
  

Initialisieren Sie Ihr Projekt:

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:

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

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

Installieren Sie Google TypeScript Style (GTS):

Initialisieren Sie GTS:

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


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.

Kostenlosen Account erstellen

Registrieren Sie sich jetzt und erhalten Sie Zugang zu unseren Cloud Produkten.

Das könnte Sie auch interessieren: