Taller de introducción a TypeScript para la Comunidad Malandriner

Este es un taller especial para la Comunidad Malandriner de suscriptores de Web Reactiva Premium. A lo largo de este taller, exploraremos las características y beneficios de TypeScript, un lenguaje de programación que extiende JavaScript añadiendo tipado estático. El enlace al taller es aquí.

Gracias por asistir y por sus preguntas a Dani, José Manuel, Borja, Marty, Fernando, Marcos, Sergi, Luis, Tere…

Introducción a TypeScript

TypeScript es un superconjunto de JavaScript desarrollado por Microsoft, que introduce tipos estáticos y otras características avanzadas que mejoran la productividad y la calidad del código. A través de este taller, aprenderás desde los conceptos básicos hasta la creación de interfaces y tipos complejos, con ejemplos prácticos y ejercicios para que puedas aplicarlo en tus proyectos.

Configuración inicial de TypeScript

Para comenzar, es importante tener bien configurado el entorno de desarrollo. Usaremos Visual Studio Code como nuestro editor principal y recomendaremos varias extensiones útiles:

• CodeRunner: Facilita la ejecución de código con una combinación de teclas.
• Quokka: Permite ver los resultados de console.log y otros outputs directamente en el editor.
• PrettyTypeScriptErrors: Embellece los errores de TypeScript para hacerlos más legibles.
• ErrorLens: Muestra errores en el código en tiempo real.

Tecnologías mencionadas en este taller: TypeScript, Visual Studio Code, CodeRunner, Quokka, PrettyTypeScriptErrors, ErrorLens.

Temas tratados en el taller

Tipado de Variables y Funciones

TypeScript permite definir tipos explícitos para variables y funciones, lo que ayuda a evitar errores comunes en tiempo de ejecución. A continuación, se muestra un ejemplo de cómo tipar una variable y una función:

let nombre: string = "Dani";
function sumar(a: number, b: number): number {
  return a + b;
}

Creación y uso de Enums

Los enumerados son útiles para definir un conjunto de valores posibles para una variable. Por ejemplo, para definir las estaciones del año, se puede usar un enum:

enum Seasons {
  Summer,
  Autumn,
  Winter,
  Spring
};

Definición de Tuplas y Arrays tipados

Las tuplas permiten definir un array con un número fijo de elementos de tipos específicos:

let tupla: [string, number] = ["edad", 30];

Para los arrays tipados, podemos usar:

let listaNumeros: number[] = [1, 2, 3, 4, 5];

Tipos literales y alias de tipo

Los tipos literales restringen los valores posibles de una variable a un conjunto específico. Por ejemplo:

type Direccion = "norte" | "sur" | "este" | "oeste";
let direccion: Direccion = "norte";

Un alias de tipo puede combinar múltiples tipos en uno solo:

type ID = number | string;

Uso de any y unknown

El tipo any permite asignar cualquier tipo de valor a una variable, pero puede llevar a problemas en tiempo de ejecución. Es preferible usar unknown cuando no se conoce el tipo exacto.

Aserciones de tipo

Las aserciones de tipo se usan cuando sabemos más sobre el valor que TypeScript:

let valor: any = "este es un string";
let longitud: number = (valor as string).length;

Definición de Interfaces y su Extensión

Las interfaces permiten definir la estructura de un objeto y se pueden extender para añadir más propiedades:

interface Persona {
  nombre: string;
  edad: number;
}

interface Empleado extends Persona {
  salario: number;
}

Comparación entre type e interface

Ambos se usan para definir tipos, pero tienen algunas diferencias. Las interfaces se pueden extender y combinar, mientras que los tipos son más flexibles para definir combinaciones complejas.

Conclusión

TypeScript mejora la calidad del código y la productividad del desarrollador. Con las herramientas y conocimientos adquiridos en este taller, podrás escribir código más seguro y mantenible. ¡Sigue practicando y experimentando con TypeScript en tus proyectos!

Para más detalles y ejercicios, visita el repositorio del taller.