TypeScript sur tous les fronts : comment écrire du code pour le web, le mobile et le desktop

TypeScript — le soldat universel du développement moderne

Avez-vous déjà rêvé d'écrire une seule base de code et de l'exécuter sur un site web, une application mobile et un desktop ? Il y a dix ans, cela aurait semblé de la science-fiction. Aujourd'hui, TypeScript nous offre cette possibilité sans magie ni sacrifices.

TypeScript n'est pas simplement « JavaScript avec des types ». C'est un outil puissant qui transforme le chaos du typage dynamique en une architecture structurée. Et surtout, il s'adapte parfaitement à n'importe quelle plateforme. Web, appareils mobiles (iOS, Android) et systèmes de bureau (Windows, macOS, Linux) — chacun a son propre framework TypeScript.

Dans cet article, nous analyserons des stratégies concrètes et des exemples de code qui vous aideront à devenir un véritable développeur multiplateforme en TypeScript. Vous apprendrez à éviter la duplication de logique, quelles bibliothèques choisir et comment ne pas perdre en performance.

Pourquoi TypeScript est devenu la norme pour le développement multiplateforme

Avant, pour chaque plateforme, il fallait apprendre un nouveau langage : Swift pour iOS, Java/Kotlin pour Android, C# pour Windows, Python pour le backend. TypeScript brise ce stéréotype. Il fonctionne partout où il y a un runtime JavaScript (navigateur, Node.js, Deno) ou une enveloppe native (React Native, Electron).

Les principaux avantages de TypeScript dans le développement multiplateforme :

\n
• Base de code unique — écrivez la logique métier une fois, utilisez-la sur toutes les plateformes.
\n
• Typage strict — détectez les bugs à la compilation, pas à l'exécution.
\n
• Écosystème riche — des milliers de bibliothèques avec des types prêts à l'emploi (DefinitelyTyped).
\n
• Syntaxe moderne — async/await, génériques, décorateurs, types utilitaires.
\n

D'ailleurs, si vous travaillez déjà avec Python et souhaitez essayer TypeScript, vous aurez une agréable surprise : de nombreux concepts (typage statique, interfaces, génériques) sont très similaires. Sur pythonlib.ru, nous aimons montrer comment différents langages résolvent les mêmes problèmes. TypeScript est en ce sens un pont idéal entre le web et le natif.

Architecture d'un projet multiplateforme en TypeScript

Pour que le code fonctionne partout, il faut diviser l'application en trois couches :

\n
• Cœur (Core) — logique métier pure, indépendante de la plateforme.
\n
• Adaptateurs (Adapters) — fines couches d'interface pour l'UI, le système de fichiers, le réseau.
\n
• Enveloppes plateforme — React pour le web, React Native pour le mobile, Electron pour le desktop.
\n

Prenons un exemple : une application de notes avec des tags. Le cœur contiendra uniquement les types et les fonctions de manipulation des données.

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

Ce code peut être utilisé dans n'importe quel environnement. Aucune dépendance au DOM, à React ou à Node.js. Une logique TypeScript pure.

UI multiplateforme : React + React Native + Electron

La stack la plus populaire pour le développement multiplateforme en TypeScript est React (web), React Native (mobile) et Electron (desktop). Tous les trois utilisent la même syntaxe de composants, mais avec des moteurs de rendu différents.

Étape 1. Créer des composants partagés

On peut extraire la logique d'affichage dans des composants abstraits qui utiliseront des primitives de la plateforme.

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