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.

Funciones

TypeScript
Test

Funciones de primera clase

TypeScript
Puzzle

Tipos de utilidad

TypeScript
Puzzle

Clases

TypeScript
Test

OOP y CRUD en TypeScript

TypeScript
Proyecto

Tipos literales

TypeScript
Test

Namespaces

TypeScript
Test

Módulos

TypeScript
Test

Funciones TypeScript

TypeScript
Código

Encapsulación

TypeScript
Puzzle

Interfaces

TypeScript
Puzzle

Funciones puras

TypeScript
Puzzle

Variables y constantes

TypeScript
Código

Funciones flecha

TypeScript
Puzzle

Funciones puras

TypeScript
Test

Control de flujo

TypeScript
Código

Resolución de módulos

TypeScript
Test

Control de flujo

TypeScript
Puzzle

Polimorfismo

TypeScript
Test

Operadores

TypeScript
Test

Funciones flecha

TypeScript
Test

Herencia

TypeScript
Puzzle

Clases y objetos

TypeScript
Código

Clases

TypeScript
Puzzle

Operadores

TypeScript
Puzzle

Encapsulación

TypeScript
Test

Herencia

TypeScript
Test

Funciones

TypeScript
Puzzle

Tipos de unión e intersección

TypeScript
Test

Funciones de alto orden

TypeScript
Puzzle

Inmutabilidad

TypeScript
Puzzle

Interfaces

TypeScript
Test

Funciones de alto orden

TypeScript
Test

Tipos de unión e intersección

TypeScript
Puzzle

Tipos genéricos

TypeScript
Test

Control de flujo

TypeScript
Test

Polimorfismo

TypeScript
Puzzle

Interfaces

TypeScript
Código

Tipos literales

TypeScript
Puzzle

Tipos de utilidad

TypeScript
Test

Tipos genéricos

TypeScript
Puzzle

Inmutabilidad

TypeScript
Test

Herencia de clases

TypeScript
Código

Variables y constantes

TypeScript
Test

Variables y constantes

TypeScript
Puzzle

Funciones de primera clase

TypeScript
Test

Introducción a TypeScript

TypeScript
Test

Tipo de tecnología

Lenguaje

Categoría laboral

Full Stack

Año de lanzamiento

2012

Developers

Microsoft

Todos los módulos de TypeScript

Ver todos los módulos de TypeScript

Otras tecnologías

Vue.js
Vuejs

Vuejs

Frontend

Framework de JS progresivo para construir interfaces de usuario reactivas y modulares.

Selenium

Selenium

Testing / QA (Quality Assurance)

Suite de herramientas open-source para automatizar navegadores web y pruebas de software de interfaz de usuario.

Java

Java

Backend

Lenguaje de programación versátil y multiplataforma.

Seaborn

Seaborn

Ciencia de Datos e Inteligencia artificial

Biblioteca de visualización de datos para Python.

CSharp

CSharp

Backend

Lenguaje de programación de Microsoft para aplicaciones robustas.

Spring Boot
SpringBoot

SpringBoot

Backend

Framework para desarrollo rápido de aplicaciones Java.

NestJS
Nest

Nest

Backend

Framework Node.js para crear aplicaciones escalables y eficientes.

Git
Git

Git

DevOps

Sistema de control de versiones distribuido.

React
React

React

Frontend

Librería framework para frontend interfaces de usuario.

Docker
Docker

Docker

DevOps

Plataforma de contenedores para aplicaciones portátiles.

Go
Go

Go

Backend

Lenguaje de programación eficiente y concurrente creado por Google.

SQL

SQL

Administración de bases de datos

Lenguaje para gestionar bases de datos relacionales.

Tailwind CSS
TailwindCSS

TailwindCSS

Frontend

Framework de utilidades CSS para diseños rápidos y personalizables.

Kotlin
Kotlin

Kotlin

Backend

Lenguaje de programación moderno y seguro para aplicaciones Android.

HTML5
HTML

HTML

Frontend

Lenguaje de marcado para estructurar contenido web.

NumPy
Numpy

Numpy

Ciencia de Datos e Inteligencia artificial

Biblioteca Python para computación científica y matrices.

GNU Bash
Bash

Bash

Administración de sistemas

Intérprete de comandos para sistemas Unix y Linux.

2022-09-27T22:26:51.030457 image/svg+xml Matplotlib v3.6.0, https://matplotlib.org/
Matplotlib

Matplotlib

Ciencia de Datos e Inteligencia artificial

Biblioteca Python para crear gráficos y visualizaciones.

Acceder a todas las tecnologías