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!