¿Qué son los tipos de plantilla literal en Typescript?

Los tipos de literales de plantilla en TypeScript se basan en tipos de literales de string y se pueden expandir en muchas strings mediante uniones. Tienen la misma sintaxis que las strings literales de plantilla de JavaScript, pero se utilizan en ubicaciones de tipos. Cuando se usa con tipos de literales tangibles, un literal de plantilla concatena el contenido para crear un nuevo tipo de literal de string.

Sintaxis: La siguiente es la sintaxis para crear literales de plantilla:

${...}

Nota: ` ` se usa en lugar de «» al crear literales de plantilla. 

Ejemplo 1: concatenación de literales de string con strings.

En el siguiente código, creamos un literal de string y se concatena con otra string en “ ticks, usando la sintaxis ${}. Se forma un nuevo tipo. 

Javascript

type coding = "coding";
type sentence = `i like ${coding}`;
  
var sentence1: sentence = "i like coding";
console.log(sentence1);

Producción:

i like coding coding

Ejemplo 2: Se puede formar un nuevo tipo usando la unión para concatenar el tipo de literales de string con otra string usando la sintaxis de literal de plantilla. El tipo es la colección de todos los literales de string potenciales que podría representar cada miembro de la unión.

Javascript

type Headings = "h1" | "h2" | "h3" | "h4" | "h5";
type Paragraphs = "p";
  
type AllLocaleIDs = `${Headings | Paragraphs}_tag`;

Producción:

escriba AllLocaleIDs = “h1_tag” | “h2_etiqueta” | “h3_etiqueta” | “h4_etiqueta” | “h5_tag” | «p_etiqueta»

Ejemplo 3: Multiplicación cruzada de uniones. En este ejemplo, cruzamos multiplicamos dos uniones. Al usar literales de plantilla cruzamos uniones de multiplicación. 

Javascript

type A = 'a1'|'a2'|'a3';
type B = 'b1'|'b2'|'b3';
  
type concat = `${A}_${B}`;

Producción:

tipo concat = “a1_b1” | “a1_b2” | “a1_b3” | “a2_b1” | “a2_b2” | “a2_b3” | “a3_b1” | “a3_b2” |
“a3_b3”

Referencia: https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

Publicación traducida automáticamente

Artículo escrito por lizzywizzy366 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *