¿Qué son los tipos de literales de plantilla?
Desde TypeScript 4.1, puede mejorar significativamente la mecanografía de sus cadenas. Para resumir rápidamente, en Typescript puede definir los llamados "tipos literales". En lugar de simplemente definir una variable como cadena, puede limitar el tipo a un conjunto específico de cadenas que están permitidas.
// 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";
}
A partir de TypeScript 4.1, este concepto se ha desarrollado aún más. Tomando "Template Literal Strings" de Javascript como inspiración, puede aplicar la misma sintaxis para sus tipos literales en Typecript. La principal diferencia es que con los "Tipos de literales de plantilla", se gana mucha más flexibilidad, ya que el tipo en sí puede tomar parámetros para esta forma; el concepto es similar a los genéricos, pero ligeramente diferente en el sentido de que requiere valores específicos.
// 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'
Hay aún más con Typescript 4.3
Mientras escribo esto, se ha publicado la versión candidata para Typecript 4.3, que incluye más mejoras en los tipos de literales de plantilla.
El sistema de tipos ahora es aún más dinámico y puede inferir mejor los tipos correctos para usted. Estos últimos cambios maduran aún más el tipo de cadena de plantilla.
// 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}`);
Conclusión
Como ha visto, Typescript es un lenguaje tan poderoso cuando se trata de definir tipos dinámicos. Esto es especialmente cierto para los tipos basados en cadenas. Con los últimos cambios en la versión 4.3, el sistema de tipos puede inferir mejor que nunca los tipos correctos, lo que hace que trabajar con TypeScript sea un placer.
