1.2 TypeScript 与 JavaScript 的关系 - 全栈应用开发修炼手册课程

🎯 学习目标

理解 TypeScript 与 JavaScript 的关系
掌握 TypeScript 作为 JavaScript 超集的含义
了解 TypeScript 的向后兼容性
认识 TypeScript 的扩展特性

🔗 超集关系

TypeScript 是 JavaScript 的严格超集，这意味着：

┌─────────────────────────────────────┐
│           TypeScript               │
│  ┌─────────────────────────────┐   │
│  │      JavaScript (ES6+)      │   │
│  │  ┌───────────────────────┐  │   │
│  │  │   JavaScript (ES5)    │  │   │
│  │  └───────────────────────┘  │   │
│  └─────────────────────────────┘   │
│                                    │
│  + 类型系统                        │
│  + 接口、泛型                      │
│  + 装饰器                          │
│  + 枚举、元组                      │
└─────────────────────────────────────┘
      

💡

核心原则

任何合法的 JavaScript 代码都是合法的 TypeScript 代码。这意味着你可以将 .js 文件重命名为 .ts，立即开始使用 TypeScript。

📊 特性对比

特性	JavaScript	TypeScript
变量声明	var, let, const	var, let, const + 类型注解
函数参数	无类型限制	可选类型 + 默认值
类	ES6 class	class + 访问修饰符
接口	不支持	interface 关键字
泛型	不支持	<T> 泛型语法
枚举	不支持	enum 关键字
装饰器	提案阶段	完整支持

💻 代码示例：渐进式迁移

第一步：原始 JavaScript

// user.js - 原始 JavaScript 代码
function createUser(name, age) {
  return { name, age };
}

const user = createUser('Alice', 25);
console.log(user.name);
      

第二步：添加类型注解

// user.ts - 添加 TypeScript 类型
interface User {
  name: string;
  age: number;
}

function createUser(name: string, age: number): User {
  return { name, age };
}

const user = createUser('Alice', 25);
console.log(user.name);
      

第三步：使用高级特性

// user.ts - 使用更多 TypeScript 特性
interface User {
  readonly id: number;
  name: string;
  age: number;
  email?: string; // 可选属性
}

function createUser(name: string, age: number, email?: string): User {
  return {
    id: Date.now(),
    name,
    age,
    email
  };
}

// 使用泛型创建响应类型
interface ApiResponse<T> {
  success: boolean;
  data: T;
  message: string;
}

function createUserResponse(user: User): ApiResponse<User> {
  return {
    success: true,
    data: user,
    message: '用户创建成功'
  };
}
      

🔄 编译输出

TypeScript 编译器会将代码转换为标准的 JavaScript：

TypeScript 源码

enum Role {
  Admin,
  User,
  Guest
}

interface Person {
  name: string;
  role: Role;
}

const admin: Person = {
  name: 'Admin',
  role: Role.Admin
};
          

编译后 JavaScript

var Role;
(function (Role) {
  Role[Role["Admin"] = 0] = "Admin";
  Role[Role["User"] = 1] = "User";
  Role[Role["Guest"] = 2] = "Guest";
})(Role || (Role = {}));

var admin = {
  name: 'Admin',
  role: Role.Admin
};
          

📝 本节小结

✅

• TypeScript 是 JavaScript 的严格超集
• 所有 JavaScript 代码都是合法的 TypeScript
• TypeScript 添加了类型系统、接口、泛型等特性
• 编译后输出标准 JavaScript，兼容所有环境