TypeScript typeof 类型守卫怎么用

刚接触 TypeScript 的开发者，常会被“类型检查的灵活度”和“代码安全”之间的平衡绕晕——明明写了类型注解，却在处理不同类型的值时频频报错；或是想让代码自动识别变量类型，却要手动加大量判断。这时候，typeof 类型守卫就是帮你解决这些问题的实用工具，而且用法比你想的简单。

先搞懂：什么是类型守卫？

简单说，它是 TypeScript 的“类型自动识别工具”——当你用 typeof 判断变量的类型时，TypeScript 会根据这个判断，自动缩小变量的“类型范围”，不用你再手动声明。举个生活化的例子：你手里有个“包裹”，不确定里面是衣服（string）还是零食（number），用 typeof 拆开看一眼，TypeScript 就会记住“这个包裹现在是衣服”，后续处理时就不会乱报错。

最基础的用法：判断原始类型

原始类型就是 string、number、boolean、undefined 这些基础类型，用 typeof 做判断时，TypeScript 会直接缩小范围。比如你写一个处理“用户输入”的函数，输入可能是文字（string）或数字（number）：

`typescript

function processInput(input: string | number) {

// 用 typeof 判断 input 是 string

if (typeof input === 'string') {

// 这里 TypeScript 自动把 input 识别为 string

return input.trim(); // 只有 string 才有 trim 方法，不会报错

}

// 否则就是 number

return input.toFixed(2); // 只有 number 才有 toFixed 方法，安全调用

}

`

如果没有这个 typeof 判断，TypeScript 会认为 input 可能是 string 或 number，直接写 input.trim() 时会提示“可能不存在该方法”，加了判断就完全没问题——就像你先确认手里是衣服再叠，是零食再装袋，不会拿错工具。

进阶一点：处理特殊情况

有时候会遇到 null 或 function，用 typeof 也能搞定，但要注意特殊边界：比如 typeof null 会返回 object，这是 JS 的历史遗留问题，所以判断 null 时要单独加条件；判断函数时，typeof 函数名 === 'function' 就能识别。

举个例子：处理“可能是值或计算函数”的场景：

`typescript

type ValueOrFunc = number | (() => number);

function getValue(item: ValueOrFunc) {

// 判断是函数

if (typeof item === 'function') {

// 自动识别为 () => number，直接调用

return item();

}

// 否则是 number

return item;

}

`

这里如果 item 是函数，TypeScript 会自动知道它是“返回 number 的函数”，不会让你错把它当数字用；如果是数字，就直接返回——就像你不确定手里的是“成品零食”还是“零食券（要兑换）”，先查是不是券（函数）再用，不会乱兑换。

用的注意事项：别踩这些小坑

• 只适用于原始类型，复杂类型（比如数组、对象）用 typeof 会返回 object，没法区分数组和普通对象，这时候得换 instanceof 或自定义类型守卫。
• 别写错判断格式，typeof 后面要跟引号里的类型字符串，比如 typeof input === 'string'，不能写成 typeof input === string（会报错）。
• 处理联合类型时，判断必须是“全等/严格不等”（===/!==），不能用 ==/!=，否则 TypeScript 不会生效。

其实 TypeScript 的 typeof 类型守卫，本质就是帮你把“手动判断类型”的工作交给编译器，让代码既灵活又安全——就像生活里用“标签”区分物品，代码里用“类型判断标签”让编译器帮你把关，不用再反复折腾类型转换的问题。