TypeScript-Grundlagen: Ein Leitfaden für Anfänger (✅

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!