从 JavaScript 迁移到 TypeScript 的基础步骤

安装 TypeScript 作为开发依赖项，确保项目具备编译环境。通过 npm install -D typescript 或 yarn add -D typescript 完成安装。

创建 tsconfig.json 配置文件，定义编译选项和目标版本。典型配置包括 "target": "ES6" 和 "strict": true 等参数，确保类型检查的严格性。

将原有 .js 文件重命名为 .ts 扩展名，开始逐步添加类型注解。初始阶段可使用 any 类型临时绕过类型错误，后续逐步替换为具体类型。

核心逻辑的类型化重构

为计算器操作定义联合类型，明确支持的运算范围：

type Operation = '+' | '-' | '*' | '/' | '=' | 'clear';

为计算器状态创建接口，规范数据结构的形状：

interface CalculatorState {
  currentValue: string;
  previousValue: string;
  operation: Operation | null;
}

实现类型安全的运算函数，使用函数重载处理不同操作：

function calculate(a: number, b: number, op: Operation): number;
function calculate(a: string, b: string, op: Operation): string;
function calculate(a: any, b: any, op: Operation): any {
  // 具体实现逻辑
}

DOM 交互的类型增强

为 UI 元素添加类型断言，避免空值错误：

const display = document.getElementById('display') as HTMLInputElement;
const buttons = document.querySelectorAll('.btn') as NodeListOf<HTMLButtonElement>;

为事件处理器定义精确的参数类型：

buttons.forEach(btn => {
  btn.addEventListener('click', (e: MouseEvent) => {
    const target = e.target as HTMLButtonElement;
    // 处理按钮点击
  });
});

进阶类型技巧应用

使用泛型创建可复用的工具类型：

type Nullable<T> = T | null;
type StringNumber = string | number;

实现类型守卫确保运行时类型安全：

function isOperation(value: string): value is Operation {
  return ['+', '-', '*', '/', '=', 'clear'].includes(value);
}

应用映射类型简化状态管理：

type ReadonlyState = Readonly<CalculatorState>;
type PartialState = Partial<CalculatorState>;

错误处理与边界情况

定义自定义错误类型增强可调试性：

class CalculatorError extends Error {
  constructor(message: string) {
    super(message);
    this.name = "CalculatorError";
  }
}

实现输入验证函数预防类型错误：

function validateInput(value: StringNumber): number {
  const num = typeof value === 'string' ? parseFloat(value) : value;
  if (isNaN(num)) throw new CalculatorError("Invalid number input");
  return num;
}

为边界情况添加类型检查，如除以零处理：

function safeDivide(a: number, b: number): number {
  if (b === 0) throw new CalculatorError("Division by zero");
  return a / b;
}

工程化与模块组织

将类型定义集中管理，创建 types.ts 文件：

export type { Operation, CalculatorState };
export { CalculatorError };

按功能拆分模块，使用 ES 模块系统组织代码：

import { calculate } from './calculator';
import { Operation } from './types';

配置构建流程，添加 build 和 watch 脚本：

{
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w"
  }
}