TypeScript

Curso de programación con TypeScript

TypeScript, el superset de JavaScript que mejora la seguridad y la escalabilidad del código. Aprende a desarrollar con TypeScript hoy.

Aprende TypeScript GRATIS y certifícate

TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft que se basa en JavaScript. Añade tipado estático opcional y otras características avanzadas al lenguaje, lo que facilita el desarrollo de aplicaciones grandes y complejas. Al compilarse, TypeScript se convierte en JavaScript estándar, por lo que puede ejecutarse en cualquier entorno que soporte JavaScript.

¿Qué es TypeScript?

TypeScript es un superconjunto de JavaScript que incorpora tipos estáticos y herramientas de desarrollo más robustas. Permite detectar errores en tiempo de compilación, mejorar la legibilidad del código y facilitar el mantenimiento a largo plazo. Es especialmente útil en proyectos a gran escala donde la consistencia y la escalabilidad son fundamentales.

Ventajas de utilizar TypeScript

  • Tipado estático: Ayuda a identificar errores antes de ejecutar el código.
  • Mejor autocompletado: Los editores pueden proporcionar sugerencias más precisas.
  • Interfaces y clases avanzadas: Facilitan la programación orientada a objetos.
  • Compatibilidad con JavaScript: Todo código JavaScript válido es también válido en TypeScript.

Instalación de TypeScript

Para instalar TypeScript, necesitas tener Node.js y npm instalados. Luego, puedes instalar el compilador de TypeScript de manera global:

npm install -g typescript

Para verificar la instalación:

tsc --version

Configuración inicial

Archivo tsconfig.json

Este archivo configura el comportamiento del compilador de TypeScript. Puedes generarlo automáticamente con:

tsc --init

Ejemplo básico de tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

Sintaxis básica y tipos

Tipos primitivos

  • string
  • number
  • boolean
  • any
  • void
  • null y undefined

Declaración de variables

let mensaje: string = "Hola, TypeScript";
let numero: number = 42;
let esActivo: boolean = true;

Arreglos y tuplas

Arreglos

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

Tuplas

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

Enums

enum Color {
  Rojo,
  Verde,
  Azul
}

let colorFavorito: Color = Color.Verde;

Funciones en TypeScript

Tipado de parámetros y retorno

function sumar(a: number, b: number): number {
  return a + b;
}

Parámetros opcionales y por defecto

function construirNombre(nombre: string, apellido?: string): string {
  return apellido ? `${nombre} ${apellido}` : nombre;
}

Funciones flecha

const multiplicar = (x: number, y: number): number => x * y;

Interfaces

Las interfaces definen contratos para clases y objetos.

interface Persona {
  nombre: string;
  edad: number;
  saludar(): void;
}

let juan: Persona = {
  nombre: "Juan",
  edad: 25,
  saludar() {
    console.log(`Hola, me llamo ${this.nombre}`);
  }
};

Clases y herencia

Clases

class Animal {
  nombre: string;

  constructor(nombre: string) {
    this.nombre = nombre;
  }

  mover(distancia: number = 0) {
    console.log(`${this.nombre} se movió ${distancia} metros.`);
  }
}

Herencia

class Perro extends Animal {
  ladrar() {
    console.log("¡Guau!");
  }
}

const miPerro = new Perro("Fido");
miPerro.ladrar();
miPerro.mover(10);

Modificadores de acceso

  • public: Accesible desde cualquier lugar.
  • private: Solo accesible dentro de la clase.
  • protected: Accesible dentro de la clase y clases derivadas.
class Persona {
  private dni: string;
  public nombre: string;

  constructor(nombre: string, dni: string) {
    this.nombre = nombre;
    this.dni = dni;
  }

  protected mostrarDNI() {
    console.log(`Mi DNI es ${this.dni}`);
  }
}

Generics (Genéricos)

Permiten crear componentes que funcionan con varios tipos.

function identidad<T>(arg: T): T {
  return arg;
}

let salida = identidad<string>("Hola");

Módulos y espacios de nombres

Módulos

Los módulos ayudan a organizar el código y a reutilizarlo.

// en archivo matematicas.ts
export function sumar(a: number, b: number): number {
  return a + b;
}

// en archivo principal.ts
import { sumar } from './matematicas';

console.log(sumar(2, 3));

Espacios de nombres

Agrupan código bajo un mismo identificador.

namespace Geometria {
  export namespace Areas {
    export function cuadrado(lado: number): number {
      return lado * lado;
    }
  }
}

let area = Geometria.Areas.cuadrado(5);

Tipos avanzados

Union Types

Permiten que una variable tenga más de un tipo.

let identificador: number | string;
identificador = 10;
identificador = "ABC123";

Type Aliases

Definen nombres personalizados para tipos.

type ID = number | string;

let usuarioID: ID = 123;

Compilación y herramientas

Compilación manual

tsc archivo.ts

Compilación automática

Usando el modo watch:

tsc archivo.ts -w

Integración con bundlers

TypeScript se integra bien con herramientas como Webpack o Parcel para la construcción de aplicaciones.

Integración con librerías JavaScript

Para utilizar librerías escritas en JavaScript, es posible instalar sus definiciones de tipos.

npm install @types/lodash

Luego, puedes importarlas con seguridad de tipos:

import * as _ from 'lodash';

_.chunk(['a', 'b', 'c', 'd'], 2);

Configuración avanzada

Strict Mode

Activar el modo estricto en tsconfig.json ayuda a detectar más errores.

{
  "compilerOptions": {
    "strict": true
  }
}

Decoradores

Característica experimental que permite añadir metadatos a clases y miembros.

function log(constructor: Function) {
  console.log(`Clase creada: ${constructor.name}`);
}

@log
class MiClase {
  // ...
}

Buenas prácticas

  • Usar tipado estricto: Evita errores y mejora la legibilidad.
  • Evitar any cuando sea posible: Utilizar tipos específicos.
  • Organizar el código en módulos: Facilita el mantenimiento.
  • Documentar el código: Ayuda a otros desarrolladores a entender la intención.
  • Mantener actualizadas las dependencias: Evita problemas de compatibilidad.

Recursos adicionales

Aprende TypeScript GRATIS online

Tutoriales de TypeScript

Aprende TypeScript con tutoriales de programación en TypeScript.

Ejercicios de programación de TypeScript

Evalúa tus conocimientos en TypeScript con ejercicios de programación TypeScript de tipo Test, Puzzle, Código y Proyecto con VSCode.

Tipo de tecnología

Lenguaje

Categoría laboral

Full Stack

Año de lanzamiento

2012

Developers

Microsoft

Todos los módulos del curso de TypeScript

Ver todos los módulos de TypeScript

Otras tecnologías

Acceder a todas las tecnologías