类型系统：给代码装上智能导航

第3章类型系统：给代码装上智能导航

欢迎来到TypeScript最迷人的核心地带------类型系统！如果说JavaScript是自由奔放的野马，TypeScript就是为它量身定制的智能鞍具。这一章，我们将揭开类型魔法的面纱，让你的代码获得"自解释"的超能力。别担心，这不是枯燥的理论课，而是一场充满惊喜的编码探险！

3.1 JavaScript 已有类型------老朋友的"新视角"

JavaScript中的类型你可能早已熟悉，但在TypeScript的聚光灯下，它们展现出全新的价值：

基础类型全家福

typescript 复制代码

// 基础类型七剑客
let username: string = "日落";  // 文字世界
let userAge: number = 18;         // 数字宇宙
let isVIP: boolean = true;        // 是非之地
let nothing: null = null;         // 空无一物
let notDefined: undefined = undefined; // 尚未存在
let bigIntVar: bigint = 9007199254740991n; // 超大整数
let symbolId: symbol = Symbol("uniqueID"); // 唯一印记

// 两大容器类型
const languages: string[] = ["TS", "JS", "Rust"]; // 数组-同类型集合
const person: { name: string; age: number } = {   // 对象-异构结构
  name: "RiLuo",
  age: 18
};

// 特殊成员：any - 类型系统的"逃生舱"
let mysteryBox: any = "可以是任意类型";
mysteryBox = 42;       // 数字？没问题！
mysteryBox = () => {}; // 函数？照样收下！

💡 关键进化 ：在JS中这些类型是运行时的，而TS将它们提升到设计时。就像建筑蓝图，在施工前就发现结构问题！

3.2 TypeScript 新增类型------给你的代码"专属身份证"

TS引入了这些强大的类型工具，解决JS的"身份模糊"问题：

🎭 元组 (Tuple) - 固定结构的数组

元组就像一个"定制化的数组"，不仅关心元素类型，还严格要求元素的位置和数量。

typescript 复制代码

// 定义经纬度坐标
let position: [number, number] = [116.4074, 39.9042]; 

// 定义HTTP响应
let httpResponse: [number, string] = [200, "OK"];

// 错误示例 - TS会立即揪出错误！
httpResponse = ["OK", 200]; // 类型顺序错误！

📦 void - 函数的"无返回值声明"

当函数不需要返回任何值时，void类型明确表达这一意图。

typescript 复制代码

function logMessage(msg: string): void {
  console.log(msg);
  // 这里没有return语句！
}

❓ unknown - 更安全的"神秘盒子"

unknown是TypeScript中的"薛定谔的盒子" - 我们不知道里面是什么，但打开时必须先确认内容物。它比any更安全，因为不能直接操作。

为什么需要unknown？

安全机制 ：任何对unknown值的操作都会触发错误，必须先用类型检查缩小范围
使用场景：处理第三方API响应、用户输入等不确定来源的数据
与any的区别 ：any是"我放弃治疗"，unknown是"我需要先验明正身"

typescript 复制代码

let safeBox: unknown = fetchExternalData();

// 直接操作会报错 - 比any更严格！
safeBox.toUpperCase(); // 错误：unknown类型不能操作

// 需要类型检查后才能使用
if (typeof safeBox === "string") {
  console.log(safeBox.toUpperCase()); // 安全！
} else if (Array.isArray(safeBox)) {
  console.log(safeBox.length); // 安全！
}

🛡️ never - 函数的"绝路宣言"

never表示"永远不可能发生"的情况，是类型系统的底部类型。

never的三大应用场景

函数场景：函数永远不会正常返回（抛出错误或死循环）
类型收窄：在条件判断中标识不可能的分支
哲学意义：代表程序逻辑的终点，就像黑洞一样吸收不可能的类型

typescript 复制代码

// 场景1：永远抛出错误的函数
function crash(message: string): never {
  throw new Error(message);
  // 这里永远不会执行到函数结尾！
}

// 场景2：死循环函数
function infiniteLoop(): never {
  while (true) { /* ... */ }
  // 同样不会返回！
}

