No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Alias y tipos literales

15/24
Recursos

Los Alias nos permiten darle un nombre a uno o varios tipos de datos en conjunto. Un ejemplo de como se definen ser铆a as铆:

type UserID = string | boolean | number;

隆Ahora UserID lo podemos usar como si fuese un tipo de dato string, boolean o number!

let dynamicVar: UserID = "300";

dynamicVar = true;
dynamicVar = 200;

Los Union Types que vayamos a utilizar ahora ser谩n menos tediosos de escribir, pues con los Alias podemos utilizar el mismo conjunto de tipos de datos en la definici贸n de varias variables, benefici谩ndonos en escribir menos c贸digo.

type UserID = string | boolean | number;

let dynamicVar: UserID = "300";

function helloUser( userId: UserID ) {
    console.log(`Un saludo al usuario con el n煤mero de id ${userId}`);
}

Nota: la palabra type en los Alias es algo propio de TypeScript.

Tipos Literales (Literal Types)

Gracias a esto podemos definir expl铆cita y literalmente los posibles valores que puede tomar nuestra variable. Por ejemplo:

let shirtSize: "S" | "M" | "L" | "XL";

shirtSize = "M"; //CORRECTO
shirtSize = "S"; //CORRECTO
shirtSize = "qwrty"; //ERROR. No est谩 en las opciones.
shirtSize = "SS"; //ERROR. Letra de m谩s.
shirtSize = "m"; //ERROR. Est谩 en min煤scula.

Definimos que la variable shirtSize pueda ser una de las 4 posibles opciones de valores, que estos sean de tipo string y que est茅n en may煤scula, por tanto, si queremos asignar un valor que no sea exactamente como lo declaramos, TypeScript nos mostrar谩 un error.

Alias + Tipos Literales

Tambi茅n podr铆amos combinarlas para facilitar a煤n m谩s el desarrollo de nuestro programa:

type Sizes = 'S' | 'M' | 'L' | 'XL';

let shirtSize: Sizes;
shirtSize = "M";

function yourSize( userSize: Sizes ){
    console.log(`Tu medida es ${userSize}`);
}

Contribuci贸n creada por: Mart铆n 脕lvarez.

Aportes 32

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

La utilidad de TS me est谩 gustando 馃槂

(()=>{
  /**
   * // definiendo un tipo //!alias type
   */
  type UserID =  string | number | boolean;

  let userId: string | number | boolean;

  function greeting(parametro: UserID){
    return typeof parametro === "string"
    ? console.log("myTextIs (+)>", parametro.toLocaleLowerCase()) : null;
  };

  //? Literal types
  let shirtSize: "S" | "M" | "L" | "XL";
  shirtSize = "S";    ////ok
  shirtSize = "M";    ////ok
  // shirtSize = "s"; //// wrong

  //* lo mismo
  type TSizes =  "SM" | "ME" | "LA" | "2XL";
  let Sizes: TSizes;

  function greet(parametro1: UserID, parametro2: TSizes){
    return typeof parametro1 === "string" 
    ? console.log("Ropa: (+)>", `usuario: ${parametro1.toLocaleLowerCase()}`, `tama帽o: ${parametro2}`) 
    : null;
  };
  greet("Nicolas","2XL");
  greet("Molina","LA");
})();

Por si alguien no sabe:
camelCase (primera min煤scula, y despues sigue en mayusculas)
PascalCase (todo en may煤scula)

Les comparto mis apuntes del Curso de Fundamentos de TypeScript 2020. 馃槃

Literal alias

  • TypeScript permite crear un alias como nombre para un tipo.
  • El alias se puede aplicar tambi茅n a un conjunto o combinaci贸n de tipos.
  • Se usa la palabra reservada type.
  • Nos ayudan a evitar la redundancia en los nombres de tipos.
  • Los podemos usar como un tipo de dato m谩s.

Sintaxis

type TypeName = datatype1 | ... | datatypeN;

Literal types

  • Una variable con un tipo literal puede contener 煤nicamente una cadena del conjunto.
  • Se usan cadenas como 鈥渢ipos鈥, combinados con el s铆mbolo de pipe (鈥檤鈥) entre ellos.
  • Son tipos de datos 鈥減ersonalizados鈥.
  • Lo utilizamos para tener un conjunto acotado de opciones.

Sintaxis

