【鸿蒙App】Type Script的主要应用场景和示例

TypeScript 凭借其静态类型检查、现代 JavaScript 特性支持和丰富的工具链，可以开发几乎所有类型的应用。以下是 TypeScript 的主要应用场景和示例：

1. Web 前端开发

• 框架/库：React + TS、Angular（原生支持 TS）、Vue 3 + TS、Svelte
• 示例：单页应用（SPA）、企业级后台管理系统、数据可视化仪表盘
• 优势：类型安全的组件 Props/State，减少运行时错误。

// React + TS 组件示例
interface ButtonProps {
  label: string;
  onClick: () => void;
}
const Button = ({ label, onClick }: ButtonProps) => (
  <button onClick={onClick}>{label}</button>
);

2. 后端开发

• 运行时：Node.js、Deno、Bun
• 框架：NestJS（企业级）、Express + TS、Fastify + TS
• 示例：RESTful API、GraphQL 服务、微服务、SSR 服务（如 Next.js）

// NestJS 控制器示例
@Controller('users')
export class UsersController {
  constructor(private readonly usersService: UsersService) {}

  @Get()
  findAll(): Promise<User[]> {
    return this.usersService.findAll();
  }
}

3. 跨平台桌面应用

• 框架：Electron、Tauri、NW.js
• 示例：VS Code（Electron + TS）、Slack、Figma 插件

// Electron 主进程示例（tsconfig.json 需启用 "dom" 库）
import { app, BrowserWindow } from 'electron';

let mainWindow: BrowserWindow | null = null;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
});

4. 移动端开发

• 框架：React Native + TS、Ionic + TS、NativeScript
• 示例：iOS/Android 跨平台应用

// React Native 组件示例
type User = { id: string; name: string };
const UserCard = ({ user }: { user: User }) => (
  <View><Text>{user.name}</Text></View>
);

5. 浏览器扩展

• 技术：Chrome Extensions、Firefox Add-ons
• 示例：广告拦截器、密码管理器

// Chrome 扩展后台脚本示例
chrome.runtime.onMessage.addListener(
  (message: { action: string }, sender, sendResponse) => {
    if (message.action === "LOG") console.log("Message received");
  }
);

6. 游戏开发

• 引擎/库：Phaser、Three.js + TS、Babylon.js
• 示例：HTML5 游戏、WebGL 3D 可视化

// Three.js 场景初始化
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const scene = new THREE.Scene();

7. 工具与 CLI

• 库：commander.js、oclif、ink（React 写 CLI）
• 示例：构建工具、代码生成器、自动化脚本

// 使用 commander 创建 CLI
import { Command } from 'commander';
const program = new Command();
program.version('1.0.0').action(() => console.log('Hello TS!'));
program.parse();

8. 物联网（IoT）

• 平台：Raspberry Pi + Node.js、AWS IoT SDK
• 示例：设备控制、数据采集

// 使用 TypeScript 控制 GPIO
import { Gpio } from 'onoff';
const led = new Gpio(17, 'out');
led.writeSync(1); // 打开 LED

9. 机器学习/数据科学

• 库：TensorFlow.js、Brain.js
• 示例：浏览器端模型推理、数据分析工具

// TensorFlow.js 线性回归示例
const model = tf.sequential();
model.add(tf.layers.dense({ units: 1, inputShape: [1] }));
model.compile({ loss: 'meanSquaredError', optimizer: 'sgd' });

10. 云函数/Serverless

• 平台：AWS Lambda、Azure Functions、Google Cloud Functions
• 示例：无服务器 API、事件处理

// AWS Lambda 示例（API Gateway 触发）
export const handler = async (event: APIGatewayEvent): Promise<{ statusCode: number }> => {
  return { statusCode: 200, body: JSON.stringify({ message: "Hello TS!" }) };
};

为什么选择 TypeScript？

1. 类型安全：编译时捕获潜在错误。
2. 更好的协作：清晰的类型定义提升团队协作效率。
3. 代码维护性：类型即文档，适合大型项目。
4. 渐进式采用：支持混合 .js 和 .ts 文件。

学习建议

• 从简单项目开始（如 CLI 工具或 React 组件）
• 利用 tsconfig.json 逐步启用严格模式（strict: true）
• 掌握泛型、工具类型（如 Partial<T>、Pick<T, K>）

TypeScript 的生态几乎覆盖所有 JavaScript 能做的事情，同时提供更强的可靠性，是现代全栈开发的绝佳选择。