Wie man ein neues TypeScript-Projekt startet

Einführung

Vielleicht haben Sie bereits mit TypeScript gearbeitet, beispielsweise mit einem Starterprojekt oder einem Tool wie der Angular CLI. In diesem Tutorial lernen Sie, wie Sie ein TypeScript-Projekt ohne Starterprojekt einrichten. Außerdem erfahren Sie, wie die Kompilierung in TypeScript funktioniert und wie Sie einen Linter in Ihrem TypeScript-Projekt verwenden.

Voraussetzungen

Die neueste Version von Node ist auf Ihrem Gerät installiert.
Kennenlernen npm

Schritt 1 – Ein TypeScript-Projekt starten

Um Ihr TypeScript-Projekt zu starten, müssen Sie ein Verzeichnis für Ihr Projekt erstellen:

mkdir typescript-project

Wechseln Sie nun in Ihr Projektverzeichnis:

cd typescript-project

Sie können TypeScript installieren, indem Sie Ihr Projektverzeichnis einrichten:

npm i typescript --save-dev

Es ist wichtig, dass die Flagge --save-dev Fügen Sie TypeScript hinzu, da es TypeScript als Entwicklungsabhängigkeit speichert. Dies bedeutet, dass TypeScript für die Entwicklung Ihres Projekts erforderlich ist.

Nach der Installation von TypeScript können Sie Ihr TypeScript-Projekt mit folgendem Befehl initialisieren:

npx tsc --init

npm Es verfügt außerdem über ein Werkzeug namens npx welches ausführbare Pakete ausführt. npx Dadurch können wir Pakete ausführen, ohne dass eine globale Installation erforderlich ist.

Befehl tsc Es wird hier verwendet, weil es der integrierte Compiler für TypeScript ist. Wenn Sie Code in TypeScript schreiben, wird die Ausführung tsc Es konvertiert oder kompiliert Ihren Code in JavaScript.

Verwendung der Flagge --init Der obige Befehl initialisiert Ihr Projekt, indem er eine tsconfig.json-Datei in Ihrem TypeScript-Projektverzeichnis erstellt. Mithilfe dieser tsconfig.json-Datei können Sie weitere Konfigurationen vornehmen und die Interaktion zwischen TypeScript und dem Compiler festlegen. tsc Anpassen. Sie können Konfigurationen in dieser Datei entfernen, hinzufügen und ändern, um sie optimal an Ihre Bedürfnisse anzupassen.

tsconfig.json Öffnen Sie die Datei in Ihrem Editor, um die Standardkonfiguration zu finden:

nano tsconfig.json

Es wird viele Optionen geben, von denen die meisten im Folgenden erläutert werden:

{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Projects */
// "incremental": true, /* Enable incremental compilation */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
. . .
}
}

Sie können Ihre TypeScript-Konfiguration über die Datei tsconfig.json anpassen. Beispielsweise können Sie den Eintrag outDir einkommentieren und auf “./build” setzen, wodurch alle Ihre kompilierten TypeScript-Dateien in diesem Verzeichnis abgelegt werden.

Durch die Installation von TypeScript und der Datei tsconfig.jsonJetzt können Sie mit dem Codieren der TypeScript-Anwendung und deren Kompilierung beginnen.

Schritt 2 – Das TypeScript-Projekt kompilieren

Jetzt können Sie mit der Programmierung Ihres TypeScript-Projekts beginnen. Erstellen Sie eine neue Datei mit dem Namen index.ts Öffnen Sie die Datei in Ihrem Editor. Fügen Sie den folgenden TypeScript-Code ein. index.ts Schreiben:

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

Nachdem dieser TypeScript-Code eingefügt wurde, ist Ihr Projekt bereit zum Kompilieren. Führen Sie tsc in Ihrem Projektverzeichnis aus:

npx tsc

Sie werden feststellen, dass sowohl die kompilierte JavaScript-Datei index.js als auch die Sourcemap-Datei index.js.map dem Build-Ordner hinzugefügt werden, sofern Sie dies in der tsconfig.js-Datei angegeben haben.

index.js Öffnen Sie die Datei, und Sie sehen folgenden kompilierten JavaScript-Code:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
return `Hello ${who}! `;
}
exports.hello = hello;

