TypeScript: Erste Schritte mit TSConfig-Optionen

Was ist TypeScript?

TypeScript ist eine Obermenge von JavaScript. Das bedeutet, dass Sie die JavaScript-Syntax in TypeScript verwenden können. Daher ist es am besten, JavaScript zu lernen, bevor Sie in TypeScript einsteigen. Lassen Sie uns mit diesem Haftungsausschluss darüber sprechen, worum es bei TypeScript geht und wie wir ein Projekt für TypeScript einrichten können.

In der Dokumentation zu TypeScript heißt es: „TypeScript ist eine stark typisierte Programmiersprache, die auf JavaScript aufbaut.“[1] Die TypeScript-Sprache fügt Typsyntax hinzu, um Ihnen zu helfen, Fehler frühzeitig während der Entwicklung zu erkennen und die Sicherheitsmaßnahmen aufrechtzuerhalten, während Ihr Entwicklungsteam wächst wenn ein Projekt skaliert. Mit TypeScript können Sie die Datentypen für Variablen und Schnittstellen für Objekte definieren. TypeScript verwendet diese Definitionen, um Ihren Code beim Kompilieren auf Fehler zu überprüfen und Sie zu informieren, wenn Sie die zuvor festgelegten Definitionen nicht befolgen.

Wenn Sie sich fragen: „Warum muss ich mehr Code schreiben, nur um TypeScript zu verwenden, wenn ich überhaupt vorsichtiger sein kann?“ Sie liegen nicht falsch, aber Menschen können Fehler machen, und das passiert uns oft, wenn wir über einen längeren Zeitraum arbeiten. Wenn diese Überlegungen auch auf den Bau angewendet würden, würden die zusätzlichen Gerüste und Sicherheitsmaßnahmen mehr Arbeit und Zeit erfordern, und wir können Zeit sparen, indem wir einfach auf der Baustelle vorsichtig sein.

Sehen Sie? Um Zeit zu sparen, hat dieser Dachdecker möglicherweise mehr Zeit und Ressourcen verschwendet. Das ist nur ein Arbeiter. Stellen Sie sich ein Team von Mitarbeitern vor, die an einem Projekt arbeiten, während weitere Teammitglieder hinzukommen. Das ist die Realität der Softwareentwicklung; Einen Plan zu haben, um diese Fehler zu erkennen, wird Ihnen und Ihrem Team auf lange Sicht helfen.

TypeScript-Beispiele

Die folgenden Beispiele stammen aus der TypeScript-Dokumentation[2], aber der Kommentar ist von mir.

TypeScript:

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

TypeScript erkennt den Fehler, wenn „greet“ aufgerufen wird. Wir haben „gruss“ so definiert, dass zwei Argumente empfangen werden: „Person“ und „Datum“, und wir haben nur „Person“ angegeben. TypeScript erkennt diesen Fehler beim Kompilieren des Codes und teilt Ihnen mit, dass ein zweites Argument erwartet wurde. In gewisser Weise kann TypeScript als Linter für Ihren Code betrachtet werden, um diese Fehler während der Arbeit abzufangen, aber wir können die Typsyntax nutzen, um uns weiter zu helfen.

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

Jetzt fügen wir den beiden Argumenten einen Typ hinzu, person muss ein String sein und date muss ein Date-Objekt für die toDateString-Methode sein. Wenn „greet“ ohne das Schlüsselwort „new“ vor dem zweiten Argument „Date()“ aufgerufen wird, teilt Ihnen TypeScript mit, dass es für den Datumsparameter eine Zeichenfolge anstelle eines Datums erhalten hat. Jetzt können Sie Ihren Fehler beheben, bevor Sie mit der Entwicklung fortfahren und auf diesen Fehler zurückgreifen müssen, wenn Sie beim Testen eine unerwartete Ausgabe erhalten.

Da Sie nun TypeScript in Aktion gesehen haben, wollen wir uns die nächsten Schritte beim Einrichten Ihres Projekts für die Verwendung ansehen.

Konfigurieren des TypeScript-Compilers: tsconfig.json

Die standardmäßige TypeScript-Kompilierung ist möglicherweise nicht das, was Sie suchen, und es gibt eine Möglichkeit, TypeScript an Ihre Bedürfnisse anzupassen, ähnlich wie die Verwendung eines Linters, aber es kann noch viel mehr.

