ESLint valid-typeof 规则详解：强制 `typeof` 比较使用合法字符串字面量

ESLint valid-typeof 规则详解强制typeof比较使用合法字符串字面量【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslinttypeof是 JavaScript 中判断变量类型最常用的运算符但它的返回值永远是固定的几个字符串。将typeof的结果与拼写错误的字符串如strnig、undefimed进行比较是日常开发中高频出现的低级笔误这类错误不会导致运行时崩溃却会让类型判断逻辑静默失效。ESLint 内置的valid-typeof规则正是为拦截这类问题而设计它强制要求typeof表达式只能与合法的类型字符串字面量进行比较并可选择性地开启requireStringLiterals选项进一步要求比较对象必须是字符串字面量。读完本文你将掌握该规则的完整配置方法、全部选项语义、源码级判定逻辑以及适用边界能够把它正确接入自己的 ESLint 配置并理解底层实现。规则概述为什么需要校验typeof的比较值typeof运算符对绝大多数使用场景返回以下 8 种字符串字面量之一undefinedobjectbooleannumberstringfunctionsymbolbigint将typeof表达式的结果与其他字符串字面量比较通常属于输入笔误。例如typeof foo strnig在运行时永远为false因为typeof永远不会返回strnig这个值程序却不会抛出任何错误问题会被无声地带入线上。valid-typeof规则的核心职责就是保证typeof的比较对象限定在上述合法字符串集合内相关定义见 lib/rules/valid-typeof.js 中的VALID_TYPES集合。在 ESLint 元信息中该规则被标记为type: problem属于“问题类”规则用于捕获可能导致程序行为错误的代码模式recommended: true已被纳入eslint:recommended推荐配置集开箱即用无需显式声明见 lib/rules/valid-typeof.js 及元数据 docs/src/_data/rules_meta.jsonhasSuggestions: true支持提供编辑器可一键应用的自动修复建议见下文“自动修复建议”一节。规则细节匹配的语法结构该规则作用于typeof一元表达式与其外层二元比较表达式的组合。它只关注以下四种比较运算符、、!、!源码中通过OPERATORS集合定义见 lib/rules/valid-typeof.js。从源码的监听逻辑看UnaryExpression访问器见 lib/rules/valid-typeof.js规则按以下分支处理若typeof表达式的兄弟节点是字符串字面量或静态模板字面量则取出其字面量值与VALID_TYPES集合比对不在集合内即报告invalidValue“Invalid typeof comparison value.”若兄弟节点是标识符undefined且确为未声明的全局引用则报告错误并给出把undefined替换为undefined的修复建议若开启了requireStringLiterals且兄弟节点既不是字符串字面量也不是另一个typeof表达式则报告notString“Typeof comparisons should be to string literals.”。值得注意的是typeof foo baz与普通变量比较在默认配置下是合法的——规则默认不干预这类比较因为变量baz的值可能在运行时才是确定的字符串只有开启requireStringLiterals后这类写法才会被禁止。错误示例以下代码违反了默认规则比较值不是合法类型字符串/*eslint valid-typeof: error*/ typeof foo strnig typeof foo undefimed typeof bar ! nunber typeof bar ! fucntion正确示例以下代码在默认规则下完全合法/*eslint valid-typeof: error*/ typeof foo string typeof bar undefined typeof foo baz typeof bar typeof qux注意后两行typeof foo baz是与变量比较typeof bar typeof qux是两个typeof表达式互比默认配置下均被允许。选项配置该规则接受一个对象选项schema 见 lib/rules/valid-typeof.js默认值见 lib/rules/valid-typeof.js选项类型默认值说明requireStringLiteralsbooleanfalse为true时typeof表达式只能与字符串字面量或其他typeof表达式比较禁止与任何其他值比较requireStringLiterals: true开启后规则会额外收紧比较对象任何非字符串字面量、非typeof表达式的比较值都会报错包括undefined、Object、数字、普通变量等。开启该选项后的错误示例/*eslint valid-typeof: [error, { requireStringLiterals: true }]*/ typeof foo undefined typeof bar Object typeof baz strnig typeof qux some invalid type typeof baz anotherVariable typeof foo 5开启该选项后的正确示例/*eslint valid-typeof: [error, { requireStringLiterals: true }]*/ typeof foo undefined typeof bar object typeof baz string typeof bar typeof qux典型场景中typeof foo undefined是常见的错误写法foo未声明时会抛ReferenceError声明为null或undefined时比较结果也不符合预期正确写法是typeof foo undefined。这也是该选项最有价值的使用场景。默认配置下的一个特殊分支全局undefined标识符即使不开启requireStringLiterals规则仍会拦截一种隐蔽的写法——把裸标识符undefined直接与typeof表达式比较例如if (typeof bar ! undefined) {}源码通过isReferenceToGlobalVariable判断见 lib/rules/valid-typeof.js只有当undefined是全局作用域中未在源码内声明的变量引用时才报告因此function f(undefined) { typeof x undefined }这类把undefined作为局部参数名的写法不会误报对应测试见 tests/lib/rules/valid-typeof.js。自动修复建议对于上述undefined比较规则提供名为suggestString的修复建议见 lib/rules/valid-typeof.js 与 lib/rules/valid-typeof.js可自动将裸标识符替换为字符串字面量。默认配置下报告invalidValue消息并附建议开启requireStringLiterals时报告notString消息同样附带建议。测试中验证的修复结果为见 tests/lib/rules/valid-typeof.js// 修复前 typeof foo undefined // 修复后 typeof foo undefined需要说明的是这是“建议suggestion”而非“修复fix”在编辑器或--fix模式下需要显式接受不会静默改写代码。边界与细节模板字面量、写法方向与比较运算符从测试用例tests/lib/rules/valid-typeof.js中可以梳理出规则对各类写法的处理边界静态模板字面量同样受检typeof foo string合法而typeof bar umdefined会报invalidValue见 tests/lib/rules/valid-typeof.js 与 tests/lib/rules/valid-typeof.js动态模板字面量不算静态值typeof foo str${somethingElse}在默认配置下合法因为其值在运行时才能确定但开启requireStringLiterals后会报notString见 tests/lib/rules/valid-typeof.js 与 tests/lib/rules/valid-typeof.js比较方向无关strnig typeof foo与typeof foo strnig同样会被检查见 tests/lib/rules/valid-typeof.js四种比较运算符全覆盖、、!、!均纳入检查带括号的写法正常识别typeof(foo) string等写法不会被漏检见 tests/lib/rules/valid-typeof.js非比较用途不干预typeof foo thing这类拼接运算不属于比较场景规则不检查见 tests/lib/rules/valid-typeof.jssymbol与bigint同样合法这两个较新的类型字符串已包含在VALID_TYPES中见 lib/rules/valid-typeof.js。如何启用与配置由于该规则在recommended: true中使用官方推荐配置即可直接生效// eslint.config.js export default [ { rules: { valid-typeof: error, // 或使用对象选项 valid-typeof: [error, { requireStringLiterals: true }], }, }, ];也可以直接继承eslint:recommended或eslint/js的recommended配置无需显式书写该规则仓库中推荐配置的集成测试见 tests/conf/eslint-recommended.js。何时关闭该规则如果项目会在宿主对象host objects如浏览器或 Node.js 运行时提供的对象上使用typeof运算符可以考虑关闭此规则。宿主对象的typeof行为不受 ECMAScript 规范约束某些环境下可能返回超出标准集合的字符串例如旧版浏览器中某些宿主对象返回unknown此时强制校验合法字符串会引入误报。对这类边界场景可通过规则配置按文件或目录局部关闭。小结valid-typeof是一个低误报、高价值的内置问题类规则默认即可捕获拼写错误如strnig、undefimed导致的静默失效比较requireStringLiterals: true可进一步杜绝与裸undefined、构造器、普通变量等非字面量的比较建议在严格类型检查的团队规范中开启规则的判定逻辑集中实现在 lib/rules/valid-typeof.js完整行为矩阵可对照测试文件 tests/lib/rules/valid-typeof.js 验证。将它与 ESLint 的推荐配置一起使用能有效减少 JavaScript 类型判断代码中最常见的那一类“不报错但永远不成立”的隐蔽缺陷。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考