TypeScript en todos los frentes: cómo escribir código para web, mobile y desktop

TypeScript — el soldado universal del desarrollo moderno

¿Alguna vez has soñado con escribir una base de código y ejecutarla en un sitio web, una aplicación móvil y en el escritorio? Hace diez años habría sonado a ciencia ficción. Hoy, TypeScript nos brinda esa posibilidad sin magia ni sacrificios.

TypeScript no es solo «JavaScript con tipos». Es una herramienta poderosa que transforma el caos de la tipificación dinámica en una arquitectura sólida. Y lo principal: se adapta perfectamente a cualquier plataforma. Web, dispositivos móviles (iOS, Android) y sistemas de escritorio (Windows, macOS, Linux) — en todas partes hay su propio framework de TypeScript.

En este artículo analizaremos estrategias reales y ejemplos de código que te ayudarán a convertirte en un verdadero desarrollador multiplataforma con TypeScript. Aprenderás cómo evitar la duplicación de lógica, qué bibliotecas elegir y cómo no perder rendimiento.

Por qué TypeScript se ha convertido en el estándar para el desarrollo multiplataforma

Antes, para cada plataforma había que aprender un nuevo lenguaje: Swift para iOS, Java/Kotlin para Android, C# para Windows, Python para el backend. TypeScript rompe este estereotipo. Funciona en cualquier lugar donde haya un runtime de JavaScript (navegador, Node.js, Deno) o un envoltorio nativo (React Native, Electron).

Principales ventajas de TypeScript en el desarrollo multiplataforma:

\n
• Base de código única — escribes la lógica de negocio una vez, la usas en todas las plataformas.
\n
• Tipificación estricta — detectas errores en la etapa de compilación, no en tiempo de ejecución.
\n
• Ecosistema rico — miles de bibliotecas con tipos listos (DefinitelyTyped).
\n
• Sintaxis moderna — async/await, genéricos, decoradores, tipos utilitarios.
\n

Por cierto, si ya trabajas con Python y quieres probar TypeScript, te espera una grata sorpresa: muchos conceptos (tipificación estática, interfaces, genéricos) son muy similares. En pythonlib.ru nos encanta mostrar cómo diferentes lenguajes resuelven las mismas tareas. TypeScript en este sentido es el puente ideal entre la web y lo nativo.

Arquitectura de un proyecto multiplataforma en TypeScript

Para que el código funcione en todas partes, hay que dividir la aplicación en tres capas:

\n
• Núcleo (Core) — lógica de negocio pura, independiente de la plataforma.
\n
• Adaptadores (Adapters) — capas finas para la UI, sistema de archivos, red.
\n
• Envoltorios de plataforma — React para la web, React Native para móviles, Electron para escritorio.
\n

Veamos un ejemplo: una aplicación de notas con etiquetas. El núcleo contendrá solo los tipos y funciones para trabajar con datos.

// core/types.ts\nexport interface Note {\n  id: string;\n  title: string;\n  content: string;\n  tags: string[];\n  createdAt: Date;\n}\n\n// core/noteService.ts\nexport function filterNotesByTag(notes: Note[], tag: string): Note[] {\n  return notes.filter(note => note.tags.includes(tag));\n}\n\nexport function createNote(title: string, content: string, tags: string[]): Note {\n  return {\n    id: crypto.randomUUID(),\n    title,\n    content,\n    tags,\n    createdAt: new Date(),\n  };\n}\n

Este código se puede usar en cualquier entorno. Sin dependencias del DOM, React o Node.js. Lógica TypeScript pura.

UI multiplataforma: React + React Native + Electron

El stack más popular para el desarrollo multiplataforma con TypeScript es React (web), React Native (móviles) y Electron (escritorio). Los tres usan la misma sintaxis de componentes, pero con diferentes renderizadores.

Paso 1. Crear componentes compartidos

Se puede extraer la lógica de visualización en componentes abstractos que usarán primitivas de la plataforma.

// shared/NoteCard.tsx\nimport { View, Text,