TypeScript

TypeScript

Tutorial TypeScript: Introducción a TypeScript

TypeScript introducción: primeros pasos. Aprende los conceptos básicos y da tus primeros pasos en TypeScript con ejemplos detallados.

Aprende TypeScript y certifícate

¿Qué es TypeScript y por qué aprenderlo?

TypeScript es un lenguaje de programación de código abierto desarrollado y mantenido por Microsoft. Técnicamente, podemos definirlo como un superconjunto de JavaScript que añade tipado estático opcional y otras características avanzadas al lenguaje.

Cuando escribimos código en TypeScript, este pasa por un proceso de compilación que lo transforma en JavaScript estándar, permitiendo que se ejecute en cualquier entorno donde JavaScript funcione: navegadores, Node.js, Deno, o cualquier otro runtime de JavaScript.

Fundamentos de TypeScript

La principal característica que distingue a TypeScript es su sistema de tipos. Mientras que en JavaScript las variables pueden cambiar de tipo durante la ejecución del programa, TypeScript nos permite definir explícitamente qué tipo de datos puede contener cada variable, parámetro o valor de retorno.

Veamos un ejemplo básico:

// JavaScript
function add(a, b) {
  return a + b;
}

// TypeScript
function add(a: number, b: number): number {
  return a + b;
}

En el ejemplo de TypeScript, estamos especificando que:

  • El parámetro a debe ser un número
  • El parámetro b debe ser un número
  • La función debe retornar un número

Esta información de tipos se utiliza durante el desarrollo para detectar errores potenciales, pero desaparece cuando el código se compila a JavaScript.

¿Por qué aprender TypeScript?

Existen varias razones convincentes para invertir tiempo en aprender TypeScript:

  • 1. Detección temprana de errores

TypeScript puede identificar muchos errores comunes durante el desarrollo, antes de ejecutar el código:

// Esto generaría un error en tiempo de compilación
const user = { name: "John", age: 30 };
console.log(user.email); // Error: Property 'email' does not exist on type '{ name: string; age: number; }'
  • 2. Mejor experiencia de desarrollo

El sistema de tipos proporciona autocompletado inteligente y documentación integrada en el editor:

const user = {
  name: "John",
  age: 30,
  greet() {
    return `Hello, my name is ${this.name}`;
  }
};

// Al escribir 'user.', el editor sugerirá name, age y greet
user.
  • 3. Código más mantenible

En proyectos grandes, TypeScript facilita enormemente los refactors y cambios en la base de código. Si modificas la estructura de un objeto, el compilador te mostrará todos los lugares donde necesitas actualizar el código.

  • 4. Documentación implícita

Los tipos actúan como una forma de documentación que siempre está actualizada:

interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "editor" | "viewer";
  lastLogin?: Date; // El ? indica que es opcional
}

function sendWelcomeEmail(user: User): void {
  // La firma de la función documenta exactamente qué espera recibir
}
  • 5. Adopción progresiva

No es necesario reescribir todo el código de una vez. TypeScript permite una adopción gradual, pudiendo comenzar a usarlo en partes específicas de un proyecto existente.

TypeScript en la práctica

Para ilustrar mejor cómo TypeScript mejora el desarrollo, veamos un ejemplo práctico:

// Definimos un tipo para representar un producto
interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
}

// Función que calcula el valor total del inventario
function calculateInventoryValue(products: Product[]): number {
  return products.reduce((total, product) => {
    return total + (product.price * product.stock);
  }, 0);
}

// Uso de la función
const inventory: Product[] = [
  { id: "p1", name: "Laptop", price: 1200, stock: 5 },
  { id: "p2", name: "Mouse", price: 25, stock: 50 },
  { id: "p3", name: "Monitor", price: 300, stock: 10 }
];

const totalValue = calculateInventoryValue(inventory);
console.log(`Total inventory value: $${totalValue}`);

En este ejemplo, TypeScript nos ayuda a:

  • Asegurar que cada producto tenga todas las propiedades necesarias
  • Verificar que estamos pasando un array de productos a la función
  • Garantizar que las operaciones matemáticas se realizan con números

