首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >类型记录-找不到名称'fetch‘(通用库)

类型记录-找不到名称'fetch‘(通用库)
EN

Stack Overflow用户
提问于 2017-07-08 15:40:40
回答 3查看 8.3K关注 0票数 12

我的目标是用AJAX调用构建一个类型记录库(通过使用取API),客户端 (Webpack/Browserify) 后端开发人员(Node)都可以使用这个库。

然而,我似乎无法让fetch编译而没有错误。

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

代码语言:javascript
运行
复制
npm i isomorphic-fetch @types/isomorphic-fetch

index.ts

代码语言:javascript
运行
复制
import 'isomorphic-fetch';
export function execute() {
  return fetch('...') ...
}

tsconfig.json

代码语言:javascript
运行
复制
"compilerOptions": {
  ...
  "lib": ["es2015", "es2016", "es2017"]
}

输出:

代码语言:javascript
运行
复制
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库可以编译和处理两个✓,但是我无法控制它是否真的能在Node上工作。我的意思是,它将编译是否我import 'isomorphic-fetch',但如果我错过它将失败在节点上没有通知。

而且,Node不是"dom",不管我是否也想支持浏览器。

我的第二次尝试是在whatwg-fetch

代码语言:javascript
运行
复制
npm i whatwg-fetch @types/whatwg-fetch

tsconfig.json

代码语言:javascript
运行
复制
"lib": ["es2015", "es2016", "es2017"] // The same.

这个程序甚至没有通过编译阶段(不管"dom“库是什么):

代码语言:javascript
运行
复制
> 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":

代码语言:javascript
运行
复制
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可用的类型。

如何在通用应用程序(browser + Node)上调用fetch

谢谢!

EN

回答 3

Stack Overflow用户

发布于 2019-01-19 19:57:56

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

如果您的将在浏览器中运行,则为

将内置的"DOM“添加到编译器库中(使用命令行编译器选项tsconfig.json)。如果您是TypeScript,那么在libs中添加"DOM“可能是正确的选择,它将在现代浏览器中运行。但是,如果您是TypeScript,则在非浏览器环境中运行,并使用获取模块检查选项2。

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

如果在节点上使用像节点取这样的库,那么添加@type/node-fetch类型定义,然后导入import fetch from "node-fetch"

,如果您的TypeScript同时在浏览器和服务器中运行(例如,对于服务器端呈现项目),则导入DOM,您可能希望添加同构取包

票数 6
EN

Stack Overflow用户

发布于 2017-10-24 14:44:19

我在一个角(类型记录)项目中使用fetch也有相同的错误,我可以这样声明fetch来解决这个问题:

代码语言:javascript
运行
复制
  declare var fetch;
票数 4
EN

Stack Overflow用户

发布于 2021-12-05 02:32:11

如果您正在使用以下命令进行转接:

代码语言:javascript
运行
复制
"ts-watch": "tsc file1.ts file2.ts --watch"

然后删除单独的文件声明,如果您有一个有效的tsconfig.json,它应该可以工作:

代码语言:javascript
运行
复制
"ts-watch": "tsc --watch"

下面是一个工作的tsconfig示例:

代码语言:javascript
运行
复制
{
  "compilerOptions": {
    "outDir": "lib",
    "sourceMap": true,
    "noImplicitAny": true,
    "lib": [
      "ES2015",
      "DOM"
    ],
    "module": "esnext",
    "target": "ES2015",
    "strict": true,
    "jsx": "react",
    "allowJs": true,
    "declaration": true,
    "moduleResolution": "node",
    "typeRoots": [
      "node_modules/@types/",
      "index.d.ts"
    ],
    "esModuleInterop": true
  },
  "include": [
    "./typescript/**/*",
  ]
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44987899

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档