Der erste Schritt besteht darin, eine tsconfig.json-Datei im Stammverzeichnis Ihres Projekts zu erstellen. Diese Datei teilt TypeScript mit, welche Dateien in den Kompilierungsprozess einbezogen werden sollen. In der tsconfig.json können Sie die Verzeichnisse aus dem Stammverzeichnis angeben, die einbezogen werden sollen, wenn Sie mehr Spezifität wünschen, indem Sie den „includes“-Schlüssel Ihrer JSON-Datei verwenden.

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

Lassen Sie uns nun über „compilerOptions“ sprechen. Vertrauen Sie mir, wenn ich sage, dass es eine Menge Optionen zur Auswahl gibt. Das ist eine gute Sache, aber auch erschreckend, wenn Sie TypeScript zum ersten Mal verwenden. Ich werde einige der beliebtesten Optionen aufschlüsseln, um Ihnen den Einstieg zu erleichtern:

erlaubenJs

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

Mit dieser Option können JavaScript-Dateien statt nur TypeScript in Ihr Projekt importiert werden. Typischerweise geht TypeScript davon aus, dass es sich bei allen Importen um TypeScript handelt, und würde bei importierten JavaScript-Dateien eine Fehlermeldung ausgeben. Diese Option ermöglicht uns jedoch die Verwendung dieser Importe und kann bei der Arbeit mit TypeScript und JavaScript im selben Repository hilfreich sein.

esModuleInterop

{
  "include": ["src/**/*"]
}

Ein Namespace-Import in ES6 kann nur ein Objekt sein, aber da dies dasselbe ist wie die Verwendung von require ohne .default, haben wir TypeScript erlaubt, ein Objekt als Funktion zu behandeln. Anstatt bei unseren Importen vorsichtig sein zu müssen, behebt diese Option dieses Problem, wenn TypeScript den Code in JavaScript transpiliert.

Ziel

{
  "compilerOptions": {
    "allowJs": true
  }
}

Diese Option ändert, welche JS-Funktionen herabgestuft werden und welche intakt bleiben, wenn TypeScript Ihren Code in JavaScript transpiliert. es6 ist eine gute Wahl, da die meisten modernen Browser ES6 unterstützen, aber Sie können für diese Option eine beliebige Version von ECMAScript festlegen, die Ihren Anforderungen entspricht.

strikt

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

Dieses Flag ermöglicht viele verschiedene Verhaltensweisen bei der Typprüfung. Dies führt zu einer stärkeren Codebasis mit weniger Fehlern. Wenn Sie bestimmte Verhaltensweisen bei der Typprüfung ausschließen möchten, lesen Sie die Dokumentation [3] und setzen Sie deren Optionen auf „false“. Wenn Sie nur ein paar Typprüfungsverhalten wünschen, würde ich in Betracht ziehen, diese zu aktivieren, anstatt strikt zu verwenden.

outDir

{
  "compilerOptions": {
    "target": "es6"
  }
}

Wenn TypeScript Ihren Code in verwendbares JavaScript umwandelt, werden diese Dateien mit dieser Option in dieses Verzeichnis ausgegeben.

noEmit

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

Diese Option verhindert, dass alle transpilierten JavaScript-Dateien ausgegeben werden. Das klingt vielleicht albern, da ich Ihnen gerade von outDir erzählt habe, aber TypeScript gibt immer Dateien aus und outDir leitet die Dateien an den richtigen Speicherort. noEmit kommt ins Spiel, wenn Sie bereits ein anderes Tool wie Babel oder Webpack zum Transpilieren und Bündeln Ihres Codes verwenden. In diesem Fall würde das Ausgeben bedeuten, dass nutzlose JavaScript-Dateien erstellt werden.

Abschluss

Da haben Sie es. Dies sind sieben Optionen, die Ihnen beim Einrichten Ihrer Konfiguration für TypeScript helfen und wie TypeScript Ihnen dabei helfen kann, eine stabilere Codebasis zu erstellen. Ich empfehle, Matt Pococks „The TSConfig Cheat Sheet“ zu lesen, um weitere beliebte Optionen zum Einfügen in Ihre tsconfig.json zu finden, und immer die TypeScript-Dokumentation zu TSConfig zu Rate zu ziehen, bevor Sie eine dieser Optionen implementieren.

Viel Spaß beim Programmieren!
Tyler Meyer

Quellen:

[1] https://www.typescriptlang.org/

[2] https://www.typescriptlang.org/docs/handbook/2/basic-types.html

[3] https://www.typescriptlang.org/tsconfig/

[4] https://www.totaltypescript.com/tsconfig-cheat-sheet

Das obige ist der detaillierte Inhalt vonTypeScript: Erste Schritte mit TSConfig-Optionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!