Projekt: Task-Struct definieren
Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy. Lektion 45 von 73.
Willkommen bei deinem ersten TypeScript-Projekt! In den nächsten Lektionen wirst du eine vollständige Aufgabenlistenanwendung erstellen, die zeigt, wie TypeScript dabei hilft, gut strukturierten und typsicheren Code zu erstellen. Dieses Projekt wird viele der Konzepte verbinden, die du bisher gelernt hast: interfaces, Literaltypen, Arrays und Funktionen.
Die Grundlage jedes Aufgabenverwaltungssystems besteht darin, festzulegen, wie eine Aufgabe aussieht. In dieser Lektion erstellst du die Datenstruktur, die eine einzelne Aufgabe in deiner Anwendung darstellt. Diese Struktur muss die wesentlichen Informationen erfassen: eine eindeutige Kennung, worum es bei der Aufgabe geht, und ihren aktuellen Status.
Dein Task-Interface verwendet Literal-Typen für die Status-Eigenschaft. Das bedeutet, dass der Status nur einen von wenigen bestimmten Zeichenfolgenwerten wie 'todo', 'in-progress' oder 'done' annehmen kann. Dieser Ansatz verhindert Tippfehler und sorgt für Konsistenz in deiner gesamten Anwendung – TypeScript erkennt jeden Versuch, einen ungültigen Statuswert zu verwenden.
Diese Projektstruktur dient als Vorlage für alle Funktionen, die du in den kommenden Lektionen erstellen wirst, einschließlich des Hinzufügens neuer Aufgaben, der Aktualisierung ihres Status und des Filterns von Aufgaben nach ihrem aktuellen Zustand.
Aufgabe
EinfachErstelle ein Interface namens Task mit den folgenden Eigenschaften:
idvom Typnumbertitlevom Typstringstatus, das nur einen dieser Literalwerte annehmen kann:'todo','in-progress'oder'done'
Erstelle mithilfe deines Task-Interfaces die folgenden Variablen:
- Erstelle eine Variable namens
firstTaskvom TypTaskmit der ID1, dem Titel"Learn TypeScript interfaces"und dem Status'todo' - Erstelle eine Variable namens
secondTaskvom TypTaskmit der ID2, dem Titel"Build task management app"und dem Status'in-progress' - Erstelle eine Variable namens
thirdTaskvom TypTaskmit der ID3, dem Titel"Write unit tests"und dem Status'done'
Erstelle eine Funktion namens getTaskInfo, die einen Parameter vom Typ Task akzeptiert und einen string im Format "Task [id]: [title] - [status]" zurückgibt.
Gib die folgenden Ausgaben in separaten Zeilen aus:
- Rufe
getTaskInfomitfirstTaskauf und gib das Ergebnis aus - Rufe
getTaskInfomitsecondTaskauf und gib das Ergebnis aus - Rufe
getTaskInfomitthirdTaskauf und gib das Ergebnis aus - Gib den Status von
firstTaskaus - Gib den Titel von
secondTaskaus
Probier es selbst
// TODO: Schreibe deinen Code hier
// Erstelle das Task-Interface
// Erstelle die task-Variablen
// Erstelle die getTaskInfo-Funktion
// Gib die erforderlichen Ausgaben ausDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Einführung in TypeScript
1Erste Schritte mit TS
Was ist TypeScript?Warum TypeScript verwenden?Dein erster TypeScript-CodeKompilierungsprozess & FehlerZusammenfassung: Einführung in TS4Arbeiten mit Funktionen
Typisierung von Parametern & RückgabewertenTypisierung von Arrow-FunktionenDer Rückgabetyp 'void'Optionale Parameter mit '?'Standard-ParameterwerteTypisierung von Rest-ParameternDefinieren von FunktionstypenZusammenfassung: Typisierte Funktionen erstellen7Projekt: Eine einfache Aufgabenliste
Projekt: Task-Struct definierenFunktion zum Hinzufügen einer Aufgabe2Basis-Typen
Basis-Typen: str, num, booleanDer 'any'-Typ: Der NotausgangDer 'unknown'-TypArbeiten mit 'null' & 'undef'Typinferenz in der PraxisExplizite Typ-AnnotationenZusammenfassung: Übung zu Basis-Typen5Typen: Aliase, Unions & Intersections
Typ-Aliase für primitive DatentypenUnion-Typen ('|')Arbeiten mit Union-TypenLiteral-TypenIntersection-Typen ('&')Kombinieren von Typ-AliasenZusammenfassung: Fortgeschrittene Typ-Kombinationen3Datenstruktur: Arrays & Tupel
Typisierte Arrays'readonly'-Modifikator für ArraysWas ist ein Tupel?Deklarieren von und Zugriff auf TupelDestrukturierung von TupelnReadonly-TupelMehrdimensionale typisierte ArraysSpread-Operator mit ArraysZusammenfassung: Arrays und TupelÜbe selbstständig: TypeScript-Playground