1. 基本概念对比

2. 类型系统对比

JavaScript - 动态类型

// JavaScript
let variable = 42;        // 数字
variable = "Hello";       // 可以改为字符串
variable = true;          // 可以改为布尔值
variable = { name: "JS" }; // 可以改为对象

function add(a, b) {
    return a + b;  // 运行时才知道类型
}

add(1, 2);        // 3
add("1", "2");    // "12" - 字符串拼接

TypeScript - 静态类型

// TypeScript
let variable: number = 42;     // 明确指定为数字类型
// variable = "Hello";         // ❌ 编译错误！

// 使用联合类型支持多种类型
let flexible: number | string | boolean = 42;
flexible = "Hello";            // ✅ 允许
flexible = true;               // ✅ 允许

function add(a: number, b: number): number {
    return a + b;  // 编译时就确定类型
}

add(1, 2);         // 3
// add("1", "2");  // ❌ 编译错误！

3. 开发流程对比

4. 主要特性对比

5. TypeScript 独有特性

5.1 接口（Interface）

// TypeScript - 接口定义对象结构
interface User {
    id: number;
    name: string;
    email?: string;  // 可选属性
}

function createUser(user: User): void {
    console.log(`创建用户: ${user.name}`);
}

// 使用接口
createUser({ id: 1, name: "张三" });  // ✅
// createUser({ name: "李四" });       // ❌ 缺少id属性

5.2 泛型（Generics）

// TypeScript - 泛型函数
function identity<T>(value: T): T {
    return value;
}

let num = identity<number>(42);      // 返回 number 类型
let str = identity<string>("Hello");  // 返回 string 类型

// 泛型接口
interface Container<T> {
    value: T;
    getValue(): T;
}

5.3 枚举（Enum）

// TypeScript - 枚举
enum Status {
    Pending = "PENDING",
    Active = "ACTIVE",
    Completed = "COMPLETED"
}

let currentStatus: Status = Status.Active;

6. 错误检测对比

7. 实际应用场景对比

小型项目

// JavaScript - 适合快速原型开发
const calculator = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b
};

console.log(calculator.add(5, 3));

大型项目

// TypeScript - 适合大型团队协作
interface Calculator {
    add(a: number, b: number): number;
    subtract(a: number, b: number): number;
}

class ScientificCalculator implements Calculator {
    add(a: number, b: number): number {
        return a + b;
    }
    
    subtract(a: number, b: number): number {
        return a - b;
    }
    
    // 扩展功能
    power(base: number, exponent: number): number {
        return Math.pow(base, exponent);
    }
}

8. 选择建议

9. 配置文件对比

JavaScript - 几乎无需配置

// package.json
{
  "name": "js-project",
  "scripts": {
    "start": "node index.js"
  }
}

TypeScript - 需要配置文件

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

总结

选择 JavaScript 还是 TypeScript 取决于项目需求、团队规模和对类型安全的要求。TypeScript 提供了更好的开发体验和代码可维护性，但也增加了一定的学习成本和配置复杂度。