TypeScript on All Fronts: How to Write Code for Web, Mobile, and Desktop

TypeScript — The Universal Soldier of Modern Development

Have you ever dreamed of writing one codebase and running it on a website, a mobile app, and a desktop? Ten years ago, that would have sounded like science fiction. Today, TypeScript gives us this possibility without magic or sacrifices.

TypeScript is not just "JavaScript with types." It is a powerful tool that turns the chaos of dynamic typing into a structured architecture. And most importantly, it fits perfectly on any platform. Web, mobile devices (iOS, Android), and desktop systems (Windows, macOS, Linux) — each has its own TypeScript framework.

In this article, we will break down real strategies and code examples that will help you become a true cross-platform TypeScript developer. You will learn how to avoid logic duplication, which libraries to choose, and how not to lose performance.

Why TypeScript Became the Standard for Cross-Platform Development

In the past, you had to learn a new language for each platform: Swift for iOS, Java/Kotlin for Android, C# for Windows, Python for the backend. TypeScript breaks this stereotype. It works everywhere there is a JavaScript runtime (browser, Node.js, Deno) or a native wrapper (React Native, Electron).

Key advantages of TypeScript in cross-platform development:

\n
• Unified codebase — write business logic once, use it on all platforms.
\n
• Strong typing — catch bugs at compile time, not at runtime.
\n
• Rich ecosystem — thousands of libraries with ready-made types (DefinitelyTyped).
\n
• Modern syntax — async/await, generics, decorators, utility types.
\n

By the way, if you already work with Python and want to try TypeScript, you are in for a pleasant surprise: many concepts (static typing, interfaces, generics) are very similar. At pythonlib.ru, we love showing how different languages solve the same problems. TypeScript in this sense is an ideal bridge between the web and native.

Architecture of a Cross-Platform TypeScript Project

To make the code work everywhere, you need to split the application into three layers:

\n
• Core — pure business logic, independent of the platform.
\n
• Adapters — thin layers for UI, file system, network.
\n
• Platform wrappers — React for the web, React Native for mobile, Electron for desktop.
\n

Let's look at an example: a note-taking app with tags. The core will contain only types and data manipulation functions.

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

This code can be used in any environment. No dependencies on DOM, React, or Node.js. Pure TypeScript logic.

Cross-Platform UI: React + React Native + Electron

The most popular stack for cross-platform development with TypeScript is React (web), React Native (mobile), and Electron (desktop). All three use the same component syntax, but with different renderers.

Step 1. Create shared components

You can extract display logic into abstract components that will use platform primitives.

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