Auch am dritten Tag gibt es wieder zwei Challenges (Beginner und Intermediate). Zunächst blicken wir wie die Tage zuvor auf die Beginner Challenge. In dieser war es wichtig, das Konzept der String Literals zu kennen und anwenden zu können.
Demnach ist die Aufgabe wie folgendermaßen lösbar:
type Unit = 'in' | 'cm';
type ValidNumbers = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
type Length = `${ValidNumbers}${number | ''}${Unit}` | '0';
function req(input: Length) {
// Implementierung ist hier nicht von belangen
}Intermediate
Die Intermediate Challenge hatte es jedoch etwas in sich. Wir sollten zunächst ein String Literal zusammenbauen in dem wir ein Parameter in ‚Uppercase‘ (Großbuchstaben) erzeugen.
Hierfür kann die Typisierung des String Interfaces angepasst werden. Damit TypeScript weiß, dass von der toUpperCase Method ein ‚Uppercase<T>‘ zurück kommt. Damit ist die Lösung wie folgt:
interface String {
toUpperCase<T extends string>(this: T) : Uppercase<T>
}
type Title<T extends string> = `<spooky>${Uppercase<T>}</spooky>`
function makeTitle<T extends string>(str: T): Title<T> {
return `<spooky>${str.toUpperCase()}</spooky>`
}Der zweite Teil der Challenge dreht sich darum ein Objekt dynamisch mit Hilfe der ’split‘ Method zu erzeugen und dabei nicht die Typen zu verlieren. Werfen wir erst ein Blick auf die Lösung bevor wir näher darauf eingehen:
interface String {
split<T extends string, U extends string, V extends string>(separator: string): [T, U, V]
}
function setupFooter<Name extends string, Date extends string, Address extends string>(str: `${Name},${Date},${Address}`): {name: Name, date: Date, address: Address} {
// validate string etc
return {
name: str.split<Name, Date, Address>(",")[0],
date: str.split<Name, Date, Address>(",")[1],
address: str.split<Name, Date, Address>(",")[2]
}
}Wie zu erkennen ist, ist auch hier wieder ein möglicher Weg, das String Interface zu seinen Gunsten anzupassen. Dabei ist hier wichtig, dass wir die drei Generics ‚Name‘, ‚Date‘ und ‚Address‘ in das zurück kommende Array aufnehmen. Somit ist es TypeScript möglich, die Typen weiterhin zu behalten und die Aufgabe ist damit gelöst.