前端进阶之旅前端进阶之旅
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
首页程序员面试题库TypeScript typeof 类型守卫 null object
TyTypeScript类型收窄

TypeScript typeof 类型守卫能识别什么,为什么还要单独排除 null?

typeof 提供的是 JavaScript 的基础分类,不是业务对象结构的完整证明。

前端进阶之旅 · 一题精讲更新于 2026.09.06
TypeScript#类型收窄#类型系统
先看核心答案读代码示例
理解线索

从基础分类走向具体契约

  1. 基础分支用运行时分类排除不相关的值
  2. 对象细分排除空值并决定是否允许数组等容器
  3. 成员证据继续确认需要使用的字段及其值类型

数字分支仍可能包含 NaN 和无穷,领域有效性需要额外检查。

核心回答

先记住这个答案

TypeScript 能识别 typeof 检查,并在相应分支把候选收窄到字符串、数字、布尔值等运行时类别。typeof 的结果包括 string、number、bigint、boolean、symbol、undefined、object 和 function;其中 null 的结果仍是 object,数组也属于 object。要读取业务对象字段,必须继续排除 null,并检查需要的属性和值类型。类型位置上的 typeof 则是在类型系统中查询变量的静态类型,与运行时分支检查用途不同。

  • typeof 识别基础类别,不能验证完整对象协议
  • object 分支要考虑 null、数组和具体字段
  • 类型位置 typeof 查询不会执行运行时判断

为什么 object 分支不能直接读字段

历史上 typeof null 就返回 object,TypeScript 不会为了更好看而改变 JavaScript 语义。输入若可能为空,仅检查 object 后直接访问属性仍然不安全。对象分类还包含数组、日期和各种实例,不能因此认定它拥有某个业务字段。

示例接受字符串或带字符串 label 的对象,先处理字符串,再逐步建立对象和字段证据。空值会被排除,属性存在后仍需检查字段类型。无法满足这份小契约时返回明确兜底,避免从一个宽泛对象判断跳到完整接口断言。

把基础类别与字段检查连接起来TypeScript
function labelOf(value: unknown): string {
  if (typeof value === 'string') return value.trim();
  if (typeof value === 'object' && value !== null &&
      'label' in value && typeof value.label === 'string') {
    return value.label.trim();
  }
  return 'unknown';
}
function incomplete(value: object | null) {
  if (typeof value === 'object') {
    // @ts-expect-error typeof object 尚未排除 null
    return value.toString();
  }
}

第一个函数只使用被证明是字符串的值,第二个函数保留反例,验证 object 判断之后空值仍是候选。若协议禁止数组,应在对象分支继续加入 Array.isArray 排除。

基础类型通过不等于业务值有效

typeof value 为 number 时,可以使用数字方法,但这个集合还包含 NaN 和正负无穷。金额、页码、时间戳等业务常常要求有限值、整数或范围限制,应继续使用对应检查。类似地,字符串类型并不能证明它是合法网址或有效日期。

typeof 为 function 可以证明可调用的基础形态,却不能自动证明函数接受某套参数并返回某种结果。动态插件接口需要明确适配协议或其他外部保证。把基础类别判断包装成过强类型谓词,会让后续调用得到不应有的安全感。

两种 typeof 写法不要混淆

表达式中的 typeof config 会在运行时返回分类字符串;类型位置中的 type Config = typeof config 则提取这个变量已有的静态类型,用于避免重复声明。后者在编译后被擦除,也不能检查从网络拿到的新对象是否与 config 一致。

调试时可以先确认当前报错来自哪一层。想辨别数组应考虑 Array.isArray,想区分受控类实例可以考虑 instanceof,想验证业务字段则继续做属性检查。每个检查只承担它能证明的范围,把它们组合成清楚的解析路径。

回答前,多想一步

容易答错的地方

typeof 返回 object 就说明是普通非空对象
该分类包含 null、数组及多个实例类型,不能直接推导业务结构;必须根据后续操作继续排除不适用的候选。
typeof 数字检查可以拒绝 NaN
NaN 的基础类型仍然是 number,有限性和取值范围需要额外判断;否则计算结果可能在类型通过的情况下继续传播无效数字。
试着用自己的话回答

面试官还会怎么问?

为什么数组不能通过 typeof 单独识别?

JavaScript 将数组归入 object 类别,专门识别数组应使用 Array.isArray;随后仍要验证每个元素是否满足需要的类型契约。

typeof 能检测某个 TypeScript 接口吗?

不能,接口在运行时不存在;应检查真实字段或使用解析器,不能把接口名字当成运行时构造函数或类型标签。

判断 function 后是否可以信任返回值?

只能建立基础可调用信息,具体参数和返回契约仍需受控来源、适配层或执行结果校验,不能凭分类字符串推导完整函数签名。

从一道题,走向一组知识

把知识连起来

类型系统基础

TypeScript 如何把 unknown 安全收窄为业务对象,而不是直接断言?

把多个基础证据组合成可维护的对象解析器

类型收窄

TypeScript instanceof 如何收窄实例,跨 iframe 为什么可能判断失败?

比较基础分类与原型链实例检查的适用范围

参考资料

  • TypeScript:typeof Type Guards
  • TypeScript:typeof Type Operator

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 为什么 object 分支不能直接读字段
  3. 基础类型通过不等于业务值有效
  4. 两种 typeof 写法不要混淆
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