TypeScript 开发指南 / 01 - TypeScript 简介

TypeScript 简介

什么是 TypeScript？

TypeScript 是由 Microsoft 开发和维护的开源编程语言。它是 JavaScript 的超集（superset），在 JavaScript 的基础上添加了静态类型系统（static type system）和其他语言特性。

// 这是一段合法的 TypeScript 代码——同时也是合法的 JavaScript 代码
const greeting: string = "Hello, TypeScript!";
console.log(greeting);

核心理念可以概括为一句话：

TypeScript = JavaScript + 静态类型

发展历史

创始人：Anders Hejlsberg

Anders Hejlsberg 是编程语言领域的传奇人物，他的代表作品包括：

• Turbo Pascal（1983）——经典的 Pascal 编译器
• Delphi（1995）——快速应用开发工具
• C#（2000）——.NET 平台核心语言
• TypeScript（2012）——JavaScript 的类型化超集

设计目标

TypeScript 的设计遵循以下核心目标：

1. 静态类型检查

// TypeScript 会在编译时发现类型错误
function add(a: number, b: number): number {
  return a + b;
}

add("1", 2); // ❌ 编译错误：类型 "string" 不能赋给类型 "number"

2. 与 JavaScript 完全兼容

任何合法的 JavaScript 代码都是合法的 TypeScript 代码。这意味着：

• 无需重写现有代码即可开始使用 TypeScript
• 可以逐步在项目中引入类型
• 所有 JavaScript 库都可以直接使用

// 这段纯 JavaScript 可以直接保存为 .ts 文件
const items = [1, 2, 3];
const doubled = items.map(item => item * 2);
console.log(doubled); // [2, 4, 6]

3. 遵循 ECMAScript 标准

TypeScript 跟踪 ECMAScript（JavaScript 的标准化名称）的最新特性，并在编译时将其转换为目标环境支持的版本。

// 使用 ES2022 的顶层 await（TypeScript 支持）
const response = await fetch("https://api.example.com/data");
const data = await response.json();

// 使用 ESNext 的装饰器
function log(target: any, key: string) {
  console.log(`访问了属性: ${key}`);
}

class User {
  @log
  name = "Alice";
}

TypeScript vs JavaScript

编译过程

TypeScript 代码不能直接在浏览器或 Node.js 中运行，需要先编译（compile）为 JavaScript：

源代码 (.ts/.tsx)
       │
       ▼
   TypeScript 编译器 (tsc)
       │
       ▼
  JavaScript 代码 (.js/.jsx)
       │
       ▼
  浏览器 / Node.js 运行

// 源文件：app.ts
interface User {
  name: string;
  age: number;
}

function greet(user: User): string {
  return `你好，${user.name}！你今年 ${user.age} 岁。`;
}

const alice: User = { name: "Alice", age: 25 };
console.log(greet(alice));

// 编译输出：app.js（剥离了所有类型信息）
function greet(user) {
  return `你好，${user.name}！你今年 ${user.age} 岁。`;
}

const alice = { name: "Alice", age: 25 };
console.log(greet(alice));

注意：TypeScript 的类型信息只存在于编译阶段，运行时（runtime）不会有任何类型信息。这意味着 TypeScript 不会改变 JavaScript 的运行时行为。

为什么选择 TypeScript？

业务场景：大型团队协作

假设一个 10 人团队维护一个电商平台前端项目：

不使用 TypeScript：

// 开发者 A 写的函数
function createOrder(product, quantity, user) {
  // product 是什么结构？quantity 是字符串还是数字？user 有哪些字段？
  // 只有读源码才能知道
}

// 开发者 B 调用时
createOrder("iPhone", "2", { name: "Alice" });
// quantity 传了字符串，运行很久后才发现 Bug

使用 TypeScript：

interface Product {
  id: string;
  name: string;
  price: number;
}

interface User {
  id: string;
  name: string;
  email: string;
}

function createOrder(product: Product, quantity: number, user: User): Order {
  // 参数类型清晰明确，IDE 提供完整提示
}

// 开发者 B 调用时
createOrder("iPhone", 2, { name: "Alice" });
// ❌ 编译错误：Product 缺少 id 和 price 字段
// ❌ 编译错误：User 缺少 id 和 email 字段

真实数据

根据多个行业调查和统计：

谁在用 TypeScript？

许多知名项目和公司都在使用 TypeScript：

• 前端框架：Angular（原生 TypeScript）、Vue 3（重写为 TypeScript）、React（官方支持）
• 开发工具：VS Code（TypeScript 开发）、Deno（原生 TypeScript 运行时）、Bun
• 后端框架：NestJS、tRPC、Fastify
• 企业用户：Microsoft、Google、Airbnb、Slack、Discord、Asana

TypeScript 的编译器

TypeScript 的编译器 tsc 本身是用 TypeScript 编写的（自举/bootstrapping）。这是一个有趣的工程实践——用自己来编译自己。

TypeScript 源码 (.ts)
        │
        ▼
   之前版本的 tsc
        │
        ▼
  当前版本的 tsc (.js)

TypeScript 的版本策略

TypeScript 采用语义化版本（Semantic Versioning）：

• 主版本（Major）：不兼容的重大变更
• 次版本（Minor）：新增特性，每几周发布一次
• 修订版本（Patch）：Bug 修复

# 查看当前版本
tsc --version

# 安装特定版本
npm install [email protected]

注意：TypeScript 的 minor 版本可能包含一些细微的类型检查变更，升级时建议查看 TypeScript 发布日志。

学习路线图

基础入门          核心特性          高级类型
   │                │               │
   ├─ 基本类型      ├─ 接口         ├─ 工具类型
   ├─ 函数         ├─ 类           ├─ 条件类型
   ├─ 类型推断      ├─ 泛型         ├─ 映射类型
   │               ├─ 联合/交叉     ├─ 模板字面量
   │               └─ 类型收窄      │
   │                               │
   ▼                               ▼
框架实战          工程化实践        高级主题
   │                │               │
   ├─ React + TS    ├─ 构建配置      ├─ 类型体操
   ├─ Node.js + TS  ├─ 测试         ├─ 声明文件
   ├─ DOM 操作      ├─ 迁移指南      ├─ 编译器 API
   └─ HTTP 请求     └─ 最佳实践      └─ 装饰器

扩展阅读

• TypeScript 官方文档 - TypeScript for JavaScript Programmers
• TypeScript 官方设计目标
• 为什么 TypeScript 越来越受欢迎 - 2025 State of JS Survey
• Anders Hejlsberg - Introducing TypeScript (Channel 9)