Fundamentos de TypeScript 馃| #8: Tipos Literales

Cristian Fernando - Jan 18 '22 - - Dev Community

Como vimos ya TypeScript soporta la uni贸n de tipos para que una variable pueda tener varios tipos de datos diferentes.

Los Tipos Literales son b谩sicamente lo mismo, pero lo limitamos por lo general, a valores concretos, por ejemplo:

let operaciones:string = "suma";
Enter fullscreen mode Exit fullscreen mode

operaciones soporta cualquier string, es este caso la cadena "suma"

En el 煤ltimo ejemplo operaciones puede contener "resta", "multiplicacion" o "division", como tambi茅n "manzana", "payaso" o "tomate", todos son cadenas v谩lidas, pero no todas son cadenas apropiadas para nuestra variable. Por ello podemos usar Tipos Literales para limitar aun m谩s los valores que puede admitir la variable operaciones.

Veamos otro ejemplo:
Tenemos una funci贸n concatOrSumValues que concatena los valores si son string y los suma si son number:

function concatOrSumValues(value1:number | string, value2:number | string, placeholder:string = 'to-sum'):number | string {
  let res;
  if(placeholder === 'to-sum'){
    res = +value1 + +value2
  }else{
    res = value1.toString() +  value2.toString();
  }
  return res;
}

console.log(concatOrSumValues(2,2)); //4
console.log(concatOrSumValues("2","2", 'to-concat')); // "22"
Enter fullscreen mode Exit fullscreen mode

La funci贸n depende del par谩metro placeholder, que por defecto es to-sum ergo la funci贸n sumar谩 los valores por defecto.

Pero placeholder puede recibir cualquier cadena, 驴c贸mo podemos limitarlo a que solo pueda recibir to-sum para la suma, y to-concat para la concatenaci贸n? Ac谩 entran los Tipos Literales.

Podr铆amos hacer algo como esto:

type StringOrNumber = string | number; //uni贸n de tipos
type PlaceholderOperation = 'to-sum' | 'to-concat' // uni贸n de tipos literales

function concatOrSumValues(value1:StringOrNumber, value2:StringOrNumber,placeholder:PlaceholderOperation = 'to-sum'):StringOrNumber {
  let res;
  if(placeholder === 'to-sum'){
    res = +value1 + +value2
  }else{
    res = value1.toString() +  value2.toString();
  }
  return res;
}

console.log(concatOrSumValues(2,2)); // 4
console.log(concatOrSumValues("2","2", 'to-concat')); // '22'
console.log(concatOrSumValues("3","3", 'to-conca')); // Argument of type '"to-conca"' is not assignable to parameter of type 'PlaceholderOperation'
Enter fullscreen mode Exit fullscreen mode

PlaceholderOperation solo puede recibir 2 cadenas espec铆ficas: to-sum o to-concat, cualquier otro string ser谩 un error.

Conclusiones

  • Los tipos literales reducen m谩s los posibles valores que puede aceptar una variable.
  • Son muy comunes y muy usados para aprovechar al m谩ximo los beneficios de TypeScript.

Referencias

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .