TypeScript hat unter Entwicklern endlose Debatten ausgel?st. Einige sehen darin ein bürokratisches Hindernis für die Freiheit von JavaScript, w?hrend andere es als einen Leuchtturm in den Schützengr?ben des lose typisierten Codes begrü?en. Lieben Sie es oder hassen Sie es, TypeScript wird Ihnen treu bleiben – und wenn Sie es erst einmal kennengelernt haben, werden Sie vielleicht feststellen, dass es keine Belastung, sondern ein Segen für Ihre Projekte ist.

In dieser Serie werden wir uns mit TypeScript befassen und die Grundlagen behandeln – sowie einige Tricks und Tipps zur Fehlerbehebung.

1. Einführung

Was ist TypeScript?

TypeScript ist eine statisch typisierte Obermenge von JavaScript, die zu einfachem JavaScript kompiliert wird. Einfacher ausgedrückt handelt es sich um JavaScript mit zus?tzlichen Funktionen, die Ihnen helfen, Fehler frühzeitig zu erkennen und besseren, wartbareren Code zu schreiben.

Stellen Sie sich TypeScript als einen freundlichen Assistenten vor, der Ihre Arbeit noch einmal überprüft, bevor Sie sie einreichen. Damit k?nnen Sie:

• Erkennen Sie Fehler bereits beim Codieren, nicht erst nach der Bereitstellung.
• Schreiben Sie Code, der leichter zu lesen und zu verstehen ist.
• Skalieren Sie Ihre Projekte, ohne den überblick über die Zusammenh?nge zu verlieren.

Warum TypeScript verwenden?

Lassen Sie uns praktisch werden. Warum sollten Sie sich für TypeScript interessieren, wenn JavaScript bereits funktioniert?

Echte Vorteile:

1. Fehler frühzeitig erkennen: Vermeiden Sie h?ufige Fallstricke, wie die übergabe des falschen Datentyps an eine Funktion.

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. Autovervollst?ndigung und Dokumentation: Moderne Editoren (wie VS Code) bieten w?hrend der Eingabe umfassende Vorschl?ge und Dokumentation zur automatischen Vervollst?ndigung.

2. Code-Skalierbarkeit: Die Funktionen von TypeScript gl?nzen in gr??eren Projekten, bei denen die Aufrechterhaltung der Konsistenz von entscheidender Bedeutung ist.

3. Verbesserte Teamzusammenarbeit: Klare Typen erleichtern es den Teammitgliedern, Ihren Code auf einen Blick zu verstehen.

Ich habe festgestellt, dass TypeScript besonders hilfreich für die Planung gr??erer Apps ist. Verstehen, mit welchen Arten von Daten ich umgehen werde und welche Daten meine Funktionen aufnehmen/zurückgeben.

Voraussetzungen

Bevor Sie eintauchen, stellen Sie sicher, dass Sie über grundlegende JavaScript-Kenntnisse verfügen. Sie sollten mit Folgendem vertraut sein:

• Variablen und Datentypen (z. B. let, const, string, number)
• Funktionen
• Arrays und Objekte

Wenn Sie sich noch nicht sicher sind, nehmen Sie sich etwas Zeit, um sich mit den JavaScript-Grundlagen vertraut zu machen.

---

2. Einrichten Ihrer Umgebung

TypeScript installieren

TypeScript ist ein Tool, das zum Starten eine Installation erfordert. Mit nur wenigen Schritten k?nnen Sie Ihre Umgebung darauf vorbereiten, mit dem Codieren in TypeScript zu beginnen. So geht's:

Um TypeScript verwenden zu k?nnen, muss Node.js installiert sein. Sobald Sie das haben:

1. TypeScript global installieren:

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. überprüfen Sie die Installation:

   npm install -g typescript

VS-Code einrichten

VS Code ist einer der beliebtesten Editoren für die TypeScript-Entwicklung. Es bietet eine Reihe von Funktionen und Erweiterungen, die das Codieren einfacher und effizienter machen. Lass es uns einrichten:

VS Code ist der Editor der Wahl für TypeScript-Entwickler. So richten Sie es ein:

1. VS-Code installieren: Hier herunterladen
2. Fügen Sie diese hilfreichen Erweiterungen hinzu:
   • ESLint: Zum Flusen Ihres TypeScript-Codes.
   • Hübscher: Für konsistente Codeformatierung.
   • TypeScript Hero: Für verbesserte Produktivit?t.

Erstellen Sie Ihr erstes TypeScript-Projekt

Der beste Weg, TypeScript zu erlernen, ist der praktische Einstieg. Dieser Abschnitt führt Sie durch die Einrichtung Ihres ersten Projekts, von der Erstellung von Dateien bis zur Ausführung Ihres Codes.

1. Erstellen Sie einen neuen Ordner für Ihr Projekt und navigieren Sie dorthin:

   tsc --version

1. Neues Projekt initialisieren:

   mkdir typescript-starter
   cd typescript-starter

1. TypeScript hinzufügen:

   npm init -y

1. Erstellen Sie eine tsconfig.json-Datei:

   npm install --save-dev typescript

1. Schreiben Sie Ihre erste TypeScript-Datei:

   npx tsc --init

1. Kompilieren und ausführen:

   echo "console.log('Hello, TypeScript!');" > index.ts

Sie haben gerade Ihr erstes TypeScript-Programm geschrieben und kompiliert!

---

3. übersicht über die Grundtypen

Die St?rke von TypeScript liegt in seinem Typsystem. Lassen Sie uns einige Grundtypen erkunden:

