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:
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.