type TypeName = 'datatype1'| ... | 'datatypeN';

TS haciendo lo que JS deber铆a hacer desde el principio. Me cae bien TS. 馃槃

TypeScript es como java y javaScript a la vez

Me est谩 gustando lo que nos ofrece TS 馃槃

Cerca del minuto 2:50 el profe dice que hace uso de camellCase, pero en realidad es PascalCase la forma correcta de llamarlo cuando empieza con mayuscula tengo entendido.

Tambi茅n podemos utilizar el operador typeof para obtener el tipo de un tipo en tiempo de compilaci贸n. Por ejemplo

let y: string = 'hello';
let z: typeof y = 'world';

Ac谩 usamos el operador typeof para obtener el tipo de la variable y y asignarselo a la variable z. Esto significa que z ser谩 de tipo string.

Aqui esta la url del github en la rama de esta clase:

https://github.com/platzi/curso-typescript-fundamentos/tree/13-step

type: herramienta s煤per poderosa de TS.

Literal types es cmo un enumerador de Java

realic茅 este condicional adicional para que al momento de ingresar la talla o tama帽o 鈥渢raduzca鈥 las letras por su especificaci贸n en este caso, (peque帽o, mediano,grande y extra grande),! no es la gran cosa pero quise adicionar esto.
(()=>{
type UserID = string | number | boolean;
let userId: UserID;

// Literal Types
type Sizes = 鈥淪鈥 | 鈥淢鈥 |鈥淟鈥 | 鈥淴L鈥;
let shirtSize: Sizes;
function greeting(userId: UserID, size: Sizes){
if(typeof userId === 鈥榮tring鈥 && size === 鈥楽鈥){
console.log(Usuario: ${userId.toUpperCase()} la talla de tu camisa es peque帽a);
}else if(typeof userId === 鈥榮tring鈥 && size === 鈥楳鈥){
console.log(Usuario: ${userId.toUpperCase()} la talla de tu camisa es mediana);
}else if(typeof userId === 鈥榮tring鈥 && size === 鈥楲鈥){
console.log(Usuario: ${userId.toUpperCase()} la talla de tu camisa es grande);
}else if(typeof userId === 鈥榮tring鈥 && size === 鈥榅L鈥){
console.log(Usuario: ${userId.toUpperCase()} la talla de tu camisa es extra grande );
}else{
console.log(鈥楲a informaci贸n recibida no es correcta鈥)
}
}
greeting(鈥1111鈥,鈥楽鈥);
greeting(鈥1111鈥,鈥榅L鈥);
})();

Alias en TS

Los alias en TS nos ayudan a crear nuestros propios tipos de datos para asi hacer nuestro codigo mas escalable.

// Sin alias
let user = string | number | Object;

function createUser(user: string | number | Object){
  @code...
}

// Con alias
type UserType = string | number | Object

let user: UserType

function createUser(user: UserType){
  @code...
}

Asi tenemos una fuente de verdad en nuestros tipo de datos.
.

Tipos literales

Estos son casi lo mismo, pero aqui podemos costumizar aun mas, ya que agregamos valores especificos

type SizesType = "S" | "XS" | "M" | "L" | "XL" | "XXL"

Asi, cualquier variable con el tipo de dato SizesType va poder elegir solo una de las opciones disponibles.

La creaci贸n de variables personalizadas es muy potente cuando trabajamos con interfaces, tal vez es muy pronto para eso pero para que lo tengan en mente (los casos de uso m谩s comunes).

Excelente capitulo, se pudo ver lo facil que se puede volver manejar diferentes tipos y valores
Esta vaina est谩 super linda, sobre todo los tipos literales.
Siempre me explicaban mal sobre esto en youtube type Direction = "Top" | "left" siempre me pregunte por que eso esta as铆? por que no un string; siempre dec铆an *tu puedes hacer eso y esto* pero jam谩s decian por que puedo hacerlo asi y me generada una duda en la cabeza ya que siempre me gusta saber del por que de todo. y con esta clase ya se exactamente el porque! Gracias profesor!

Wao TypeScript le da un cachetada a JavaScript de como debe comportarse correctamente.

