以下是一个完整的 TypeScript 应用示例（基于 Node.js 的控制台小应用），包含逐行代码解释和项目配置说明。我们将实现一个简单的 待办事项（Todo List）管理器。

---

1. 项目初始化

创建项目结构

mkdir todo-ts-app && cd todo-ts-app
npm init -y
npm install typescript ts-node @types/node --save-dev
npx tsc --init  # 生成 tsconfig.json

• ts-node：直接运行 TypeScript 文件（无需手动编译）。
• @types/node：Node.js 类型定义文件。

---

2. 代码实现

文件结构

todo-ts-app/
├── src/
│   ├── index.ts       # 主程序
│   ├── todo.ts        # 核心逻辑
│   └── types.ts       # 类型定义
├── tsconfig.json
└── package.json

---

(1) 类型定义 src/types.ts

// 定义单个待办事项的结构
export type TodoItem = {
  id: number;
  title: string;
  completed: boolean;
};

// 定义整个待办事项列表的状态
export type TodoList = TodoItem[];

• 解释：
  • TodoItem 描述一个任务的字段（ID、标题、完成状态）。
  • TodoList 是 TodoItem 的数组。

---

(2) 核心逻辑 src/todo.ts

import { TodoItem, TodoList } from "./types";

// 待办事项管理类
export class TodoManager {
  private todos: TodoList = [];

  // 添加新任务
  addTodo(title: string): TodoItem {
    const newTodo: TodoItem = {
      id: Date.now(), // 用时间戳作为唯一ID
      title,
      completed: false,
    };
    this.todos.push(newTodo);
    return newTodo;
  }

  // 标记任务为完成/未完成
  toggleTodo(id: number): void {
    const todo = this.todos.find((item) => item.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  }

  // 删除任务
  deleteTodo(id: number): void {
    this.todos = this.todos.filter((item) => item.id !== id);
  }

  // 获取所有任务
  getAllTodos(): TodoList {
    return this.todos;
  }
}

• 逐行解释：
  • private todos: 私有属性，存储所有任务。
  • addTodo(): 创建新任务并添加到列表。
  • toggleTodo(): 根据 ID 切换任务状态。
  • deleteTodo(): 过滤掉指定 ID 的任务。
  • getAllTodos(): 返回当前所有任务。

---

(3) 主程序 src/index.ts

import { TodoManager } from "./todo";
import * as readline from "readline/promises";

// 创建实例
const todoManager = new TodoManager();
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

// 主菜单
async function showMenu() {
  console.log("\n=== Todo List ===");
  console.log("1. Add Todo");
  console.log("2. Toggle Todo");
  console.log("3. Delete Todo");
  console.log("4. Show All Todos");
  console.log("5. Exit");

  const choice = await rl.question("Enter your choice (1-5): ");
  switch (choice) {
    case "1":
      const title = await rl.question("Enter task title: ");
      todoManager.addTodo(title);
      break;
    case "2":
      const toggleId = parseInt(await rl.question("Enter task ID to toggle: "));
      todoManager.toggleTodo(toggleId);
      break;
    case "3":
      const deleteId = parseInt(await rl.question("Enter task ID to delete: "));
      todoManager.deleteTodo(deleteId);
      break;
    case "4":
      console.log(todoManager.getAllTodos());
      break;
    case "5":
      rl.close();
      process.exit(0);
    default:
      console.log("Invalid choice!");
  }
  showMenu(); // 递归调用菜单
}

// 启动程序
showMenu();

• 关键点：
  • 使用 readline/promises 实现交互式命令行。
  • showMenu() 递归调用保持程序运行。
  • 调用 TodoManager 的方法处理用户输入。

---

3. 配置与运行

(1) tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true  // 允许兼容 CommonJS/ES 模块
  }
}

(2) package.json 脚本

{
  "scripts": {
    "start": "ts-node src/index.ts",
    "build": "tsc",
    "run": "node dist/index.js"
  }
}

---

4. 运行程序

npm start

• 操作示例：

  === Todo List ===
  1. Add Todo
  2. Toggle Todo
  3. Delete Todo
  4. Show All Todos
  5. Exit
  Enter your choice (1-5): 1
  Enter task title: Buy milk
  

---

5. 关键 TypeScript 特性应用

1. 类型注解（如 : TodoItem）确保数据结构的正确性。
2. 类与私有属性（private todos）封装内部状态。
3. ES 模块化（import/export）组织代码。
4. 严格模式（strict: true）强制类型检查。

---

扩展方向

• 持久化存储：改用 JSON 文件或数据库（如 SQLite）。
• 前端界面：搭配 React/Vue（需配置额外工具链如 webpack）。
• 单元测试：用 Jest + ts-jest 测试 TodoManager 类。

如果需要更复杂的示例（如 HTTP API 或前端整合），可以进一步说明！