Create React App 如何允许 Array.prototype.at() 而 TypeScript 不允许？

Question

在我们的 CRA 项目中，我们有这样的代码：

const patTable = tables['pat'].at(0);

Array.prototype.at() 功能是一个新功能，在旧版浏览器（例如 Chrome 89）中不可用。但由于某种原因，CRA 甚至没有发出警告或错误消息，并且很容易接受它。它还没有填充 .at() 函数，现在它正在破坏旧浏览器中的应用程序。

WebStorm 显示的推断类型为Table | undefined（由于@types/node 16.x，但我不确定）。

还要注意 TypeScript 还不支持.at()，例如：

function foo(values: string[]) {
  const value = values.at(0);
}

引发错误：Property 'at' does not exist on type 'string[]'.(2339)

Sandbox

您是否有任何想法，TS 检查、linting 或构建都没有检测到问题怎么可能？

TS版本为：4.3.5 tsconfig.json 是：

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "sourceMap": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "types/global-fetch.d.ts"]
}

Answer 1

即使您正在处理面向浏览器的代码，它也可能是从 Node.js 类型中提取出来的。 Node.js 的类型包括RelativeIndexable——来自@types/node/globals.d.ts：

//#region ArrayLike.at()
interface RelativeIndexable<T> {
    /**
     * Takes an integer value and returns the item at that index,
     * allowing for positive and negative integers.
     * Negative integers count back from the last item in the array.
     */
    at(index: number): T | undefined;
}
interface String extends RelativeIndexable<string> {}
interface Array<T> extends RelativeIndexable<T> {}
interface Int8Array extends RelativeIndexable<number> {}
interface Uint8Array extends RelativeIndexable<number> {}
interface Uint8ClampedArray extends RelativeIndexable<number> {}
interface Int16Array extends RelativeIndexable<number> {}
interface Uint16Array extends RelativeIndexable<number> {}
interface Int32Array extends RelativeIndexable<number> {}
interface Uint32Array extends RelativeIndexable<number> {}
interface Float32Array extends RelativeIndexable<number> {}
interface Float64Array extends RelativeIndexable<number> {}
interface BigInt64Array extends RelativeIndexable<bigint> {}
interface BigUint64Array extends RelativeIndexable<bigint> {}
//#endregion ArrayLike.at() end

我在使用 Node 构建的项目中使用 Node.js 类型时遇到了这个问题，即使它们是为浏览器构建的。 （我主要是在setTimeout 的返回值上遇到它。）我刚刚检查了一个项目，果然，它很高兴使用at（并将其解析为上述问题），即使我从未明确表示过在项目中安装了@types/node。

我不使用 WebStorm，但在 VSCode 中，您可以通过将光标放在 at 上并按 F12 以“转到定义”来检查 at 的类型来自何处。大概 WebStorm 也有类似的东西。

我认为这是有用的信息，并且比评论更适合作为答案，但它确实提出了一个问题“那么我该如何防止这种情况发生？”我不得不承认我现在无法回答。我已将答案标记为 CW，希望有人可以更新以解决它。