在 TypeScript 配置文件“tsconfig.json”中，将“lib”编译器选项设置为“dom”和“dom.iterable”是否多余？

Question

根据有关编译器选项的 TypeScript 文档lib，在 TypeScript 配置文件中将lib编译器选项设置为 和dom是否多余？dom.iterabletsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable"],
  }
}

我个人认为上述设置是多余的，但我见过很多使用上述选项的示例代码/博客文章。但由于我不确定，我想知道为什么上面的设置会用于以下设置：

{
  "compilerOptions": {
    "lib": ["dom"],
  }
}

也许我只是吹毛求疵...或者也许有一个我不知道的正当理由为什么要同时指定dom和dom.iterable。如有任何澄清，我们将不胜感激。干杯!

Answer 1

tl;dr：不，指定两者并不多余。

\n

dom.iterable 向各种 DOM API添加可迭代的定义。dom如果您正在使用具有 DOM API 的运行时环境，则需要包含定义。dom.iterable如果您正在使用支持各种 DOM API 上的可迭代方法的运行时环境，则需要包含在内。dom当您使用的运行时环境支持具有可迭代方法的 DOM API 上的可迭代方法时，将其本身包括在内将意味着您在尝试访问这些可迭代方法时将遇到类型错误。包含dom.iterable本身不会起作用，因为它会添加到dom定义中。

\n

差异的例子

\n

下面是两个定义之间的一个差异的示例：

\n

在dom定义中，FormData看起来像这样：

\n

interface FormData {\n    append(name: string, value: string | Blob, fileName?: string): void;\n    delete(name: string): void;\n    get(name: string): FormDataEntryValue | null;\n    getAll(name: string): FormDataEntryValue[];\n    has(name: string): boolean;\n    set(name: string, value: string | Blob, fileName?: string): void;\n    forEach(callbackfn: (value: FormDataEntryValue, key: string, parent: FormData) => void, thisArg?: any): void;\n}\n

\n

\xe2\x80\x93参考

\n

在dom.iterable定义中，FormData看起来像这样：

\n

interface FormData {\n    [Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]>;\n    /**\n     * Returns an array of key, value pairs for every entry in the list.\n     */\n    entries(): IterableIterator<[string, FormDataEntryValue]>;\n    /**\n     * Returns a list of keys in the list.\n     */\n    keys(): IterableIterator<string>;\n    /**\n     * Returns a list of values in the list.\n     */\n    values(): IterableIterator<FormDataEntryValue>;\n}\n

\n

\xe2\x80\x93参考

\n

这些定义不会相互替换，而是合并。

\n

以下是定义文件供您自己比较：

\n

\n
• dom
\n
• dom.iterable
\n

\n

实际测试

\n

了解了上述差异后，您可以进行以下测试：

\n

\n
1. 使用以下配置设置 TypeScript 项目（重要的是 的空数组配置lib，其他所有内容都只是 的默认值tsc --init）：
\n

\n

{\n  "compilerOptions": {\n    "lib": [],\n\n    "target": "es5",\n    "module": "commonjs",\n    "esModuleInterop": true,\n    "forceConsistentCasingInFileNames": true,\n    "strict": true,\n    "skipLibCheck": true\n  }\n}\n

\n

\n
2. 创建一个index.ts包含以下内容的：
\n

\n

const data = new FormData();\n

\n

您应该从 TypeScript 中收到错误：

\n

\n

找不到名称“FormData”。

\n

\n

\n
3. 添加"DOM"到lib配置：
\n

\n

  "compilerOptions": {\n    "lib": ["DOM"],\n\n    ...\n  }\n

\n

FormData这解决了定义中声明的错误dom。

\n

\n
4. keys添加对from 方法的调用FormData，您的代码index.ts应该如下所示：
\n

\n

const data = new FormData();\n\ndata.keys();\n

\n

您应该从 TypeScript 中收到错误：

\n

\n

类型“FormData”上不存在属性“keys”。

\n

\n

\n
5. 添加"DOM.Iterable"到lib配置：
\n

\n

  "compilerOptions": {\n    "lib": ["DOM", "DOM.Iterable"],\n\n    ...\n  }\n

\n

这解决了错误，因为 的 定义dom.iterable声明了一些可迭代方法FormData，keys是其中之一。

\n

\n
6. "DOM"从 lib 配置中删除，只留下"DOM.Iterable"：
\n

\n

  "compilerOptions": {\n    "lib": ["DOM.Iterable"],\n\n    ...\n  }\n

\n

您将再次收到错误。

\n