我的目标是构建一个带有AJAX调用的Typescript库（通过使用fetch API），它可以被客户端（Webpack/Browserify）和后端开发人员（Node）使用。
但是，我似乎无法让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库，它可以在两个节点上编译和工作，但我无法控制它是否真的可以在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的类型。
我们应该如何在通用应用程序（浏览器+ Node）上调用fetch？
谢谢你，谢谢

4条答案

按热度按时间

xmq68pz91#

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

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

将内置的“DOM”添加到您的编译器库（使用the --lib command line compiler option或lib in tsconfig.json）。如果您的TypeScript将在现代浏览器中运行，则将“DOM”添加到库中可能是正确的选择。但是，如果您的TypeScript运行在具有fetch模块的非浏览器环境中，请检查选项2。

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

如果在node上使用node-fetch这样的库，则添加@types/node-fetch类型定义，并导入fetch（如import fetch from "node-fetch"）

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

赞(0）回复(0）举报 2023-11-17

k0pti3hp2#

我在一个angular（typescript）项目中使用fetch时也遇到了同样的错误，我可以通过像这样声明fetch来解决它：

declare var fetch;

字符串

i2byvkas3#

如果你使用下面的命令进行转译：

"ts-watch": "tsc file1.ts file2.ts --watch"

字符串
然后删除各个文件声明，如果你有一个有效的tsconfig.json，它应该可以工作：

"ts-watch": "tsc --watch"

型
下面是一个工作tsconfig的例子：

{
  "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/**/*",
  ]
}

2fjabf4q4#

安装**@types/node**20.8.4或更高版本可以解决这个问题。

npm install --save-dev @types/node@">=20.8.4"

NodeJS Typescript -找不到名称“fetch”(通用库)

4条答案

相关问题

热门标签

最新问答