打字稿-找不到名称“提取”（通用库）

Question

我的目标是使用AJAX调用（通过使用访存API）构建Typescript库，客户端（Webpack / Browserify）和后端开发人员（Node）都可以使用它。

但是，我似乎无法毫无错误地fetch进行编译。

---

我的第一次尝试是isomorphic-fetch和@types/isomorphic-fetch。我不确定类型是否完整，但是它们没有带来任何全局变量（它们应该带来访存，不是吗？）。

npm i isomorphic-fetch @types/isomorphic-fetch

索引

import 'isomorphic-fetch';
export function execute() {
  return fetch('...') ...
}

tsconfig.json

"compilerOptions": {
  ...
  "lib": ["es2015", "es2016", "es2017"]
}

输出：

node_modules/@types/isomorphic-fetch/index.d.ts(8,30): error TS2304: Cannot find name 'fetch'.
src/index.ts(4,25): error TS2304: Cannot find name 'fetch'.

我需要“ dom”吗？显然，使用domlib可以同时编译和运行这两个函数，但是我无法控制它是否真的可以在Node上运行。我的意思是，它将编译是否为I import 'isomorphic-fetch'，但是如果我错过了，它将在Node上失败而无需通知。

另外，dom无论我也要支持浏览器，Node都不是“ ”。

---

我的第二次尝试是与whatwg-fetch。

npm i whatwg-fetch @types/whatwg-fetch

tsconfig.json

"lib": ["es2015", "es2016", "es2017"] // The same.

这个甚至都没有通过编译阶段（无论“ dom”库如何）：

> tsc --watch

node_modules/@types/whatwg-fetch/index.d.ts(11,27): error TS2304: Cannot find name 'window'.
node_modules/@types/whatwg-fetch/index.d.ts(31,25): error TS2304: Cannot find name 'Blob'.
node_modules/@types/whatwg-fetch/index.d.ts(31,64): error TS2304: Cannot find name 'FormData'.
node_modules/@types/whatwg-fetch/index.d.ts(36,21): error TS2304: Cannot find name 'Blob'.
node_modules/@types/whatwg-fetch/index.d.ts(37,25): error TS2304: Cannot find name 'FormData'.
17:31:50 - Compilation complete. Watching for file changes.

使用“ dom”：

node_modules/typescript/lib/lib.dom.d.ts(9353,11): error TS2300: Duplicate identifier 'Request'.
node_modules/typescript/lib/lib.dom.d.ts(9370,13): error TS2300: Duplicate identifier 'Request'.
node_modules/typescript/lib/lib.dom.d.ts(9375,11): error TS2300: Duplicate identifier 'Response'.
node_modules/typescript/lib/lib.dom.d.ts(9386,13): error TS2300: Duplicate identifier 'Response'.
node_modules/typescript/lib/lib.dom.d.ts(14940,18): error TS2451: Cannot redeclare block-scoped variable 'fetch'.
node_modules/typescript/lib/lib.dom.d.ts(14945,6): error TS2300: Duplicate identifier 'BodyInit'.
node_modules/typescript/lib/lib.dom.d.ts(14966,6): error TS2300: Duplicate identifier 'HeadersInit'.
node_modules/typescript/lib/lib.dom.d.ts(14976,6): error TS2300: Duplicate identifier 'RequestInfo'.
node_modules/typescript/lib/lib.dom.d.ts(15043,6): error TS2300: Duplicate identifier 'ReferrerPolicy'.
node_modules/typescript/lib/lib.dom.d.ts(15044,6): error TS2300: Duplicate identifier 'RequestCache'.
node_modules/typescript/lib/lib.dom.d.ts(15045,6): error TS2300: Duplicate identifier 'RequestCredentials'.
node_modules/typescript/lib/lib.dom.d.ts(15046,6): error TS2300: Duplicate identifier 'RequestDestination'.
node_modules/typescript/lib/lib.dom.d.ts(15047,6): error TS2300: Duplicate identifier 'RequestMode'.
node_modules/typescript/lib/lib.dom.d.ts(15048,6): error TS2300: Duplicate identifier 'RequestRedirect'.
node_modules/typescript/lib/lib.dom.d.ts(15049,6): error TS2300: Duplicate identifier 'RequestType'.
node_modules/typescript/lib/lib.dom.d.ts(15050,6): error TS2300: Duplicate identifier 'ResponseType'.
...

---

我也尝试过使用其他类似的库，例如fetch-ponyfill，但是这个库甚至没有TypeScript可用的类型。

---

我们应该如何调用fetch通用应用程序（浏览器+节点）？

谢谢！

Answer 1

要获得正确的类型定义，您有几个选择。

如果您的 TypeScript 将在浏览器中运行：

添加了内置的“DOM”到你的编译器库（要么在--lib命令行编译器选项，或者LIB中tsconfig.json）。如果您的 TypeScript 将在现代浏览器中运行，那么将“DOM”添加到 libs 可能是正确的选择。但是，如果您的 TypeScript 是在具有 fetch 模块的非浏览器环境中运行，请检查选项 2。

如果您的 TypeScript 将在服务器 (node.js) 上运行：

如果你在node上使用像node-fetch这样的库，那么添加@types/node-fetch类型定义，然后像 import fetchimport fetch from "node-fetch"

如果您的 TypeScript 同时在浏览器和服务器中运行（例如，对于服务器端渲染项目），请导入 DOM 库，并且您可能想要添加isomorphic-fetch 包。

Answer 2

我在角度（打字稿）项目中使用 fetch 时遇到了同样的错误，我可以通过像这样声明 fetch 来解决它：

  declare var fetch;