Consideraciones importantes

TypeScript no es una solución mágica para todos los problemas. Es importante entender que:

  • El tipado estático ocurre solo durante el desarrollo, no en tiempo de ejecución
  • Existe una curva de aprendizaje inicial para dominar el sistema de tipos
  • En algunos casos, puede añadir cierta complejidad al código que no siempre es necesaria

Sin embargo, para la mayoría de los proyectos profesionales, especialmente aquellos que crecen con el tiempo o involucran a múltiples desarrolladores, los beneficios de TypeScript superan ampliamente estas consideraciones.

Diferencias clave con JavaScript

TypeScript y JavaScript están estrechamente relacionados, pero presentan diferencias fundamentales que afectan directamente a cómo desarrollamos aplicaciones. Entender estas diferencias es esencial para aprovechar al máximo las ventajas que TypeScript ofrece.

Sistema de tipos

La diferencia más evidente entre ambos lenguajes es que JavaScript es dinámicamente tipado, mientras que TypeScript implementa tipado estático:

// JavaScript - No hay errores hasta la ejecución
let name = "Alice";
name = 42; // Válido en JavaScript

// TypeScript
let name: string = "Alice";
name = 42; // Error: Type 'number' is not assignable to type 'string'

Esta característica permite que TypeScript detecte inconsistencias de tipos durante el desarrollo, evitando errores comunes que en JavaScript solo se manifestarían en tiempo de ejecución.

Proceso de compilación

JavaScript es un lenguaje interpretado que se ejecuta directamente en navegadores o entornos como Node.js. TypeScript, por su parte, requiere un paso de compilación que transforma el código en JavaScript estándar:

// Archivo original: greeting.ts
function greet(person: string): string {
  return `Hello, ${person}!`;
}

// Después de compilar: greeting.js
function greet(person) {
  return `Hello, ${person}!`;
}

Este proceso de compilación elimina todas las anotaciones de tipos y características exclusivas de TypeScript, generando código JavaScript compatible con cualquier entorno.

Características adicionales de lenguaje

TypeScript incorpora características modernas de JavaScript y añade otras propias que no existen en el estándar ECMAScript:

  • Enumeraciones: Permiten definir conjuntos de constantes con nombre.
enum Direction {
  Up,
  Down,
  Left,
  Right
}

let move: Direction = Direction.Up;
  • Interfaces: Definen contratos para la estructura de objetos.
interface User {
  id: number;
  username: string;
  isActive: boolean;
}

function deactivateUser(user: User): void {
  user.isActive = false;
}
  • Decoradores: Proporcionan una forma de añadir anotaciones y metaprogramación.
function log(target: any, key: string) {
  console.log(`Method ${key} was called`);
}

class Calculator {
  @log
  add(a: number, b: number): number {
    return a + b;
  }
}

Verificación de nulos y undefined

TypeScript ofrece comprobaciones más estrictas para valores potencialmente nulos o indefinidos:

// JavaScript - No hay advertencia
function getLength(text) {
  return text.length; // Podría fallar si text es null o undefined
}

// TypeScript
function getLength(text: string | null | undefined): number {
  // El compilador nos obliga a manejar los casos null/undefined
  if (text === null || text === undefined) {
    return 0;
  }
  return text.length;
}

Con la opción strictNullChecks habilitada, TypeScript nos obliga a verificar explícitamente estos casos, reduciendo errores comunes como "Cannot read property 'x' of undefined".

Inferencia de tipos

Aunque TypeScript permite declaraciones explícitas de tipos, también cuenta con un potente sistema de inferencia de tipos que JavaScript no posee:

// TypeScript infiere automáticamente los tipos
let message = "Hello"; // Tipo inferido: string
let count = 10;        // Tipo inferido: number
let isActive = true;   // Tipo inferido: boolean

// La inferencia también funciona con estructuras más complejas
let numbers = [1, 2, 3]; // Tipo inferido: number[]
let user = {             // Tipo inferido: { name: string, age: number }
  name: "Bob",
  age: 25
};