Primitive Typen

Primitive Typen sind die Bausteine ??des Typsystems von TypeScript. Dazu geh?ren grundlegende Datentypen wie Zeichenfolgen, Zahlen und boolesche Werte. Hier ist ein kurzer Blick darauf, wie man sie verwendet:

1. Zeichenfolge:

   npx tsc index.ts
   node index.js

1. Nummer:

   let name: string = "Alice";

1. boolean:

   let age: number = 25;

Erweiterte Typen

Zus?tzlich zu Grundelementen unterstützt TypeScript komplexere Typen wie Arrays, Tupel und spezielle Typen wie ?any“ und ?unknown“. Diese Typen machen Ihren Code flexibel und sorgen gleichzeitig für Sicherheit.

1. Arrays:

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. Tupel:

   npm install -g typescript

1. beliebig (sparsam verwenden):

   tsc --version

1. unbekannt (sicherer als alle anderen):

   mkdir typescript-starter
   cd typescript-starter

1. void (Funktionen, die nichts zurückgeben):

   npm init -y

1. null?und undefiniert:

   npm install --save-dev typescript

---

4. Erste Schritte mit Typanmerkungen

Typanmerkungen in TypeScript erm?glichen es Entwicklern, den Typ einer Variablen, eines Parameters oder eines Funktionsrückgabewerts anzugeben. Dadurch wird sichergestellt, dass der Code einer definierten Struktur entspricht, was es einfacher macht, Fehler w?hrend der Entwicklung zu erkennen und die Konsistenz w?hrend des gesamten Projekts aufrechtzuerhalten.

Beachten Sie beim Schreiben Ihres Codes wie gewohnt die folgenden Funktionen, die Sie integrieren k?nnen

Grundlegende Variablentypisierung

Legen Sie Typen für Ihre Variablen fest, damit sie immer richtig eingestellt sind und der Rest der App versteht, was sie sind.

   npx tsc --init

Typisierung von Funktionsparametern

?hnlich k?nnen Sie für Funktionen die Typen für die Argumente sowie den Typ für die Rückgabe definieren.

   echo "console.log('Hello, TypeScript!');" > index.ts

Anmerkungen zum Rückgabetyp

   npx tsc index.ts
   node index.js

Praxisbeispiel: Benutzerprofil

TypeScript erm?glicht es Ihnen, Ihre eigenen Typen zu deklarieren, um Regeln in Ihrem Code besser zu strukturieren und durchzusetzen. Mithilfe von Typ oder Schnittstelle k?nnen Sie benutzerdefinierte Typen für Objekte, Funktionen oder sogar Unions definieren. Dies macht Ihren Code nicht nur robuster, sondern verbessert auch die Lesbarkeit und Konsistenz in gr??eren Projekten.

   let name: string = "Alice";

---

5. Schnellstart mit Schnittstellen

Grundlegende Syntax

Schnittstellen in TypeScript definieren die Struktur von Objekten und stellen sicher, dass sie über bestimmte Eigenschaften und Typen verfügen. In diesem Abschnitt erfahren Sie, wie Sie sie erstellen und verwenden:

   let age: number = 25;

Optionale Eigenschaften

Manchmal sind nicht alle Eigenschaften in einem Objekt erforderlich. Mit TypeScript k?nnen Sie optionale Eigenschaften in Schnittstellen definieren, um solche F?lle elegant zu behandeln.

   let isStudent: boolean = true;

Schreibgeschützte Eigenschaften

Schreibgeschützte Eigenschaften sind nützlich, wenn Sie sicherstellen m?chten, dass bestimmte Werte nach ihrer Festlegung nicht mehr ge?ndert werden k?nnen. So verwenden Sie sie in Schnittstellen:

   let scores: number[] = [90, 85, 88];

Beispiel aus der Praxis: API-Antwort

Durch die Verwendung von Schnittstellen zur Eingabe von API-Antworten stellen Sie sicher, dass Sie Daten von Servern sicher und effektiv verarbeiten. Hier ist ein praktisches Beispiel:

   let user: [string, number] = ["Alice", 25];

---

6. übungsprojekt: Erstellen einer einfachen Todo-Liste

übung ist der Schlüssel zur Beherrschung von TypeScript. In diesem Projekt erstellen Sie eine einfache Aufgabenlistenanwendung, die die Funktionen nutzt, die Sie bisher gelernt haben:

1. Erstellen Sie einen Todo-Typ:

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. Erstellen Sie ein einfaches ToDo-Array:

   npm install -g typescript

1. Fügen Sie einige Funktionen hinzu, um Aufgaben hinzuzufügen und Aufgaben als abgeschlossen zu markieren:

   tsc --version

---

7. N?chste Schritte

Das war's vorerst. Ich hoffe, Ihnen hat dieses Tutorial gefallen. Ich werde an einigen zus?tzlichen Tutorials arbeiten, um tiefer in nützliche TypeScript-Funktionen und Anwendungsf?lle einzutauchen.

• Als N?chstes: Tiefer Einblick in TypeScript-Funktionen und erweiterte Typen.
• Ressourcen:
  • TypeScript-Dokumentation
  • CodeSandbox zum Online-üben von TypeScript.
• Herausforderung: Erstellen Sie eine TypeScript-Schnittstelle für einen Blog-Beitrag und verwenden Sie sie zur Typprüfung einer Liste von Blog-Beitr?gen.

Bis zum n?chsten Mal!

Das obige ist der detaillierte Inhalt vonTypeScript-Grundlagen: Ein Leitfaden für Anf?nger (?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!