Alias y tipos literales

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 “tipos”, combinados con el símbolo de pipe (’|’) entre ellos.
• Son tipos de datos “personalizados”.
• 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

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.

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.

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 “traduzca” 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 = “S” | “M” |“L” | “XL”;
let shirtSize: Sizes;
function greeting(userId: UserID, size: Sizes){
if(typeof userId === ‘string’ && size === ‘S’){
console.log(Usuario: ${userId.toUpperCase()} la talla de tu camisa es pequeña);
}else if(typeof userId === ‘string’ && size === ‘M’){
console.log(Usuario: ${userId.toUpperCase()} la talla de tu camisa es mediana);
}else if(typeof userId === ‘string’ && size === ‘L’){
console.log(Usuario: ${userId.toUpperCase()} la talla de tu camisa es grande);
}else if(typeof userId === ‘string’ && size === ‘XL’){
console.log(Usuario: ${userId.toUpperCase()} la talla de tu camisa es extra grande );
}else{
console.log(‘La información recibida no es correcta’)
}
}
greeting(‘1111’,‘S’);
greeting(‘1111’,‘XL’);
})();

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).

✅

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 = ‘S’ | ‘M’ | '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!!!