Type | Treat (Type or Treat) – Tag 1/5

Wie Jahr 2020, gibt es auch dieses Jahr die Type | Treat (Type or Treat) Challenge 🎃. In dieser Challenge werden wir Aufgaben bekommen TypeScript Code korrekt zu typisieren. Dabei soll, durch spielerische Art, das Lernen des Typen-Systems in den Vordergrund gerückt werden.

Die erste Challenge findet ihr hier: https://devblogs.microsoft.com/typescript/type-treat-2021-day-1/. Dort gibt es zwei Aufgaben, eine für ‚Beginner‘ also Anfänger und eine weitere für ‚Intermediate‘ sprich Fortgeschrittene. Beide haben ihren eigenen Reiz. Schauen wir uns einmal für beide Aufgaben einen Lösungsweg an.

Beginner – Array to Union

In der ersten Aufgabe, bekommen wir ein Array an Strings. Dieses Array soll dazu genutzt werden, die Method ‚playSong‘ vor Typos zu schützen. Daraus folgt, dass das Array in einen Union-Type umgewandelt werden muss.

Mit TypeScript 3.4 haben wir sogenannte ‚const Assertions‘ bekommen, welche uns bei dieser Aufgabe von großer Hilfe sind. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions

const playlist = [ "Title A", "Title B", "Title C" ] as const; // readonly Tupel
type PlaylistUnion = typeof playlist[number]; // type = "TitleA" | "Title B" | "Title C"

Hier geht’s zur meiner Lösung (Teil 1)

Intermediate – Method Chaining & Return Type

Die zweite Aufgabe ist auf den ersten Blick etwas anspruchsvoller. Hier werden drei Methoden in einander verschachtelt. Jedoch ist das Problem, dass die Parameter mit ‚any‘ gar nicht typisiert sind. Unsere Aufgabe besteht darin, den Typen soweit anzupassen, dass dieser dafür sorgt den Compiler-Fehler weiter unten korrekt aufzudecken.

‚ReturnType‘ ist ein TypeScript Typ-Alias, welcher uns hilft den Rückgabewert einer Methode korrekt zu bestimmen. Hierbei können wir auf die ‚findOldCostume‘ Method zurückgreifen. Was uns folgenden Typen für den Parameter der ersten Funktion übrig lässt.

const createNewMask = (costume: ReturnType<typeof findOldCostume>) => {
    const mask = printer.printMask()
    mask.shape = "circle"
    costume.estimate += 60
    return { ...costume, mask }
}

Nach dem selben Schema passen wir die zweite Methode an:

const createBodyCamera = (costume: ReturnType<typeof findOldCostume>) => {
    const camera = printer.printCamera()
    // It will need painting too
    costume.estimate += 45
    return { ...costume, camera }
}

Die kleine Zusatzaufgabe für den Typ, dass andere „Bibliotheken“ diesen Nutzen könnten, erfolgt ebenfalls nach dem selben Prinzip, da nun alles korrekt typisiert ist:

type AssembleCostume = ReturnType<typeof assembleCostume>;

Meine Lösung könnt ihr ebenfalls hier einsehen: Hier geht’s zur Lösung! (Teil 2)

18310cookie-checkType | Treat (Type or Treat) – Tag 1/5no