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)

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

Kommentar verfassen