Das Ausführen des TypeScript-Compilers bei jeder Änderung kann mühsam sein. Um dies zu vermeiden, können Sie den Compiler in den Überwachungsmodus versetzen. Dadurch wird Ihr Code bei jeder Änderung neu kompiliert.

Sie können den Überwachungsmodus mit folgendem Befehl aktivieren:

npx tsc -w

Sie haben gelernt, wie der TypeScript-Compiler funktioniert und können Ihre TypeScript-Dateien nun erfolgreich kompilieren. Sie können Ihre TypeScript-Projekte auf die nächste Stufe heben, indem Sie einen Linter in Ihren Workflow integrieren.

Schritt 3 – Verwenden Sie Google TypeScript Style, um Ihren Code zu vervollständigen und zu korrigieren.

Die Verwendung eines Linters beim Programmieren hilft Ihnen, Inkonsistenzen, Syntaxfehler und fehlende Elemente in Ihrem Code schnell zu finden. Ein Styleguide trägt nicht nur dazu bei, dass Ihr Code wohlgeformt und konsistent ist, sondern ermöglicht Ihnen auch die Verwendung zusätzlicher Tools, um diesen Stil durchzusetzen. Ein beliebtes Tool hierfür ist ESLint, das mit vielen IDEs gut zusammenarbeitet und den Entwicklungsprozess unterstützt.

Sobald Ihr Projekt läuft, können Sie andere Tools aus dem TypeScript-Ökosystem nutzen, um die manuelle Konfiguration Ihrer tsconfig.json-Datei zu vermeiden. Google TypeScript Style (GTS) ist eines dieser Tools. GTS vereint Styleguide, Inline-Stylesheet und automatische Codekorrektur in einem. Mit GTS starten Sie Ihr neues TypeScript-Projekt schnell und können sich ganz auf das Design konzentrieren, ohne sich um organisatorische Details kümmern zu müssen. GTS bietet zudem Standardeinstellungen, sodass Sie nur wenige Einstellungen anpassen müssen.

Beginnen Sie mit der Installation von GTS:

npm i gts --save-dev

Initialisieren Sie nun das GTS mit folgendem Befehl:

npx gts init

Der obige Befehl erstellt alles, was Sie für den Einstieg in TypeScript benötigen, einschließlich einer tsconfig.json-Datei und einer Linting-Konfiguration. Falls noch keine package.json-Datei vorhanden ist, wird diese ebenfalls erstellt.

Durch Ausführen von `npx gts init` werden außerdem nützliche npm-Skripte zu Ihrer `package.json`-Datei hinzugefügt. Beispielsweise können Sie nun `npm run compile` ausführen, um Ihr TypeScript-Projekt zu kompilieren. Um nach Fehlern zu suchen, können Sie jetzt `npm run check` ausführen.

GTS ist nun installiert und ordnungsgemäß in Ihr TypeScript-Projekt integriert. Durch die Verwendung von GTS in zukünftigen Projekten können Sie neue TypeScript-Projekte schnell mit den erforderlichen Einstellungen einrichten.

Da GTS einen konfigurierungsfreien, meinungsbasierten Ansatz verfolgt, verwendet es eigene sinnvolle Regeln. Diese orientieren sich an bewährten Verfahren. Sollten Sie die Regeln dennoch anpassen müssen, können Sie dies durch Erweitern der Standard-ESLint-Regeln tun. Erstellen Sie dazu im Projektverzeichnis eine Datei namens `.eslintrc`, die die Stilregeln erweitert.

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

Dies ermöglicht es Ihnen, die von GTS bereitgestellten Stilregeln hinzuzufügen oder zu ändern.

Ergebnis

In diesem Tutorial haben Sie ein TypeScript-Projekt mit benutzerdefinierten Einstellungen erstellt. Außerdem haben Sie Google TypeScript Style in Ihr Projekt integriert. Mit GTS können Sie schnell mit einem neuen TypeScript-Projekt loslegen. Dank GTS müssen Sie die Konfiguration nicht manuell einrichten oder einen Linter in Ihren Workflow integrieren.