Guía rápida de TypeScript Parte 1: Conoce las variables y los tipos 😎

TypeScript es uno de los lenguajes más populares de la web, pero sabes ¿por qué debemos saber TypeScript? y ¿cómo funciona? Acá te explicamos los primeros pasos rápidamente 😎⚡

TypeScript es un superconjunto de JS, algunos dicen que es sólo un JavaScript con Tipos...

#TypeScript es un lenguaje "tipado" tanto para front como backend, donde se maneja un sistema de tipos estructural, es decir, sólo importan las formas de los tipos y espera una indicación del tipo de dato de un valor.

Si dominas JavaScript no deberás tener problemas para utilizar TypeScript y, si no, verás que no es tan difícil ☺️

Cuando un proyecto empieza a crecer en complejidad, el no tener tipos puede causar problemas al momento de ejecutar el código, la finalidad de TypeScript es evitar estos problemas manteniendo la flexibilidad de JS agregándole tipos.

TypeScript también añade un paso de compilación adicional que logra convertir su código #TS a JS, permitiéndole ser ejecutado en el navegador.

Pero ¿cómo lo logra? TypeScript proporciona un compilador, llamado transpilador que detecta e identifica como error algo que le parezca extraño, por ejemplo, errores de tipos, (más adelante te explicamos cómo funciona, pero por ahora digamos que genera un JavaScript más limpio).

TypeScript

TALK DE LA SEMANA

¿Cómo iniciar a programar en TypeScript?

Primero lo primero, hay que instalarlo, existen dos formas de instalar TypeScript:

• Utilizando npm.

 npm i -g typescript

• Instalando el plugin de TypeScript en Visual Studio Code.

Visual Studio Code incluye TypeScript por default

Declaración de Variables en TypeScript

TypeScript sigue las mismas reglas que #JavaScript para las declaraciones de variables. Pero de todas maneras te damos un rápido repaso:

• Declarar variables usando var, (al igual que en JavaScript ya no es recomendable).
  

• Las declaraciones let siguen un alcance de bloque, por lo que no se pueden leer ni escribir antes de ser declaradas.
  

• El compilador de TS dará error cuando las variables con el mismo nombre se declaren varias veces en el mismo bloque usando let.
  

• De manera similar, el compilador dará un error si declaramos una variable que ya se pasó como argumento a la función:

 function letDemo(a: number ) { 
     let a:number = 10 ; //Compiler Error: TS2300: Duplicate..

• Para variables donde su valor no se puede cambiar, usa const.
  

• const tiene el mismo alcance que let
  

• Y las variables const deben declararse e inicializarse en una sola declaración.

¿Qué significan los "Tipos" en TypeScript?

Sí, eso de tipos por aquí y por allá y hasta en el mismo nombre del lenguaje <TypeScript>... No te preocupes aquí te explicamos ¿qué son los tipos?

En programación, un tipo es un atributo que indica con qué datos vas a trabajar, esto es importante para conocer qué operaciones pueden realizar los datos, teniendo en cuenta esto, TypeScript manejará estos tipos de forma estática sin permitir que sean cambiandos.

Por ejemplo:

Un número es un dato de tipo number, y una cadena de letras o caracteres es tipo string y así... por lo que cuando se asignen, usen y retornen el tipo deberá ser el mismo, si una variable es de un tipo definido NO SE LE PUEDE CAMBIAR, no está permitido y en este lenguaje marcará error.

En TypeScript no es necesario declarar el tipo de la variable, lo puedes hacer, pero también puedes sólo darle el valor y por inferencia Typescript le asignará el Tipo correspondiente.

TypeScript infiere tipos de variables cuando no hay información explícita disponible.

Los tipos son inferidos en TypeScript cuando:

• Las variables se inicializan
  

• Los valores predeterminados se establecen para los parámetros.
  

• Una función no tiene un tipo de return explícito.

¿Cuáles son los Tipos de Datos básicos en TypeScript?

• Boolean

 const isValid: boolean = true;

• Number

 const varN = 0;
 const varN1: number = 0;

• String

 const firstName: 'Kelly';
 const firstName: string = 'Kelly';

• Arrays

 const names: string[] = ['Kelly', 'Juan', 'Manuel'];
 const Pets: Array<string> = ['Puca', 'Garu', 'Bobby'];

• Tuplas

 let qs: [Amanda, Amelia, Amely];
 let tupla: [string, number, string] = ['Kelly', 123, 'Manuel'];

• Enum: Con respecto a Enum, existen varios tipos: Numeric, String, Heterogeneous.

En el siguiente video te explicamos todos los anteriores y algunos ejemplos sobre los Enum:

Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.

• Unknown es para valores desconocidos, cuando no sabemos el tipo de lo que estamos trabajando. Este nuevo tipo superior es la contraparte segura del tipo Any.

Además, unknown no permite que se pueda re-asignar, evitando la propagación de datos inconsistentes.

 let value: unknown;
 
 value = true; // OK
 value = 42; // OK
 value = "Hello World"; // OK
 value = []; // OK
 value = {}; // OK
 value = Math.random; // OK
 value = null; // OK
 value = undefined; // OK
 value = new TypeError(); // OK
 value = Symbol("type"); // OK
 
 // Todas las asignaciones a value se consideran correctas.

• Any

 let anyVar: any = 'Hello World';
 anyVar = 89;
 anyVar = false;

Se debe tener cuidado con el tipo Any, es un escape del sistema de tipos.

TS nos permite realizar cualquier operación que queramos con el tipo Any sin ninguna verificación de antemano.

ⓘ El tipo Any hace que TypeScript se comporte de la misma manera que JS, sin ninguna revisión estática de los tipos. Y... ...Para una mejor estructura del código, se debe evitar usar any.

• Void

 // Con strictNullChecks = true
 let a: void = undefined;

 // Con strictNullChecks = false
 let a: void = undefined;
 let b: void = null;

• Null/Undefined

 // Con strictNullChecks = true
 let a: null = null;

 // Con strictNullChecks = false
 let a: null = null;
 let b: undefined = null;

• Never

 let a: never;

 function stuck(): never {
     while (true) {
     }
 }

• Objects

 const obj0 = { name: 'Kelly' };
 const obj1: object = { id: 1, name: 'Juan'};

Vamos a revisar algunos ejemplos sobre la asignación y errores de los tipos anteriores:

Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.

Aserción de Tipo en TypeScript conocido como Type Assertions

La aserción de tipo le permite al #desarrollador "ayudarle" a TypeScript para reconocer un tipo que no está explícito y decirle al compilador que no lo infiera, este proceso no tiene ningún efecto en el tiempo de ejecución, es simplemente una forma de conocer el tipo de variable.

let codeNumber: any = 123;
let employeeCode = <number> codeNumber;

console.log(typeof(employeeCode)); //Output: number

Hay dos formas de hacer una aserción de tipo en TypeScript:

• Usando la sintaxis de corchete angular <>.

let employeeCode = <number> codeNumber;

• Usando la sintaxis 'as', como palabra clave

let employeeCode = codeNumber as number;

Ambas sintaxis son equivalentes y podemos usar cualquiera de estas sintaxis de aserciones de tipo. Sin embargo, al tratar con JSX en TypeScript, sólo se permite la sintaxis as.

En la siguiente parte de esta miniserie de TypeScript: Guía rápida de TypeScript: Entendiendo Interfaces y sus propiedades, aprenderemos a crear tipos personalizados, y a definir la estructura de los objetos.

---

¡Gracias por leer!

meltstudio.co

📍 Conéctate con nosotros en instagram👇