Quels sont les types de littéraux de modèle
Depuis Typescript 4.1, vous pouvez considérablement améliorer les frappes de vos chaînes. Pour récapituler rapidement, dans Typescript, vous pouvez définir des « types littéraux ». Au lieu de simplement définir une variable en tant que chaîne, vous pouvez restreindre le type à un ensemble spécifique de chaînes autorisées.
// 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";
}
À partir de Typescript 4.1, ce concept a été développé davantage. En vous inspirant des « chaînes littérales de modèle » de Javascript, vous pouvez appliquer la même syntaxe pour vos types littéraux dans Typescript. La principale différence est qu'avec les "Types littéraux de modèle", vous gagnez beaucoup plus de flexibilité, car le type lui-même peut prendre des paramètres pour cette forme - le concept est similaire aux génériques, mais légèrement différent en ce sens qu'il nécessite des valeurs spécifiques.
// 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'
Il y a encore plus avec Typescript 4.3
Au moment où j'écris ces lignes, la version candidate de Typescript 4.3 a été publiée, qui inclut d'autres améliorations des types de littéraux de modèle.
Le système de types est maintenant encore plus dynamique et peut mieux déduire les types corrects pour vous. Ces dernières modifications renforcent la maturité du type de chaîne de modèle.
// 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}`);
Conclusion
Comme vous l'avez vu, Typescript est un langage si puissant lorsqu'il s'agit de définir des types dynamiques. Cela est particulièrement vrai pour les types basés sur des chaînes. Avec les derniers changements de la version 4.3, le système de types peut mieux déduire les types corrects que jamais, ce qui rend le travail avec Typescript juste un plaisir.
