Tutorial de TypeScript básico [SOLUCIONADO]

¿Qué es TypeScript y Por Qué Usarlo?

TypeScript es un superset de JavaScript, lo que significa que es JavaScript con características adicionales. Lo más importante es que introduce un sistema de tipos estáticos, lo cual permite que los desarrolladores puedan escribir código más claro y menos propenso a errores.

Instalación y Configuración Inicial

Para comenzar con TypeScript, primero debes instalar Node.js, ya que viene con npm (node package manager), que es necesario para instalar TypeScript.

Instalación de TypeScript

Ejecuta el siguiente comando en tu terminal:

npm install -g typescript

Copiar

Una vez instalado TypeScript, puedes verificar la versión para asegurarte de que la instalación fue exitosa ejecutando tsc –version.

Compilación de Código TypeScript

Para compilar un archivo TypeScript y convertirlo a JavaScript, utiliza:

tsc nombre-del-archivo.ts

Copiar

Este comando generará un archivo .js con el mismo nombre que podrás ejecutar en cualquier entorno JavaScript.

Configuración del Proyecto

Utiliza el siguiente comando para crear un archivo tsconfig.json, que es el corazón de un proyecto TypeScript, ya que aquí definirás las reglas de compilación y otros ajustes:

tsc --init

Copiar

tsconfig.json te da control sobre cómo y qué parte del código deberá ser compilado.

Tipos Básicos en TypeScript

Los tipos en TypeScript son el pilar fundamental sobre el que se construyen las aplicaciones. TypeScript ofrece varios tipos para aprovechar las características de los tipos estáticos.

Tipos Primitivos

Estos tipos son number, string, boolean, void, null y undefined.

let edad: number = 30;
let nombre: string = "Juan";
let esEstudiante: boolean = true;

Copiar

Arrays y Tuplas

Definir arrays y tuplas es sencillo:

let listaDeNumeros: number[] = [1, 2, 3];
let tupla: [string, number] = ["casa", 9];

Copiar

Any, Unknown y Never

Estos tipos especiales son de gran utilidad cuando trabajamos con escenarios donde los tipos podrían ser dinámicos (any), donde no se sabe el tipo aún (unknown), o funciones que nunca retornan como aquellas que lanzan excepciones (never).

Funciones y Tipos de Retorno

Las funciones en TypeScript mejoran gracias al sistema de tipos que nos permite especificar los tipos de los parámetros y del valor que retornan.

function saludar(nombre: string): string {
  return "Hola, " + nombre;
}

Copiar

Interfaces y Clases

Las interfaces en TypeScript permiten definir la forma de un objeto. Las clases proporcionan una manera elegante de crear objetos y manejar la herencia.

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

class Empleado implements Usuario {
  constructor(public nombre: string, public edad: number) {}
}

let empleado = new Empleado("Laura", 28);

Copiar

Genéricos

Los genéricos ofrecen una forma de crear componentes que trabajan sobre una variedad de tipos en lugar de un solo tipo.

function obtenerElemento<T>(elementos: T[], index: number): T {
  return elementos[index];
}

let numero = obtenerElemento<number>([1, 2, 3], 1); // Devuelve 2

Copiar

Enumeraciones

Las enumeraciones o enums permiten definir un conjunto de constantes nombradas.

enum Color {
  Rojo, Verde, Azul
}
let c: Color = Color.Verde;

Copiar

Construcciones Avanzadas

TypeScript también ofrece tipos de unión, alias de tipos, tipos de intersección, y mucho más, lo que permite escribir código extremadamente flexible y reutilizable.

Compilación Avanzada y Opciones del tsconfig

Configurar adecuadamente las opciones de tu tsconfig.json puede optimizar tu flujo de trabajo y la performance de tu aplicación.

Integración con Herramientas de Desarrollo

TypeScript se integra perfectamente con herramientas modernas de desarrollo, como Webpack, Babel, ESLint, y muchas otras, maximizando así la eficiencia y calidad del código.

Consejos de Mejores Prácticas

Adoptar mejores prácticas es crucial para el desarrollo profesional. Documentación, pruebas, uso de linters y formateadores son solo algunas de las prácticas recomendadas al trabajar con TypeScript.