类型断言和类型守卫

类型断言

在 TypeScript 中，类型断言（Type Assertion） 是一种手动告诉编译器“我知道这个值的类型比当前推断的更具体” 的方式。它不会改变运行时的行为，只影响 TypeScript 的静态类型检查。

⚠️ 类型断言是 “你向 TS 承诺”，而不是 “TS 帮你验证” —— 如果断言错误，运行时仍会出错！

---

🔧 语法（两种写法）

1. 尖括号语法（不推荐在 JSX 中使用）

let someValue: any = "hello";
let strLength: number = (<string>someValue).length;

2. as 语法（推荐，尤其在 React/JSX 中必须用这个）

let someValue: any = "hello";
let strLength: number = (someValue as string).length;

✅ 官方推荐始终使用 as 语法。

---

🎯 常见使用场景

场景 1：绕过 any 或宽泛类型的限制

const data: any = { name: "Tom", age: 25 };
// TS 不知道 data 有 name 属性
console.log((data as { name: string }).name); // ✅ 安全访问

场景 2：DOM 元素类型细化

const input = document.getElementById("myInput");
// input 类型是 HTMLElement | null，没有 value 属性
const value = (input as HTMLInputElement).value; // ✅ 告诉 TS 这是个输入框

场景 3：处理联合类型中某个具体类型

function getLength(x: string | null): number {
  if (x === null) return 0;
  // 此时 x 是 string | null，但你知道它不是 null
  return (x as string).length; // ✅ 或者更好：直接用 x.length（TS 能自动缩小类型）
}

💡 注意：如果 TS 已经能通过控制流分析缩小类型（如上面的 if (x !== null)），不需要断言！

场景 4：初始化未完全赋值的对象

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

// 暂时无法提供完整对象，但后续会补全
const user = {} as User;
user.name = "Alice";
user.age = 30;

⚠️ 风险：如果忘记赋值，运行时会出错。

---

✅ 更安全的替代方案：类型守卫（Type Guard）

与其强行断言，不如先检查：

// 不好的做法
function bad(input: unknown) {
  console.log((input as string).toUpperCase());
}

// 好的做法
function good(input: unknown) {
  if (typeof input === 'string') {
    console.console(input.toUpperCase()); // ✅ TS 自动缩小类型
  }
}

---

📌 关键总结

特性	说明
作用	手动指定变量的类型（覆盖 TS 推断）
运行时	无任何影响，纯粹编译时行为
风险	断言错误 → 编译通过但运行时报错
推荐语法	value as Type
最佳实践	仅在你100% 确定类型时使用；优先考虑类型守卫或改进类型设计

---

💡 一句话记住：

类型断言 = “我比 TypeScript 更懂这个值的类型” —— 用错会付出代价！
能不用就不用，能用类型守卫就用类型守卫。

类型守卫

在 TypeScript 中，类型守卫（Type Guard） 是一种在运行时检查变量类型的机制，它能让 TypeScript 在条件分支中“缩小”（narrow）变量的类型范围，从而在该分支内提供更精确的类型推断和安全访问。

---

🎯 核心目的

让联合类型（Union Type）在特定代码块中“变成”其中某一个具体类型。

---

✅ 常见类型守卫方式

1. typeof 类型守卫（用于原始类型）

function handleValue(x: string | number) {
  if (typeof x === 'string') {
    // ✅ TS 知道这里 x 是 string
    return x.toUpperCase();
  } else {
    // ✅ TS 知道这里 x 是 number
    return x.toFixed(2);
  }
}

2. instanceof 类型守卫（用于类或构造函数）

class Dog { bark() { console.log('Woof!'); } }
class Cat { meow() { console.log('Meow!'); } }

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark(); // ✅ 安全：TS 知道是 Dog
  } else {
    animal.meow(); // ✅ 安全：TS 知道是 Cat
  }
}

3. 自定义类型守卫函数（最强大！）

使用 类型谓词（type predicate）：parameterName is Type

interface Fish {
  swim: () => void;
  name: string;
}

interface Bird {
  fly: () => void;
  name: string;
}

// 自定义类型守卫函数
function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

function move(pet: Fish | Bird) {
  if (isFish(pet)) {
    pet.swim(); // ✅ TS 知道 pet 是 Fish
  } else {
    pet.fly();  // ✅ TS 知道 pet 是 Bird
  }
}

🔑 关键：函数返回类型写成 pet is Fish，这就是类型谓词。

4. 字面量类型守卫（常用于状态管理）

type Status = 'loading' | 'success' | 'error';

function handleStatus(status: Status) {
  if (status === 'loading') {
    // ✅ status 类型缩小为 'loading'
    showSpinner();
  } else if (status === 'success') {
    // ✅ status 类型缩小为 'success'
    showData();
  }
}

5. in 操作符守卫

interface Admin { role: string; }
interface User { email: string; }

function checkUser(user: Admin | User) {
  if ('role' in user) {
    // ✅ user 被缩小为 Admin
    console.log(user.role);
  } else {
    // ✅ user 被缩小为 User
    console.log(user.email);
  }
}

---

✅ 最佳实践

场景	推荐守卫方式
区分 string/number/boolean	typeof
区分类实例	instanceof
区分接口/对象形状	自定义守卫函数 或 in 操作符
区分字符串字面量	直接 === 比较

---

💡 总结一句话：

类型守卫 = 运行时的类型检查 + 编译时的类型缩小
它让 TypeScript 在联合类型中“看清”当前值的真实类型，从而安全地访问属性和方法。

这是 TypeScript 实现 “类型安全”与“动态性”平衡 的核心机制之一。