Typescript - 找不到名称'fetch'(通用库)

时间:2017-07-08 15:40:40

标签: javascript node.js typescript fetch-api isomorphic-fetch-api

我的目标是使用AJAX调用构建 Typescript 库(使用fetch API),客户端可以使用它( Webpack / Browserify)后端开发人员(节点)。

但是,我似乎无法在没有错误的情况下编译fetch

我的第一次尝试是isomorphic-fetch@types/isomorphic-fetch。我不确定类型是否完整,但它们没有带来任何全局变量(它们应该带来fetch,不应该是它们吗?)

npm i isomorphic-fetch @types/isomorphic-fetch

index.ts

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”吗?显然,使用dom lib它会编译并在两者上工作✓但是我无法控制它是否真的在Node上工作。我的意思是,它会编译我是否import 'isomorphic-fetch',但如果我错过它将在Node上失败,恕不另行通知。

此外,Node不是“dom”,不管我是否也想支持浏览器。

我的第二次尝试是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

谢谢!

2 个答案:

答案 0 :(得分:1)

我在angular(typescript)项目中使用fetch时遇到了同样的错误,我可以通过声明这样的fetch来解决它:

  declare var fetch;

答案 1 :(得分:1)

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

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

将内置的“ DOM”添加到编译器库中(使用the --lib command line compiler optionlib in tsconfig.json)。如果您要在现代浏览器中运行TypeScript,则将“ DOM”添加到库中可能是正确的选择。但是,如果您的TypeScript在非浏览器环境中运行,且带有访存模块,请选中选项2。

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

如果在节点上使用node-fetch之类的库,则添加@types/node-fetch类型定义,并导入import fetch from "node-fetch"之类的提取

如果您的TypeScript在浏览器和服务器上都运行(例如对于服务器端渲染项目),请导入DOM lib,您可能想添加isomorphic-fetch package