在 TypeScript 中，缩小类型的过程被称为类型缩小（Type Narrowing）。当我们使用条件语句检查值的类型时，TypeScript 能够在特定的执行路径中缩小变量的类型，使其比声明时更为精确。本文将详细介绍 TypeScript 中常用的类型缩小方式，包括 typeof、instanceof、in 操作符、平等缩小以及自定义类型保护等内容。

一、基本介绍

1，什么是类型缩小

二、typeof 类型保护

1，基本用法

type IDType = number | string;

function printID(id: IDType) {
  // 使用 typeof 实现类型缩小，将 id 从联合类型缩小为 string 类型
  if (typeof id === 'string') {
    // 在这个分支中，TypeScript 知道 id 是 string 类型
    console.log(id.toUpperCase());
  } else {
    // 在这个分支中，TypeScript 知道 id 是 number 类型
    console.log(id);
  }
}

printID("hello");  // 输出: HELLO
printID(123);      // 输出: 123

2，typeof 支持的类型

// TypeScript 能识别的 typeof 类型保护形式
if (typeof x === "number") { /* x 是 number 类型 */ }
if (typeof x === "string") { /* x 是 string 类型 */ }
if (typeof x === "boolean") { /* x 是 boolean 类型 */ }
if (typeof x === "symbol") { /* x 是 symbol 类型 */ }
if (typeof x === "undefined") { /* x 是 undefined 类型 */ }
if (typeof x === "function") { /* x 是 Function 类型 */ }
if (typeof x === "object") { /* x 是 object 类型（注意：null 也是 object） */ }

三、平等缩小

1，基本概念

type Direction = "left" | "right" | "top" | "bottom";

function printDirection(direction: Direction) {
  // 使用 if 判断，缩小类型
  if (direction === 'left') {
    // 在这个分支中，direction 被缩小为 "left" 字面量类型
    console.log("向左移动");
  } else if (direction === 'right') {
    console.log("向右移动");
  } else {
    // 在这个分支中，direction 只能是 "top" 或 "bottom"
    console.log("垂直移动");
  }
}

printDirection("left");  // 输出: 向左移动

2，switch 语句缩小

type Direction = "left" | "right" | "top" | "bottom";

function printDirection(direction: Direction) {
  // 使用 switch 判断，缩小类型
  switch (direction) {
    case 'left':
      console.log("向左移动");
      break;
    case 'right':
      console.log("向右移动");
      break;
    case 'top':
      console.log("向上移动");
      break;
    case 'bottom':
      console.log("向下移动");
      break;
  }
}

printDirection("top");  // 输出: 向上移动

四、instanceof 类型保护

1，基本用法

class Student {
  studying() {
    console.log("正在学习");
  }
}

class Teacher {
  teaching() {
    console.log("正在教学");
  }
}

function work(p: Student | Teacher) {
  // 判断 p 是否为 Student 类型的实例，进行类型缩小
  if (p instanceof Student) {
    // 在这个分支中，p 被缩小为 Student 类型
    p.studying();
  } else {
    // 在这个分支中，p 被缩小为 Teacher 类型
    p.teaching();
  }
}

const stu = new Student();
work(stu);  // 输出: 正在学习

五、in 操作符类型保护

1，基本用法

// 定义 Fish 和 Dog 为对象类型
type Fish = {
  swimming: () => void;  // swimming 是函数类型
};

type Dog = {
  running: () => void;   // running 是函数类型
};

function walk(animal: Fish | Dog) {
  // 判断 swimming 是否为 animal 对象中的属性，进行类型缩小
  if ('swimming' in animal) {
    // 在这个分支中，animal 被缩小为 Fish 类型
    animal.swimming();
  } else {
    // 在这个分支中，animal 被缩小为 Dog 类型
    animal.running();
  }
}

// 创建 fish 对象，该对象的类型为 Fish 类型
const fish: Fish = {
  swimming() {
    console.log("swimming");
  }
};

walk(fish);  // 输出: swimming

六、自定义类型保护

1，类型谓词 is

type Fish = {
  swimming: () => void;
};

type Bird = {
  flying: () => void;
};

// 定义类型保护函数，返回类型是类型谓词
function isFish(pet: Fish | Bird): pet is Fish {
  return 'swimming' in pet;
}

function move(pet: Fish | Bird) {
  if (isFish(pet)) {
    // TypeScript 知道在这个分支中 pet 是 Fish 类型
    pet.swimming();
  } else {
    // TypeScript 知道在这个分支中 pet 是 Bird 类型
    pet.flying();
  }
}

const fish: Fish = {
  swimming() {
    console.log("鱼在游泳");
  }
};

move(fish);  // 输出: 鱼在游泳

2，类型保护函数的优势

interface Admin {
  name: string;
  privileges: string[];  // 管理员特有的权限列表
}

interface User {
  name: string;
  startDate: Date;      // 普通用户特有的注册日期
}

// 自定义类型保护函数
function isAdmin(account: Admin | User): account is Admin {
  return 'privileges' in account;
}

function printAccountInfo(account: Admin | User) {
  console.log("用户名:", account.name);
  
  if (isAdmin(account)) {
    console.log("权限列表:", account.privileges);
  } else {
    console.log("注册日期:", account.startDate);
  }
}

const admin: Admin = {
  name: "管理员",
  privileges: ["read", "write", "delete"]
};

printAccountInfo(admin);
// 输出:
// 用户名: 管理员
// 权限列表: ["read", "write", "delete"]