Esta característica permite obtener muchos beneficios del tipado estático sin necesidad de añadir anotaciones de tipos en todas partes.

Herramientas de desarrollo

TypeScript proporciona una experiencia de desarrollo mejorada gracias a su sistema de tipos:

  • Autocompletado más preciso: El editor puede sugerir propiedades y métodos basándose en el tipo.
  • Refactorización más segura: Al cambiar la estructura de un tipo, el compilador señala todos los lugares que deben actualizarse.
  • Documentación integrada: Los tipos sirven como documentación que siempre está actualizada.
interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
}

function formatProduct(product: Product) {
  // Al escribir 'product.', el editor mostrará todas las propiedades disponibles
  return `${product.name} - $${product.price}`;
}

Compatibilidad con JavaScript

Una diferencia crucial es que todo código JavaScript válido es también código TypeScript válido, pero no al revés:

// Este código es válido tanto en JavaScript como en TypeScript
function multiply(a, b) {
  return a * b;
}

// Este código solo es válido en TypeScript
function divide(a: number, b: number): number {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

Esta compatibilidad permite migrar gradualmente proyectos de JavaScript a TypeScript, archivo por archivo, sin necesidad de una reescritura completa.

Configuración y opciones de compilación

TypeScript ofrece un sistema de configuración extenso a través del archivo tsconfig.json, que permite personalizar cómo funciona el compilador:

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Estas opciones permiten ajustar el nivel de estrictez del sistema de tipos, especificar qué archivos compilar, y configurar muchos otros aspectos del comportamiento del compilador, algo que no existe en JavaScript puro.

Ventajas del tipado estático

El tipado estático es la característica más distintiva de TypeScript y proporciona numerosos beneficios que transforman significativamente la experiencia de desarrollo. A diferencia del tipado dinámico de JavaScript, donde el tipo de una variable puede cambiar durante la ejecución, TypeScript verifica los tipos durante la fase de compilación, antes de que el código se ejecute.

Detección temprana de errores

Una de las ventajas fundamentales del tipado estático es la capacidad de identificar errores comunes durante el desarrollo, no cuando la aplicación ya está en ejecución:

// Sin tipado estático (JavaScript)
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Con tipado estático (TypeScript)
interface Item {
  name: string;
  price: number;
}

function calculateTotal(items: Item[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Esto generaría un error en tiempo de compilación
calculateTotal([
  { name: "Laptop", price: 1200 },
  { name: "Mouse", prce: 25 } // Error: Object literal may only specify known properties, but 'prce' does not exist in type 'Item'.
]);

En este ejemplo, TypeScript detectaría inmediatamente el error tipográfico en prce, mientras que en JavaScript este error pasaría desapercibido y resultaría en un cálculo incorrecto.

Mejora en la productividad del desarrollador

El tipado estático acelera el desarrollo de varias maneras:

  • Autocompletado preciso: El editor sugiere propiedades y métodos basados en el tipo definido.
  • Navegación de código mejorada: Permite saltar rápidamente a definiciones y encontrar referencias.
  • Refactorización más segura: Al cambiar una interfaz, el compilador señala todos los lugares que necesitan actualizarse.
interface User {
  id: string;
  name: string;
  email: string;
  preferences: {
    theme: "light" | "dark";
    notifications: boolean;
  };
}

function updateUserTheme(user: User, newTheme: "light" | "dark") {
  // Al escribir 'user.' el editor mostrará todas las propiedades disponibles
  // Al escribir 'user.preferences.' veremos las opciones específicas
  user.preferences.theme = newTheme;
}

Esta asistencia inteligente reduce significativamente el tiempo dedicado a consultar documentación o depurar errores triviales.

Código autodocumentado

Los tipos actúan como una forma de documentación integrada que siempre está actualizada:

// Sin tipos, no queda claro qué espera la función
function processPayment(payment, options) {
  // Implementación...
}

// Con tipos, la función se autodocumenta
interface Payment {
  amount: number;
  currency: string;
  method: "credit" | "debit" | "paypal";
}

interface ProcessOptions {
  sendReceipt: boolean;
  saveToHistory?: boolean; // Opcional
}

function processPayment(payment: Payment, options: ProcessOptions): Promise<boolean> {
  // Implementación...
  return Promise.resolve(true);
}

Esta claridad es especialmente valiosa cuando:

  • Otros desarrolladores necesitan usar tu código
  • Regresas a tu propio código después de un tiempo
  • Trabajas en equipos grandes o en proyectos de larga duración

Reducción de pruebas unitarias básicas

El tipado estático elimina la necesidad de escribir ciertas pruebas unitarias que verifican tipos básicos:

// En JavaScript, necesitarías pruebas para verificar tipos
function testCalculateDiscount() {
  assert(typeof calculateDiscount(100, 0.1) === 'number');
  assert(isNaN(calculateDiscount('100', 0.1))); // Verificar que falla con tipos incorrectos
  // Más pruebas...
}

// En TypeScript, el compilador ya verifica esto
function calculateDiscount(price: number, rate: number): number {
  return price * rate;
}

Esto permite concentrar los esfuerzos de testing en la lógica de negocio real, en lugar de en validaciones básicas de tipos.

Mejor experiencia en APIs y bibliotecas

Cuando utilizas bibliotecas externas, el tipado estático proporciona una experiencia de desarrollo superior:

// Sin tipos, no sabes qué propiedades están disponibles
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // ¿Qué contiene data? ¿Qué propiedades tiene?
  });

// Con tipos, tienes claridad completa
interface User {
  id: number;
  name: string;
  email: string;
}

fetch('/api/users')
  .then(response => response.json() as Promise<User[]>)
  .then(users => {
    // Ahora sabes exactamente qué contiene users
    const activeUsers = users.filter(user => user.email.includes('@active'));
  });

Las definiciones de tipos para bibliotecas populares están disponibles a través de DefinitelyTyped, proporcionando esta experiencia mejorada incluso para código que no fue escrito originalmente en TypeScript.

Diseño de API más robusto

El tipado estático fomenta un diseño más cuidadoso de las interfaces de programación:

// Enfoque sin tipos - flexible pero propenso a errores
function createUser(userData) {
  // ¿Qué propiedades debería tener userData?
}

// Enfoque con tipos - claro y específico
interface UserCreationData {
  username: string;
  email: string;
  password: string;
  role?: "admin" | "user"; // Opcional con valor predeterminado
}

function createUser(userData: UserCreationData): Promise<{ id: string; success: boolean }> {
  // Implementación...
  return Promise.resolve({ id: "123", success: true });
}

Este enfoque estructurado ayuda a definir contratos claros entre diferentes partes del código, facilitando la colaboración en equipos.

Mitigación de errores en tiempo de ejecución

Muchos errores comunes que normalmente aparecerían en tiempo de ejecución se detectan durante la compilación:

// Errores comunes que TypeScript puede prevenir:

// 1. Acceso a propiedades inexistentes
const user = { name: "Alice" };
console.log(user.age); // Error: Property 'age' does not exist on type '{ name: string; }'

// 2. Operaciones con tipos incompatibles
const id = "1234";
const numericId = id - 1; // Error: The '-' operator cannot be applied to types 'string' and 'number'

// 3. Llamadas a funciones con argumentos incorrectos
function divide(a: number, b: number): number {
  return a / b;
}
divide(10); // Error: Expected 2 arguments, but got 1

Esta detección temprana reduce significativamente el tiempo dedicado a depurar problemas en producción.

Evolución segura del código

El tipado estático facilita enormemente la refactorización y evolución del código a lo largo del tiempo:

// Versión inicial
interface Product {
  id: string;
  name: string;
  price: number;
}

// Evolución de la interfaz
interface Product {
  id: string;
  name: string;
  price: number;
  category: string; // Nueva propiedad requerida
  stock?: number;   // Nueva propiedad opcional
}

Al añadir nuevas propiedades requeridas, TypeScript identificará automáticamente todos los lugares donde se crean objetos Product que necesitan actualizarse, reduciendo el riesgo de introducir regresiones.

El tipado estático de TypeScript proporciona una red de seguridad que permite escribir código más robusto, mantenible y escalable, especialmente valioso en proyectos grandes o de larga duración.

Ecosistema de TypeScript y adopción en la industria

TypeScript ha experimentado un crecimiento exponencial desde su lanzamiento inicial en 2012, transformándose de una alternativa experimental a JavaScript a una tecnología fundamental en el desarrollo web moderno. Este crecimiento se debe tanto a su sólida base técnica como al rico ecosistema que se ha desarrollado a su alrededor.

Herramientas y entornos de desarrollo

El ecosistema de TypeScript se caracteriza por una integración excepcional con los principales entornos de desarrollo:

  • Editores y IDEs: El soporte para TypeScript es prácticamente universal en las herramientas de desarrollo modernas:
// Visual Studio Code proporciona características como:
interface User {
  id: string;
  name: string;
}

// - Autocompletado inteligente
const user: User = {
  // Al escribir, el editor sugiere 'id' y 'name'
}

// - Refactorización asistida
// - Navegación de código mejorada
// - Detección de errores en tiempo real
  • Sistemas de construcción: Las principales herramientas de build soportan TypeScript nativamente:
// Ejemplo de configuración en webpack.config.js
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
};
  • Linters y formateadores: Herramientas como ESLint incluyen reglas específicas para TypeScript que mejoran la calidad del código:
