TypeScript em todas as frentes: como escrever código para web, mobile e desktop

TypeScript — o soldado universal do desenvolvimento moderno

Você já sonhou em escrever uma base de código e executá-la em um site, aplicativo móvel e desktop? Há dez anos, isso soaria como ficção científica. Hoje, o TypeScript nos dá essa possibilidade sem mágica ou sacrifícios.

TypeScript não é apenas "JavaScript com tipos". É uma ferramenta poderosa que transforma o caos da tipagem dinâmica em uma arquitetura organizada. E o principal: ele se adapta perfeitamente a qualquer plataforma. Web, dispositivos móveis (iOS, Android) e sistemas desktop (Windows, macOS, Linux) — todos têm seu próprio framework TypeScript.

Neste artigo, vamos explorar estratégias reais e exemplos de código que ajudarão você a se tornar um verdadeiro desenvolvedor multiplataforma em TypeScript. Você aprenderá como evitar duplicação de lógica, quais bibliotecas escolher e como não perder desempenho.

Por que o TypeScript se tornou padrão para desenvolvimento multiplataforma

Antigamente, para cada plataforma era necessário aprender um novo idioma: Swift para iOS, Java/Kotlin para Android, C# para Windows, Python para backend. O TypeScript quebra esse estereótipo. Ele funciona em qualquer lugar onde haja um runtime JavaScript (navegador, Node.js, Deno) ou um wrapper nativo (React Native, Electron).

Principais vantagens do TypeScript no desenvolvimento multiplataforma:

\n
• Base de código única — escreva a lógica de negócios uma vez, use em todas as plataformas.
\n
• Tipagem forte — detecte bugs em tempo de compilação, não em tempo de execução.
\n
• Ecossistema rico — milhares de bibliotecas com tipos prontos (DefinitelyTyped).
\n
• Sintaxe moderna — async/await, genéricos, decoradores, tipos utilitários.
\n

A propósito, se você já trabalha com Python e quer experimentar TypeScript, terá uma surpresa agradável: muitos conceitos (tipagem estática, interfaces, genéricos) são muito semelhantes. No pythonlib.ru, adoramos mostrar como diferentes linguagens resolvem os mesmos problemas. O TypeScript, nesse sentido, é a ponte ideal entre o web e o nativo.

Arquitetura de um projeto multiplataforma em TypeScript

Para que o código funcione em qualquer lugar, é necessário dividir o aplicativo em três camadas:

\n
• Núcleo (Core) — lógica de negócios pura, independente da plataforma.
\n
• Adaptadores (Adapters) — camadas finas para UI, sistema de arquivos, rede.
\n
• Wrappers de plataforma — React para web, React Native para mobile, Electron para desktop.
\n

Vamos considerar um exemplo: um aplicativo de anotações com tags. O núcleo conterá apenas tipos e funções para manipulação de dados.

// 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

Esse código pode ser usado em qualquer ambiente. Sem dependências de DOM, React ou Node.js. Lógica TypeScript pura.

UI multiplataforma: React + React Native + Electron

A stack mais popular para desenvolvimento multiplataforma em TypeScript é React (web), React Native (mobile) e Electron (desktop). Todos os três usam a mesma sintaxe de componentes, mas com renderizadores diferentes.

Passo 1. Criando componentes compartilhados

Podemos extrair a lógica de exibição em componentes abstratos que usarão primitivos da plataforma.

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