Was sind Vorlagen-Literaltypen?
Seit Typescript 4.1 können Sie die Eingaben für Ihre Strings erheblich verbessern. Um es kurz zusammenzufassen: In Typescript können Sie sogenannte „Literal Types“ definieren. Anstatt eine Variable nur als Zeichenfolge zu definieren, können Sie den Typ auf einen bestimmten Satz zulässiger Zeichenfolgen eingrenzen.
// Define a mutable string as 'Literal Type'.
let key: "name" | "department" = "name";
// This works, as 'department' is part of the type.
key = "department";
// Won't work, as it's not define in the union type.
key = "company";
// Of course, the same applies for functions.
function getKey(): "name" | "department" {
return Math.random() <= 0.5 ? "name" : "department";
}
Ab Typescript 4.1 wurde dieses Konzept weiterentwickelt. Indem Sie „Template Literal Strings“ von Javascript als Inspiration nehmen, können Sie die gleiche Syntax für Ihre Literaltypen in Typescript anwenden. Der Hauptunterschied besteht darin, dass Sie mit „Vorlagenliteraltypen“ viel mehr Flexibilität gewinnen, da der Typ selbst Parameter für diese Form übernehmen kann – das Konzept ähnelt dem von Generics, unterscheidet sich jedoch geringfügig darin, dass bestimmte Werte erforderlich sind.
// Define a Literal Type
type State = "ready";
// Nice, isn't it? As in Javascript's
// 'template literal strings', we can
// reuse the same syntax for TS.
//
// The create type here is now 'Key-ready'.
type Key = `key-${State}`;
// This of course works for union types as well.
// Let's take these non-descriptive types for a
// quick demo:
type GraphState = "sleep" | "ready" | "error";
type MachineState = "booting" | "running";
// And here's the 'template literal type':
type EntityState = `ES-${GraphState | MachineState}`;
// The possible combinations therefore
// work out like this:
//
// type EntityState = 'ES-sleep'
// | 'ES-ready'
// | 'ES-error'
// | 'ES-booting'
// | 'ES-running'
Es gibt noch mehr mit Typescript 4.3
Während ich dies schreibe, wurde der Release Candidate für Typescript 4.3 veröffentlicht, der weitere Verbesserungen an Vorlagenliteraltypen enthält.
Das Typensystem ist jetzt noch dynamischer und kann die richtigen Typen für Sie besser ableiten. Diese neuesten Änderungen reifen den Template-String-Typ weiter.
// This example is taken 1:1 from
// Typescript's 4.3 announcement.
// Please check out the link in the
// addendum to see all examples!
declare let s: string;
declare function f<T extends string>(x: T): T;
// Previously: string
// Now : `hello-${string}`
let x2 = f(`hello ${s}`);
Fazit
Wie Sie gesehen haben, ist Typescript eine so mächtige Sprache, wenn es um die Definition dynamischer Typen geht. Dies gilt insbesondere für zeichenfolgenbasierte Typen. Mit den neuesten Änderungen in Version 4.3 kann das Typsystem besser denn je auf die richtigen Typen schließen, was die Arbeit mit Typescript zum Vergnügen macht.