// Ejemplo de .eslintrc.js para TypeScript
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'error'
  }
};

Frameworks y bibliotecas

El ecosistema de TypeScript se ha expandido enormemente gracias a la adopción por parte de frameworks populares:

  • Angular: Desarrollado completamente en TypeScript, Angular lo utiliza como lenguaje principal:
// Componente Angular con TypeScript
@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html'
})
export class UserProfileComponent implements OnInit {
  user: User | null = null;
  
  constructor(private userService: UserService) {}
  
  ngOnInit(): void {
    this.userService.getCurrentUser().subscribe(
      (data: User) => this.user = data
    );
  }
}
  • React: Aunque desarrollado originalmente con JavaScript, React ofrece soporte de primera clase para TypeScript:
// Componente React con TypeScript
interface ButtonProps {
  text: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ text, onClick, disabled = false }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {text}
    </button>
  );
};
  • Vue.js: Ha mejorado significativamente su soporte para TypeScript en las versiones recientes:
// Componente Vue con TypeScript (Vue 3 + Composition API)
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    initialCount: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const count = ref(props.initialCount);
    
    function increment() {
      count.value++;
    }
    
    return { count, increment };
  }
});
  • Node.js: El desarrollo de aplicaciones backend con Node.js se beneficia enormemente de TypeScript:
