为何Create React App允许使用Array.prototype.at()但TypeScript却不识别

1. TypeScript未报错的核心原因 #

• 你的tsconfig.json中compilerOptions.lib配置了esnext，esnext包含了所有尚在提案阶段以及最新定稿的ECMAScript API类型定义，其中就包含Array.prototype.at()的类型声明，所以TS不会报不存在该属性的错误。你单独写的示例代码在TS Playground中报错，是因为Playground默认没有引入esnext库和Node相关类型声明，和你本地环境不一致。
• 你本地安装的@types/node@16.x也会全局注入Array.prototype.at()的类型定义，进一步覆盖了基础类型检查。
• 另外你配置了skipLibCheck: true，这个配置会跳过对所有声明文件（.d.ts）的类型校验，即使存在类型版本不匹配的问题也不会抛出错误。

2. CRA编译环节未报错、未自动polyfill的原因 #

• CRA默认的Babel编译配置只会做语法转译，不会自动新增原型方法的polyfill，你需要手动配置core-js引入对应的polyfill，或者使用react-app-polyfill做兼容。
• CRA的默认校验规则不会检查你使用的API是否符合你配置的浏览器兼容目标，除非你额外接入对应兼容性校验插件。

3. Lint校验未检测到的原因 #

• 你当前的Lint规则里没有配置API兼容性校验相关的规则，默认的ESLint规则只会检查语法错误和代码规范问题，不会校验浏览器API的兼容性。

• 把tsconfig.json里的lib中的esnext替换为你实际需要兼容的ECMAScript版本，比如es2020，避免引入不需要的超前API类型定义。
• 接入eslint-plugin-compat，配置你需要兼容的浏览器版本范围，使用这类插件提前检测不兼容的API调用。
• 要么替换at()的用法为传统的arr[0]写法，要么手动引入Array.prototype.at()的polyfill兼容旧浏览器。

内容的提问来源于stack exchange，提问作者Onkeltem