// 场景3：类型收窄的终极判断
type Shape = "circle" | "square";
function handleShape(shape: Shape) {
  switch (shape) {
    case "circle": /*...*/ break;
    case "square": /*...*/ break;
    default: 
      // 这里shape被收窄为never
      const _exhaustiveCheck: never = shape;
  }
}

3.3 类型注解 vs 类型推断------TS的"智能默契"

✍️ 类型注解 (Type Annotations) - 主动声明

类型注解是你给代码的"明确身份标签"，让意图更加清晰。

何时使用类型注解？

函数参数和返回值：明确API契约
未初始化的变量：TS无法推断时
复杂对象结构：增强可读性
需要明确约束的公共API：团队协作必备

typescript 复制代码

// 明确告诉TS变量类型
let bookTitle: string = "TypeScript深度指南";
let bookPrice: number = 99.9;

// 函数参数和返回值的注解
function calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}

🔍 类型推断 (Type Inference) - TS自动推理

TypeScript的"智能推理能力"让你写更少的代码，获得同样的类型安全。

类型推断的工作原理

变量初始化：根据赋值表达式右侧的值自动推导左侧类型
函数返回值：根据return语句自动判断
数组元素：智能合并所有元素的类型

typescript 复制代码

// TS根据初始值自动推断类型
let bookTitle = "TypeScript深度指南"; // 推断为string
let bookPrice = 99.9;                // 推断为number

// 函数返回类型自动推断
function calculateDiscount(price: number) {
  return price * 0.8; // 自动推断返回number
}

// 智能合并数组类型
const mixedArray = [1, "two", true]; // 推断为 (number | string | boolean)[]

最佳实践：像与聪明同事合作 - 大多数情况让TS自动推断（减少冗余），关键位置主动注解（增强可读性）

3.4 类型断言------关键时刻的"身份证明"

当TS无法确定类型时，你可以自信地告诉它："我知道这是什么！"

两种断言语法

typescript 复制代码

// 场景：从第三方库获取的数据
const apiData: unknown = `{"name": "RiLuo", "age": 18}`;

// 方法1：尖括号语法 (<类型>)
const user1 = (<{name: string, age: number}>JSON.parse(apiData));

// 方法2：as语法 (推荐，避免JSX歧义)
const user2 = JSON.parse(apiData) as {name: string, age: number};

console.log(user2.name.toUpperCase()); // 安全操作！

⚠️ 类型断言安全守则

类型断言不是类型转换！它只是绕过TS检查，滥用可能导致运行时错误：

typescript 复制代码

// 危险的双重断言 - 绕过类型检查
let num = "123" as unknown as number;
num.toFixed(2); // 运行时爆炸！

// 安全守则：
// 1. 只在确定类型时使用
// 2. 优先使用类型守卫（typeof/instanceof）
// 3. 避免双重断言

重要提醒：类型断言是"我向编译器保证"，而不是"请编译器帮我转换"。使用时要格外谨慎！

3.5 字面量类型------精确到"具体值"的约束

让变量只能取特定值，实现枚举般的精确控制：

基础字面量类型

typescript 复制代码

// 单个字面量类型
let direction: "left" | "right" | "up" | "down";
direction = "left";   // 正确
direction = "diagonal"; // 错误：没有这个选项！

// 结合函数使用
function setTheme(theme: "light" | "dark" | "system") {
  console.log(`应用${theme}主题`);
}

// 实战案例：HTTP状态码
type StatusCode = 200 | 201 | 400 | 404 | 500;
function handleResponse(code: StatusCode) {
  // 编辑器会自动提示所有可能状态码！
}

3.6 联合类型与交叉类型------类型的"组合艺术"

🤝 联合类型 (|) - "或"关系

联合类型表示"多种可能性中的一种"，是类型的逻辑或运算。

联合类型的核心特点

哲学意义：类型的逻辑或运算
关键技巧：使用时需要类型收窄（narrowing）
常见场景：函数处理多种类型输入、配置选项

typescript 复制代码

