Si ya dominas un poco de JavaScript y estás buscando una forma de escribir código más robusto y con menos errores, TypeScript es el siguiente paso ideal. Este lenguaje desarrollado por Microsoft añade tipado estático y otras herramientas que ayudan a escribir aplicaciones web modernas de forma más segura.

En esta guía para principiantes aprenderás qué es TypeScript, cómo instalarlo, configurarlo y escribir tu primer archivo .ts paso a paso, con ejemplos claros y consejos prácticos para empezar con buen pie.

¿Qué es TypeScript y por qué deberías aprenderlo?

TypeScript es un lenguaje de programación de código abierto desarrollado y mantenido por Microsoft. Es un superconjunto tipado de JavaScript, lo que significa que extiende las capacidades de JavaScript añadiendo tipos estáticos opcionales.

A diferencia de JavaScript, que es dinámicamente tipado, TypeScript permite declarar el tipo de variables, parámetros y funciones, lo que mejora la detección temprana de errores y hace que el desarrollo sea más predecible y mantenible.

Ventajas de usar TypeScript en proyectos web

• Detección temprana de errores: los errores de tipo se detectan en tiempo de compilación, no en ejecución.

• Mejor autocompletado y refactorización: gracias al sistema de tipos, los editores de código ofrecen sugerencias más precisas.

• Interoperabilidad con JavaScript: puedes ir adoptando TypeScript poco a poco dentro de proyectos existentes.

• Mayor organización: el uso de interfaces, tipos y módulos fomenta una estructura más clara del proyecto.

Cómo empezar con TypeScript

Instalación de TypeScript

Para comenzar a utilizar TypeScript, primero debemos instalarlo. Podemos hacerlo a través de npm (Node Package Manager) con el siguiente comando:

npm install -g typescript

Este comando instala TypeScript globalmente en nuestro sistema, permitiéndonos acceder a su compilador desde cualquier proyecto.

Configuración inicial

Una vez instalado TypeScript, podemos crear un archivo de configuración tsconfig.json en la raíz de nuestro proyecto. Este archivo es fundamental, ya que define cómo queremos que el compilador de TypeScript procese nuestro código.

Podemos generarlo mediante el siguiente comando:

tcs --init

Ejemplo de un archivo tsconfig.json básico:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

Este archivo indica al compilador que queremos que nuestro código sea compatible con ES5 y que utilizamos el sistema de módulos CommonJS, entre otras opciones.

Escribiendo nuestro primer archivo TypeScript

Creando un archivo TypeScript

Vamos a crear un archivo llamado main.ts en la carpeta src de nuestro proyecto. Este archivo contendrá nuestro primer código en TypeScript.

Declarando tipos

Una de las características principales de TypeScript es la posibilidad de declarar tipos. Veamos un ejemplo simple:

function suma(a: number, b: number): number {
  return a + b;
}
const resultado = suma(2, 3);
console.log(`El resultado es ${resultado}`);

En este ejemplo, hemos declarado que la función suma recibe dos parámetros de tipo number y devuelve un valor de tipo number. Esto ayuda a prevenir errores como intentar pasar una cadena de texto en lugar de un número.

Compilando el código TypeScript

Para compilar nuestro archivo TypeScript y convertirlo en JavaScript, utilizamos el siguiente comando:

                <pre>tsc</pre>

Este comando busca el archivo tsconfig.json y compila todos los archivos TypeScript especificados en la configuración. El resultado es un archivo JavaScript que podemos ejecutar en cualquier entorno que soporte JavaScript.

Modo Observador (Watch mode)

El modo observador o watch mode en TypeScript es una funcionalidad que permite al compilador monitorear archivos .ts para detectar cambios automáticamente. Cuando se realizan modificaciones en un archivo, el compilador recompila el código de inmediato, facilitando un flujo de desarrollo más ágil.

Cómo habilitar el modo observador:

1. Usar la línea de comandos: Puedes iniciar el modo observador utilizando el comando tsc -w o tsc --watch en la terminal. Esto comenzará a observar todos los archivos TypeScript en tu proyecto y recompilará cuando detecte un cambio.
2. Configuración en tsconfig.json: También puedes configurar el modo observador directamente en el archivo tsconfig.json usando la opción "watch": true.

Mejores prácticas con TypeScript

Uso de interfaces

Las interfaces en TypeScript nos permiten definir contratos para nuestros objetos. Esto es especialmente útil cuando trabajamos en proyectos grandes con muchos colaboradores.

Ejemplo de una interfaz:

interface Persona {
  nombre: string;
  edad: number;
}
function saludar(persona: Persona): void {
  console.log(`Hola, ${persona.nombre}. Tienes ${persona.edad} años.`);
}
const juan: Persona = { nombre: "Juan", edad: 30 };
saludar(juan);

Tipos personalizados

TypeScript nos permite definir nuestros propios tipos personalizados utilizando la palabra clave type. Esto es útil para crear alias de tipos complejos.

Ejemplo de tipos personalizados:

type ID = number | string;
function imprimirID(id: ID): void {
  console.log(`El ID es: ${id}`);
}
imprimirID(123);
imprimirID("abc123");

Uso de módulos

TypeScript soporta módulos, lo que nos permite dividir nuestro código en archivos más pequeños y manejables. Esto es especialmente útil para mantener el código limpio y organizado.

Ejemplo de uso de módulos:

// archivo math.ts
export function multiplicar(a: number, b: number): number {
  return a * b;
}

// archivo main.ts
import { multiplicar } from './math';
const resultado = multiplicar(4, 5);
console.log(`El resultado es ${resultado}`);

Preguntas frecuentes (FAQs)

¿Necesito aprender JavaScript antes de aprender TypeScript? Sí, es altamente recomendable tener una comprensión básica de JavaScript antes de aprender TypeScript, ya que TypeScript se basa en JavaScript y extiende su funcionalidad.

¿TypeScript es compatible con todos los navegadores? Sí, TypeScript se compila a JavaScript, que es compatible con todos los navegadores modernos.

¿Es TypeScript más lento que JavaScript? No, TypeScript se compila a JavaScript antes de ser ejecutado. El rendimiento del código final es el mismo que si se hubiera escrito en JavaScript puro.