// API REST con Express y TypeScript
import express, { Request, Response } from 'express';

interface User {
  id: string;
  name: string;
  email: string;
}

const app = express();

app.get('/users/:id', async (req: Request, res: Response) => {
  try {
    const userId: string = req.params.id;
    const user: User = await getUserFromDatabase(userId);
    res.json(user);
  } catch (error) {
    res.status(500).json({ message: 'Error fetching user' });
  }
});

Adopción en la industria

La adopción de TypeScript en la industria ha crecido de manera constante y significativa:

  • Empresas tecnológicas líderes: Organizaciones como Microsoft (creador de TypeScript), Google, Facebook, Airbnb y muchas otras han adoptado TypeScript para proyectos importantes:
// Ejemplo de código similar al utilizado en producción
interface SearchParams {
  query: string;
  filters?: {
    category?: string;
    minPrice?: number;
    maxPrice?: number;
  };
  page: number;
  resultsPerPage: number;
}

class SearchService {
  async search(params: SearchParams): Promise<SearchResult> {
    // Implementación del motor de búsqueda
    // Utilizado en aplicaciones de comercio electrónico
  }
}
  • Startups y empresas medianas: La adopción no se limita a grandes corporaciones; empresas de todos los tamaños eligen TypeScript para nuevos proyectos:
