Introducción a TypeScript - Tutorial TypeScript | TechLead

¿Qué es TypeScript?

TypeScript es un lenguaje de programación fuertemente tipado que se basa en JavaScript. Desarrollado por Microsoft, agrega tipado estático opcional, clases, interfaces y otras características que te ayudan a escribir código más robusto y mantenible.

¿Por qué TypeScript?

Detecta errores temprano: Encuentra errores en tiempo de compilación, no en tiempo de ejecución
Mejor soporte del IDE: Autocompletado, refactorización y navegación
Auto-documentado: Los tipos sirven como documentación en línea
Refactorización más segura: Cambia el código con confianza gracias al chequeo de tipos
Colaboración en equipo: Contratos claros entre módulos

TypeScript vs JavaScript

// JavaScript - sin seguridad de tipos
function greet(name) {
  return "Hello, " + name.toUpperCase();
}

greet("Alice");    // Funciona bien
greet(42);         // Error en tiempo de ejecución: toUpperCase no es una función
greet(undefined);  // ¡Error en tiempo de ejecución!

// TypeScript - seguridad de tipos
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}

greet("Alice");    // Funciona bien
greet(42);         // Error de compilación: el argumento debe ser string
greet(undefined);  // ¡Error de compilación!

Configurar TypeScript

Instalación

# Instalar TypeScript globalmente
npm install -g typescript

# O instalarlo en tu proyecto
npm install --save-dev typescript

# Verificar versión
tsc --version

Inicializar un proyecto

# Crear un nuevo directorio
mkdir my-ts-project
cd my-ts-project

# Inicializar npm
npm init -y

# Inicializar TypeScript (crea tsconfig.json)
npx tsc --init

tsconfig.json básico

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Tu primer archivo TypeScript

// src/index.ts

// Anotaciones de tipo básicas
let message: string = "Hello, TypeScript!";
let count: number = 42;
let isActive: boolean = true;

// Función con tipos
function add(a: number, b: number): number {
  return a + b;
}

// Tipo de array
let numbers: number[] = [1, 2, 3, 4, 5];

// Tipo de objeto
let user: { name: string; age: number } = {
  name: "Alice",
  age: 30
};

console.log(message);
console.log(add(10, 20));
console.log(user.name);

Compilar y ejecutar

# Compilar TypeScript a JavaScript
npx tsc

# Ejecutar el JavaScript compilado
node dist/index.js

# O usar ts-node para ejecutar directamente
npx ts-node src/index.ts

TypeScript con React

# Crear app de React con TypeScript
npx create-react-app my-app --template typescript

# O con Vite
npm create vite@latest my-app -- --template react-ts

# O con Next.js
npx create-next-app@latest my-app --typescript

Inferencia de tipos

TypeScript a menudo puede inferir tipos automáticamente:

// TypeScript infiere el tipo a partir del valor
let name = "Alice";        // inferido como string
let age = 30;              // inferido como number
let isStudent = true;      // inferido como boolean

// Tipo de retorno inferido
function multiply(a: number, b: number) {
  return a * b;  // tipo de retorno inferido como number
}

// Inferencia en arrays
let fruits = ["apple", "banana"];  // inferido como string[]

// Inferencia en objetos
let person = {
  name: "Bob",
  age: 25
};  // inferido como { name: string; age: number }

Buena práctica

Deja que TypeScript infiera los tipos cuando sea posible. Solo agrega anotaciones explícitas cuando:

• El tipo no se puede inferir (parámetros de funciones)
• Quieres ser explícito para documentación
• Quieres un tipo más amplio de lo que se inferiría

Puntos clave

• TypeScript añade tipado estático a JavaScript
• Detecta errores en tiempo de compilación, no en tiempo de ejecución
• Ofrece mejor soporte del IDE y autocompletado
• Compila a JavaScript plano
• La inferencia de tipos reduce la necesidad de anotaciones explícitas