TypeScript 对比 JavaScript：类型系统实战指南

JavaScript vs TypeScript：类型差异

JavaScript 是动态类型的——类型在运行时确定。TypeScript 添加了静态类型，在编译时捕获错误。以下是实际含义。

关键 TypeScript 特性

1. 接口（Interfaces）

接口定义对象的形状：

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

在纯 JavaScript 中，你只能编写没有保证的对象：

// 没有类型安全——任何属性都可能出错
const user = { id: 1, name: "Alice", email: "alice@example.com" };

2. 类型别名 vs 接口

特性	Interface	Type Alias
扩展其他类型	`extends`	`&`（交叉类型）
映射类型	否	是
声明合并	是	否
计算属性	否	是

// 带联合类型的类型别名
type Status = "active" | "inactive" | "banned";

// 带 extends 的接口
interface AdminUser extends User {
  role: "admin";
  permissions: string[];
}

3. 泛型（Generics）

泛型让你编写可复用、类型安全的代码：

// 泛型函数
function firstElement(arr: T[]): T | undefined {
  return arr[0];
}

const num = firstElement([1, 2, 3]); // 类型: number
const str = firstElement(["a", "b"]); // 类型: string

4. 联合类型和交叉类型

// 联合类型——值可以是几种类型之一
type Result = number | { error: string };

// 交叉类型——合并多个类型
type DetailedUser = User & { createdAt: Date };

实际示例：API 响应

假设从 API 获得以下 JSON：

{
  "id": 42,
  "title": "TypeScript 指南",
  "author": { "name": "Bob", "avatar": "bob.jpg" },
  "tags": ["typescript", "tutorial"],
  "published": true
}

你可以手动编写 TypeScript 接口，或使用 YZIF 的 JSON 转代码生成器 自动生成：

interface Author {
  name: string;
  avatar?: string;
}

interface Article {
  id: number;
  title: string;
  author: Author;
  tags: string[];
  published: boolean;
}

为什么 TypeScript 更适合团队项目

1. **编译时捕获错误** — 空引用错误、拼写错误的属性 2. **更好的 IDE 支持** — 自动完成、重构、内联文档 3. **自文档化代码** — 类型作为活文档 4. **更安全的重构** — 重命名属性时编译器找到所有使用位置

立即开始

使用 YZIF 的 JSON 转代码生成器 将任意 JSON 即时转换为 TypeScript 接口，体验静态类型如何提升代码质量。