TypeScript 快速上手指南：从 JavaScript 到类型安全

TypeScript 的核心价值在于为 JavaScript 添加了静态类型系统。它不会改变 JS 的运行逻辑，但能在代码运行前捕获大量潜在错误。本文通过最简代码示例，帮助你建立 TS 的核心认知。

1. 基础类型注解

TS 通过冒号 : 为变量、函数参数和返回值添加类型约束。

ts 复制代码

// 变量类型注解
let username: string = "alice";
let age: number = 25;
let isActive: boolean = true;

// 错误示例：类型不匹配会在编译时报错
// username = 123; // Error: Type 'number' is not assignable to type 'string'

记忆要点：类型注解是编译期检查，编译后的 JS 代码中所有类型信息都会被移除，不会影响运行时性能。

2. 数组与元组

数组有两种等价写法，元组则是固定长度和类型的数组。

ts 复制代码

// 数组：两种写法完全等价
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["a", "b"];

// 元组：固定长度、固定位置类型
let user: [string, number] = ["alice", 25];
// user = [25, "alice"]; // Error: 类型顺序必须严格匹配

记忆要点：普通数组元素类型统一，元组每个位置的类型独立且顺序固定，常用于函数返回多个值的场景。

3. 接口与可选属性

接口用于定义对象的结构契约，? 表示属性可选。

ts 复制代码

interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
}

const validUser: User = { id: 1, name: "alice" }; // email 可省略
const invalidUser: User = { id: 1 }; // Error: 缺少必需属性 name

记忆要点：接口只约束结构，不关心实现方式。只要对象包含所有必需属性且类型匹配，就视为合法，这被称为结构化类型系统。

4. 联合类型与类型收窄

联合类型允许一个值属于多种类型之一，配合条件判断可自动收窄类型。

ts 复制代码

function formatId(id: string | number): string {
  if (typeof id === "string") {
    // 此处 TS 自动推断 id 为 string
    return id.toUpperCase();
  }
  // 此处 TS 自动推断 id 为 number
  return id.toString();
}

记忆要点 ：联合类型用 | 连接，TS 会根据 typeof、in、自定义类型守卫等条件自动缩小类型范围，无需手动断言。

5. 泛型：可复用的类型模板

泛型让类型成为参数，避免为每种类型重复编写逻辑。

ts 复制代码

// T 是类型占位符，调用时确定具体类型
function firstItem<T>(arr: T[]): T | undefined {
  return arr[0];
}

const num = firstItem([1, 2, 3]); // 推断 T = number
const str = firstItem(["a", "b"]); // 推断 T = string

记忆要点：泛型类似函数的参数，只不过传递的是类型而非值。大多数场景下 TS 能自动推断泛型类型，无需显式标注。

6. 类型断言与非空断言

当开发者比编译器更了解类型时，可使用断言告知 TS。

ts 复制代码

// 类型断言：告诉 TS "我确定这是 HTMLInputElement"
const input = document.getElementById("myInput") as HTMLInputElement;
input.value = "hello";

// 非空断言：告诉 TS "这个值一定不是 null/undefined"
let maybeName: string | undefined = getName();
console.log(maybeName!.length); // ! 表示确信有值

记忆要点：断言是开发者的承诺，TS 不再做安全检查。仅在确信类型正确时使用，滥用会掩盖真实错误。

7. 实用工具类型速查

TS 内置了多个工具类型，避免手写复杂类型转换。

ts 复制代码

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

// Partial: 所有属性变为可选
type UpdateTodo = Partial<Todo>;

// Pick: 选取部分属性
type TodoPreview = Pick<Todo, "title" | "completed">;

// Omit: 排除部分属性
type TodoMeta = Omit<Todo, "description">;

记忆要点：工具类型基于泛型实现，是日常开发中使用频率最高的类型操作，优先使用内置工具而非自定义类型体操。

学习路径建议

先掌握类型注解、接口、联合类型，覆盖 80% 的日常开发场景。
遇到复杂类型需求时再学习泛型和工具类型，避免过早陷入类型体操。
始终开启 strict: true 配置，严格模式下的类型检查才有实际意义。
将 TS 视为辅助工具而非目标，类型服务于业务逻辑，而非反过来。