Menu
CoddyTech

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.

challenge icon

Aufgabe

Einfach

Erstelle ein Interface namens Task mit den folgenden Eigenschaften:

  • id vom Typ number
  • title vom Typ string
  • status, das nur einen dieser Literalwerte annehmen kann: 'todo', 'in-progress' oder 'done'

Erstelle mithilfe deines Task-Interfaces die folgenden Variablen:

  • Erstelle eine Variable namens firstTask vom Typ Task mit der ID 1, dem Titel "Learn TypeScript interfaces" und dem Status 'todo'
  • Erstelle eine Variable namens secondTask vom Typ Task mit der ID 2, dem Titel "Build task management app" und dem Status 'in-progress'
  • Erstelle eine Variable namens thirdTask vom Typ Task mit der ID 3, 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 getTaskInfo mit firstTask auf und gib das Ergebnis aus
  • Rufe getTaskInfo mit secondTask auf und gib das Ergebnis aus
  • Rufe getTaskInfo mit thirdTask auf und gib das Ergebnis aus
  • Gib den Status von firstTask aus
  • Gib den Titel von secondTask aus

Probier es selbst

// TODO: Schreibe deinen Code hier

// Erstelle das Task-Interface


// Erstelle die task-Variablen


// Erstelle die getTaskInfo-Funktion


// Gib die erforderlichen Ausgaben aus
quiz iconTeste dich selbst

Diese 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

Übe selbstständig: TypeScript-Playground