Perm铆teme explicarte sobre TypeScript (TS) y darte algunos ejemplos pr谩cticos.
.
TypeScript es un lenguaje de programaci贸n que ampl铆a la sintaxis de JavaScript a帽adiendo tipos est谩ticos opcionales. Proporciona herramientas para escribir c贸digo m谩s seguro y mantenible al detectar errores durante la compilaci贸n en lugar de tiempo de ejecuci贸n.
.
Una de las caracter铆sticas de TypeScript es la capacidad de definir alias y tipos literales. Perm铆teme explicar cada uno de ellos:
.

  1. Alias: Los alias permiten crear un nombre alternativo para un tipo existente. Esto es 煤til cuando se trabaja con tipos complejos o repetitivos. Para crear un alias, se utiliza la palabra clave type. Aqu铆 tienes un ejemplo:
type Punto = {
  x: number;
  y: number;
};

const punto: Punto = { x: 5, y: 10 };
console.log(punto.x, punto.y); // Salida: 5, 10

En el ejemplo anterior, se crea un alias llamado Punto que representa un objeto con propiedades x e y de tipo number. Luego, se declara una variable punto con el tipo Punto y se le asigna un objeto que cumple con esa estructura.
.

  1. Tipos literales: Los tipos literales permiten restringir una variable a un conjunto espec铆fico de valores. Se representan utilizando uniones de tipos con valores espec铆ficos. Aqu铆 tienes un ejemplo:
type Direcciones = 'Norte' | 'Sur' | 'Este' | 'Oeste';

function mover(direccion: Direcciones) {
  console.log('Moviendo hacia', direccion);
}

mover('Norte'); // Salida: Moviendo hacia Norte
mover('Este');  // Salida: Moviendo hacia Este
mover('Arriba'); // Error: Argumento 'Arriba' no es asignable a los par谩metros de tipo 'Direcciones'

En este ejemplo, se define un tipo literal llamado Direcciones, que solo puede tener los valores 'Norte', 'Sur', 'Este' o 'Oeste'. Luego, se declara una funci贸n mover que acepta un argumento de tipo Direcciones. Al llamar a la funci贸n mover con uno de los valores permitidos, se imprimir谩 el mensaje correspondiente. Sin embargo, si se proporciona un valor que no est谩 en el conjunto permitido, TypeScript mostrar谩 un error en tiempo de compilaci贸n.
.
Estos son solo ejemplos b谩sicos de alias y tipos literales en TypeScript. Ambas caracter铆sticas son muy 煤tiles para mejorar la legibilidad y seguridad del c贸digo. 隆Espero que esto te haya ayudado a comprender mejor TypeScript!

隆Esto est谩 buen铆simo!
鉁嶏笍 鉁嶏笍 鉁嶏笍

Estos Literal Types son la gota que derramaron el vaso! Me encanta TypeScript!

Alias and literal types

En TypeScript, se encuentran com煤nmente conjuntos de tipos que se repiten en un proyecto. Para evitar reescribir estos tipos, debe usar la palabra clave type y definir el conjunto de tipos con su respectivo nombre.

// Ejemplo antes 鉂
let beauty_type: string | number | boolean;

function which_type(userID: string | number | boolean) {
	if (typeof userID == 'string') {
		  console.log('Soy string:', { userID });
	} else if (typeof userID == 'number') {
		  console.log('Soy number:', { userID });
	} else {
		console.log('Soy bool:', { userID });
	}
}

// Refactoring using type 馃憤
type CustomSet = string | number | boolean;
let beuty_type: CustomSet;
function which_type(userID: CustomSet){}

los types se parecen a las interfaces modelo, y los literal types se parecen a los enum

Siempre tuve miedo de aprender TypeScript porque me quitaba lo que amaba de JavaScript, pero ahora me arrepiendo no haber dado el salto mucho antes, TS 鉂わ笍

Wow!!! ten铆a pereza de aprender ts pero es realmente potente este lenguaje de programaci贸n

Me encant贸 esta clase. Empiezo a ver el poder de TS

Me agrada saber que se est谩 poniendo esto del .TS

camelCase
PascalCase
kebab-case
snake_case

crear nuestro propio tipado usando =>
type UserID = string | number | boolean
o tambien se puede usar nuestro tipado personalizado usando =>
type Talle = 鈥楽鈥 | 鈥楳鈥 | 'L鈥
type es una palabra reservada de ts para declarar un tipado

creo que los tipados literales pueden ser muy utiles en lo que es encapsulamiento,no se creo que podria ser una buena herramienta!!!