TypeScript 类型守卫 (Type Guard) 完全详解：typeof、instanceof、自定义

你想要系统掌握 TypeScript 中三种核心的类型守卫（typeof、instanceof、自定义），包括它们的作用、用法、适用场景和区别，这篇内容会完整覆盖所有知识点，保证易懂且实用。

一、什么是「类型守卫」？核心作用

类型守卫（Type Guard） 是 TypeScript 中一种运行时检查的语法 / 逻辑，它的核心作用是：✅ 在代码执行阶段判断一个值的具体类型，让 TypeScript 编译器能收窄（缩小）该值的类型范围；✅ 解决 TypeScript 「类型宽泛」导致的类型不安全问题，避免 any 类型滥用，让代码获得更精准的类型提示和编译校验。

核心本质：运行时判断 + 编译时类型收窄，让编译器「知道」变量的具体类型，而非宽泛的联合类型 / 未知类型。

二、typeof 类型守卫（基础内置）

✅ 适用场景

专门用于判断 原始数据类型，TypeScript 原生支持，精准匹配 JS 原生的 typeof 运算符返回值。支持判断的原始类型包含：string、number、boolean、symbol、undefined、bigint、function

✅ 核心语法

typescript

运行

if (typeof 变量 === \’目标类型字符串\’) {
// 这里变量的类型会被精准收窄为「目标类型」
}

✅ 完整示例（解决联合类型收窄问题）

最常见的场景：联合类型中通过 typeof 区分原始类型，避免类型错误

typescript

运行

// 定义联合类型：字符串/数字/布尔值
function printValue(value: string | number | boolean) {
// 1. 收窄为 string 类型
if (typeof value === \’string\’) {
console.log(\’字符串长度：\’, value.length); // ✅ 安全，编译器知道是string
}
// 2. 收窄为 number 类型
else if (typeof value === \’number\’) {
console.log(\’数字翻倍：\’, value * 2); // ✅ 安全，编译器知道是number
}
// 3. 自动收窄为 boolean 类型（剩余分支）
else {
console.log(\’布尔值取反：\’, !value); // ✅ 安全
}
}

printValue(\’TypeScript\’); // 字符串长度： 10
printValue(66); // 数字翻倍： 132
printValue(true); // 布尔值取反： false

✅ 重要注意点（typeof 缺陷）

typeof 不能判断对象 / 数组 / Null，因为 JS 原生的 typeof 对这些类型的返回值有「坑」：

• typeof {} → 返回 \’object\’

<