TypeScript 全方位：如何为 Web、移动端和桌面端编写代码

TypeScript — 现代开发的万能工具

您是否曾梦想编写一套代码库，就能在网站、移动应用和桌面端上运行？十年前，这听起来像是天方夜谭。如今，TypeScript 让我们无需魔法和牺牲就能实现这一可能。

TypeScript 不仅仅是“带类型的 JavaScript”。它是一个强大的工具，能将动态类型化的混乱转变为清晰的架构。更重要的是，它同样适用于任何平台。Web、移动设备（iOS、Android）和桌面系统（Windows、macOS、Linux）——每个平台都有其对应的 TypeScript 框架。

在本文中，我们将剖析真实的策略和代码示例，帮助您成为一名真正的跨平台 TypeScript 开发者。您将学习如何避免逻辑重复、选择哪些库以及如何保持性能。

为什么 TypeScript 成为跨平台开发的标准

过去，每个平台都需要学习一门新语言：iOS 用 Swift、Android 用 Java/Kotlin、Windows 用 C#、后端用 Python。TypeScript 打破了这一惯例。它可以在任何有 JavaScript 运行时（浏览器、Node.js、Deno）或原生封装（React Native、Electron）的地方运行。

TypeScript 在跨平台开发中的主要优势：

\n
• 统一代码库 — 业务逻辑只需编写一次，即可在所有平台上使用。
\n
• 强类型 — 在编译阶段而非运行时捕获错误。
\n
• 丰富的生态系统 — 数千个带有现成类型定义的库（DefinitelyTyped）。
\n
• 现代语法 — async/await、泛型、装饰器、工具类型。
\n

顺便提一下，如果您已经在使用 Python 并想尝试 TypeScript，您会惊喜地发现：许多概念（静态类型、接口、泛型）非常相似。在 pythonlib.ru 上，我们喜欢展示不同语言如何解决相同的问题。从这个意义上说，TypeScript 是连接 Web 和原生应用的理想桥梁。

跨平台 TypeScript 项目的架构

为了让代码在任何地方都能运行，需要将应用程序分为三层：

\n
• 核心（Core） — 纯业务逻辑，不依赖平台。
\n
• 适配器（Adapters） — 用于 UI、文件系统、网络的薄层。
\n
• 平台封装 — Web 用 React、移动端用 React Native、桌面端用 Electron。
\n

来看一个例子：带标签的笔记应用。核心层只包含数据类型和数据处理函数。

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

这段代码可以在任何环境中使用。不依赖 DOM、React 或 Node.js。纯 TypeScript 逻辑。

跨平台 UI：React + React Native + Electron

最流行的跨平台 TypeScript 开发技术栈是 React（Web）、React Native（移动端） 和 Electron（桌面端）。三者都使用相同的组件语法，但渲染器不同。

步骤 1. 创建通用组件

可以将显示逻辑提取到抽象组件中，这些组件将使用平台原生元素。

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