type ID = string | number;
function printId(id: ID) {
  // 需要类型收窄才能操作
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

// 智能提示：编辑器知道id可能是string或number

➕ 交叉类型 (&) - "且"关系

交叉类型表示"同时满足多种类型"，是类型的逻辑与运算。

交叉类型的工作机制

哲学意义：类型的逻辑与运算
实质效果：合并多个类型的属性
注意事项：同名属性类型必须兼容

typescript 复制代码

interface User {
  name: string;
  age: number;
}

interface Admin {
  permissions: string[];
  isSuperUser: boolean;
}

// 超级管理员：同时拥有User和Admin属性
type SuperAdmin = User & Admin;

const superUser: SuperAdmin = {
  name: "Alice",
  age: 30,
  permissions: ["create", "delete"],
  isSuperUser: true
};

// 错误示例：缺少属性会导致错误
const invalidAdmin: SuperAdmin = {
  name: "Bob",
  // 缺少age和permissions等属性
};

3.7 类型体操实战：智能奶茶点单系统

让我们通过一个实际案例，综合运用本章学到的所有类型技巧：

typescript 复制代码

// 定义字面量类型
type MilkTeaType = "原味" | "珍珠" | "椰果" | "芋圆";
type Size = "S" | "M" | "L";

// 组合类型
type BaseOrder = {
  type: MilkTeaType;
  size: Size;
  ice?: boolean;  // 可选属性
};

type SpecialOrder = BaseOrder & {
  sugarLevel: "无糖" | "微糖" | "全糖";
  toppings: string[];
};

// 使用联合类型
function placeOrder(order: BaseOrder | SpecialOrder) {
  if ("sugarLevel" in order) {
    console.log(
      `制作${order.size}杯${order.type}奶茶，甜度：${order.sugarLevel}，加料：${order.toppings.join("、")}`
    );
  } else {
    console.log(`制作${order.size}杯标准${order.type}奶茶`);
  }
}

// 点单示例
placeOrder({ type: "珍珠", size: "M" }); // 基础订单
placeOrder({ 
  type: "芋圆", 
  size: "L", 
  sugarLevel: "微糖", 
  toppings: ["布丁", "红豆"] 
}); // 定制订单

🚀 类型收窄技巧大全

掌握这些技巧，让你的类型判断更加精准：

typeof：判断基本类型
instanceof：判断类实例
in操作符：检查属性是否存在
自定义类型谓词 ：function isFish(pet: Fish | Bird): pet is Fish
可辨识联合：通过公共字段区分

本章核心收获

通过这一章的学习，你已经掌握了TypeScript类型系统的精髓：

类型即文档：代码自带解释说明，三个月后依然看得懂
错误预防系统：编码时捕获潜在bug，告别深夜调试
智能编码体验：自动补全+精准跳转，开发效率倍增
灵活类型组合：像搭积木一样构建复杂类型系统
安全机制 ：unknown和never提供更严谨的类型约束

成就解锁 ：你已经掌握了TypeScript最强大的武器！下一章我们将进入接口与对象类型的世界，学习如何用优雅的契约规范复杂数据结构。准备好升级你的类型设计思维了吗？

类型系统：给代码装上智能导航

第3章 类型系统：给代码装上智能导航

3.1 JavaScript 已有类型------老朋友的"新视角"

基础类型全家福

3.2 TypeScript 新增类型------给你的代码"专属身份证"

🎭 元组 (Tuple) - 固定结构的数组

📦 void - 函数的"无返回值声明"

❓ unknown - 更安全的"神秘盒子"

为什么需要unknown？

🛡️ never - 函数的"绝路宣言"

never的三大应用场景

3.3 类型注解 vs 类型推断------TS的"智能默契"

✍️ 类型注解 (Type Annotations) - 主动声明

何时使用类型注解？

🔍 类型推断 (Type Inference) - TS自动推理

类型推断的工作原理

3.4 类型断言------关键时刻的"身份证明"

两种断言语法

⚠️ 类型断言安全守则

3.5 字面量类型------精确到"具体值"的约束

基础字面量类型

3.6 联合类型与交叉类型------类型的"组合艺术"

🤝 联合类型 (|) - "或"关系

联合类型的核心特点

➕ 交叉类型 (&) - "且"关系

交叉类型的工作机制

3.7 类型体操实战：智能奶茶点单系统

🚀 类型收窄技巧大全

本章核心收获

第3章类型系统：给代码装上智能导航