// Patrón común en aplicaciones empresariales
interface Customer {
  id: string;
  name: string;
  email: string;
  subscriptionTier: 'free' | 'basic' | 'premium';
  subscriptionEndDate?: Date;
}

class SubscriptionManager {
  async upgradeCustomer(
    customerId: string, 
    newTier: 'basic' | 'premium',
    months: number
  ): Promise<{ success: boolean; newEndDate: Date }> {
    // Lógica de negocio para gestionar suscripciones
  }
}

Estadísticas y tendencias

Las métricas de adopción muestran el crecimiento continuo de TypeScript:

  • Encuestas a desarrolladores: TypeScript aparece consistentemente entre los lenguajes más amados y deseados en encuestas como Stack Overflow Developer Survey.

  • Repositorios de código abierto: Un número creciente de proyectos open source están migrando a TypeScript o lo adoptan desde el inicio.

  • Ofertas de empleo: La demanda de desarrolladores con conocimientos de TypeScript ha aumentado significativamente, convirtiéndose en una habilidad altamente valorada.

Definiciones de tipos (@types)

Un componente crucial del ecosistema es el repositorio DefinitelyTyped, que proporciona definiciones de tipos para miles de bibliotecas JavaScript:

// Instalación de tipos para una biblioteca
// npm install --save-dev @types/lodash

// Uso de la biblioteca con tipos completos
import _ from 'lodash';

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];

// TypeScript conoce todos los métodos de lodash con sus tipos correctos
const oldestUser = _.maxBy(users, 'age');
// oldestUser tiene el tipo correcto inferido

Este sistema permite utilizar bibliotecas JavaScript existentes con todas las ventajas del tipado estático.

Herramientas de migración

El ecosistema incluye herramientas para facilitar la migración desde JavaScript:

  • Adopción gradual: TypeScript permite añadir tipos progresivamente:
