TypeScript 类型收缩 - 赋能深层探索

前端

2024-02-04 20:12:56

TypeScript 类型收缩 - 轻松把握类型世界

TypeScript 中，类型收缩是在运行时根据类型系统对变量值进行检查，根据类型推断机制获取最具体的类型，从而赋予变量特定的约束条件。这种强大的功能提供了更加细粒度的类型控制，并最大限度地提高程序的健壮性和灵活性。

类型收缩 - 在类型系统中游刃有余

在 TypeScript 中，存在着类型注解、类型推论和类型兼容性等概念，对于刚接触 TypeScript 的开发人员来说，难以把握。不过，一旦我们掌握了类型收缩的精髓，就能轻松应对这些类型相关的问题。

实例解析 - 深入理解类型收缩

为了加深对类型收缩的理解，让我们通过几个实际实例来探究它的工作原理。

场景一：基础类型收缩

let padding: number | string = 10;

if (typeof padding === "number") {
  // padding 缩小为 number
  padding = padding * 2; // 类型安全地乘以 2
} else {
  // padding 缩小为 string
  padding = padding + "px"; // 类型安全地连接字符串 "px"
}

console.log(padding); // 输出：20 或 "10px"

场景二：复杂类型收缩

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

function getUser(id: number): User | undefined {
  if (id === 1) {
    // 返回类型缩小为 User
    return { name: "Alice", age: 20 };
  } else {
    // 返回类型缩小为 undefined
    return undefined;
  }
}

const user = getUser(1);
if (user) {
  // user 缩小为 User 类型
  console.log(user.name); // 输出：Alice
}

场景三：条件类型收缩

type AdminUser = User & { isAdmin: true };

function isAdmin(user: User): user is AdminUser {
  return user.isAdmin;
}

const adminUser = { name: "Bob", age: 30, isAdmin: true };
if (isAdmin(adminUser)) {
  // adminUser 缩小为 AdminUser 类型
  console.log(adminUser.isAdmin); // 输出：true
}