// Archivo .js existente
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Versión inicial con TypeScript (.ts)
// Usando 'any' como primer paso
function calculateTotal(items: any[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Versión final completamente tipada
interface Item {
  id: string;
  name: string;
  price: number;
}

function calculateTotal(items: Item[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}
  • Inferencia automática: TypeScript puede generar definiciones de tipos basadas en código JavaScript existente mediante herramientas como dts-gen.

Comunidad y recursos

El ecosistema humano alrededor de TypeScript es igualmente importante:

  • Documentación oficial: Exhaustiva y constantemente actualizada.
  • Tutoriales y cursos: Amplia disponibilidad de recursos educativos.
  • Conferencias: Eventos dedicados como TSConf y presencia en conferencias de JavaScript.
  • Comunidades online: Foros activos en Stack Overflow, Reddit y Discord.

Casos de uso destacados

TypeScript brilla especialmente en ciertos escenarios de desarrollo:

  • Aplicaciones empresariales: Donde la mantenibilidad y escalabilidad son cruciales:
// Patrón de arquitectura en capas típico de aplicaciones empresariales
interface UserRepository {
  findById(id: string): Promise<User | null>;
  save(user: User): Promise<void>;
  delete(id: string): Promise<boolean>;
}

class UserService {
  constructor(private repository: UserRepository) {}
  
  async updateUserEmail(userId: string, newEmail: string): Promise<Result<User>> {
    try {
      const user = await this.repository.findById(userId);
      if (!user) return { success: false, error: 'User not found' };
      
      user.email = newEmail;
      user.updatedAt = new Date();
      
      await this.repository.save(user);
      return { success: true, data: user };
    } catch (error) {
      return { success: false, error: 'Database error' };
    }
  }
}
  • Aplicaciones de código abierto: Donde la colaboración entre múltiples desarrolladores es esencial.
  • Proyectos de larga duración: Donde el código debe mantenerse durante años.

El ecosistema de TypeScript continúa expandiéndose, con nuevas herramientas, bibliotecas y patrones emergiendo constantemente, consolidando su posición como una tecnología fundamental en el desarrollo web moderno.

Aprende TypeScript online

Otros ejercicios de programación de TypeScript

Evalúa tus conocimientos de esta lección Introducción a TypeScript con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Funciones

TypeScript
Test

Reto composición de funciones

TypeScript
Código

Reto tipos especiales

TypeScript
Código

Reto tipos genéricos

TypeScript
Código

Módulos

TypeScript
Test

Polimorfismo

TypeScript
Código

Funciones TypeScript

TypeScript
Código

Interfaces

TypeScript
Puzzle

Funciones puras

TypeScript
Puzzle

Reto namespaces

TypeScript
Código

Funciones flecha

TypeScript
Puzzle

Polimorfismo

TypeScript
Test

Operadores

TypeScript
Test

Conversor de unidades

TypeScript
Proyecto

Funciones flecha

TypeScript
Test

Control de flujo

TypeScript
Código

Herencia

TypeScript
Puzzle

Clases

TypeScript
Puzzle

Proyecto validación de tipado

TypeScript
Proyecto

Clases y objetos

TypeScript
Código

Encapsulación

TypeScript
Test

Herencia

TypeScript
Test

Proyecto sistema de votación

TypeScript
Proyecto

Reto genéricos con clases

TypeScript
Código

Inmutabilidad

TypeScript
Puzzle

Interfaces

TypeScript
Test

Funciones de alto orden

TypeScript
Test

Reto map y filter

TypeScript
Código

Control de flujo

TypeScript
Test

Interfaces

TypeScript
Código

Reto funciones orden superior

TypeScript
Código

Herencia y clases abstractas

TypeScript
Código

Reto tipos mapped

TypeScript
Código

Herencia de clases

TypeScript
Código

Reto funciones puras

TypeScript
Código

Variables y constantes

TypeScript
Puzzle

Introducción a TypeScript

TypeScript
Test

Reto testing unitario

TypeScript
Código

Funciones de primera clase

TypeScript
Puzzle

Clases

TypeScript
Test

OOP y CRUD en TypeScript

TypeScript
Proyecto

Interfaces y su implementación

TypeScript
Código

Tipos genéricos

TypeScript
Test

Namespaces

TypeScript
Test

Operadores y expresiones

TypeScript
Código

Proyecto generador de contraseñas

TypeScript
Proyecto

Reto unión e intersección

TypeScript
Código

Encapsulación

TypeScript
Puzzle

Tipos de unión e intersección

TypeScript
Test

Tipos de unión e intersección

TypeScript
Puzzle

Reto hola mundo en TS

TypeScript
Código

Variables y constantes

TypeScript
Código

Funciones puras

TypeScript
Test

Control de flujo

TypeScript
Código

Introducción a TypeScript

TypeScript
Código

Resolución de módulos

TypeScript
Test

Control de flujo

TypeScript
Puzzle

Reto tipos de utilidad

TypeScript
Código

Reto tipos literales y condicionales

TypeScript
Código

Reto exportar e importar

TypeScript
Código

Propiedades y métodos

TypeScript
Código

Tipos de utilidad

TypeScript
Test

Clases y objetos

TypeScript
Código

Tipos de datos, variables y constantes

TypeScript
Código

Proyecto Minigestor de tareas

TypeScript
Proyecto

Operadores

TypeScript
Puzzle

Funciones flecha y contexto

TypeScript
Código

Proyecto Inventario de productos

TypeScript
Proyecto

Funciones

TypeScript
Puzzle

Reto type aliases

TypeScript
Código

Funciones de alto orden

TypeScript
Puzzle

Funciones y parámetros tipados

TypeScript
Código

Tipos literales

TypeScript
Puzzle

Reto enums

TypeScript
Código

Tipos de utilidad

TypeScript
Puzzle

Modificadores de acceso y encapsulación

TypeScript
Código

Polimorfismo

TypeScript
Puzzle

Tipos genéricos

TypeScript
Puzzle

Reto módulos

TypeScript
Código

Tipos literales

TypeScript
Test

Inmutabilidad

TypeScript
Test

Proyecto Generator de datos

TypeScript
Proyecto

Variables y constantes

TypeScript
Test

Funciones de primera clase

TypeScript
Test

Todas las lecciones de TypeScript

Accede a todas las lecciones de TypeScript y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.

Introducción A Typescript

TypeScript

Introducción Y Entorno

Instalación Y Configuración De Typescript

TypeScript

Introducción Y Entorno

Tipos De Datos, Variables Y Constantes

TypeScript

Sintaxis

Operadores Y Expresiones

TypeScript

Sintaxis

Control De Flujo

TypeScript

Sintaxis

Funciones Y Parámetros Tipados

TypeScript

Sintaxis

Funciones Flecha Y Contexto

TypeScript

Sintaxis

Enums

TypeScript

Sintaxis

Type Aliases Y Aserciones De Tipo

TypeScript

Sintaxis

Clases Y Objetos

TypeScript

Programación Orientada A Objetos

Interfaces Y Su Implementación

TypeScript

Programación Orientada A Objetos

Modificadores De Acceso Y Encapsulación

TypeScript

Programación Orientada A Objetos

Herencia Y Clases Abstractas

TypeScript

Programación Orientada A Objetos

Polimorfismo

TypeScript

Programación Orientada A Objetos

Decoradores Básicos

TypeScript

Programación Orientada A Objetos

Propiedades Y Métodos

TypeScript

Programación Orientada A Objetos

Inmutabilidad

TypeScript

Programación Funcional

Funciones Puras Y Efectos Secundarios

TypeScript

Programación Funcional

Funciones De Primera Clase

TypeScript

Programación Funcional

Funciones De Alto Orden

TypeScript

Programación Funcional

Conceptos Básicos E Inmutabilidad

TypeScript

Programación Funcional

Funciones De Primera Clase Y Orden Superior

TypeScript

Programación Funcional

Composición De Funciones

TypeScript

Programación Funcional

Métodos Funcionales De Arrays (Map, Filter, Reduce)

TypeScript

Programación Funcional

Tipos Literales Y Tipos Condicionales

TypeScript

Tipos Intermedios Y Avanzados

Tipos Genéricos Básicos

TypeScript

Tipos Intermedios Y Avanzados

Tipos De Unión E Intersección

TypeScript

Tipos Intermedios Y Avanzados

Tipos De Utilidad (Partial, Required, Pick, Etc)

TypeScript

Tipos Intermedios Y Avanzados

Unknown, Never Y Tipos Especiales

TypeScript

Tipos Intermedios Y Avanzados

Tipos Mapped

TypeScript

Tipos Intermedios Y Avanzados

Genéricos Con Clases E Interfaces

TypeScript

Tipos Intermedios Y Avanzados

Módulos

TypeScript

Namespaces Y Módulos

Namespaces

TypeScript

Namespaces Y Módulos

Resolución De Módulos

TypeScript

Namespaces Y Módulos

Exportación E Importación De Módulos

TypeScript

Namespaces Y Módulos

Introducción A Módulos

TypeScript

Namespaces Y Módulos

Testing Unitario En Typescript

TypeScript

Testing

Accede GRATIS a TypeScript y certifícate

En esta lección

Objetivos de aprendizaje de esta lección

  • Comprender los fundamentos de TypeScript como lenguaje de programación y su relación con JavaScript, incluyendo su proceso de compilación
  • Reconocer las ventajas del tipado estático para la detección temprana de errores, autocompletado, refactorización y documentación implícita
  • Identificar las diferencias clave entre TypeScript y JavaScript en aspectos como el sistema de tipos, características adicionales y herramientas de desarrollo
  • Explorar el ecosistema de TypeScript, incluyendo su integración con frameworks populares y herramientas de desarrollo
  • Evaluar los casos de uso donde TypeScript brinda mayor valor, especialmente en aplicaciones empresariales, proyectos de larga duración y desarrollo colaborativo