javascript - Typescript - 'fetch' adını bulamıyor (evrensel kütüphane)

AJAX çağrıları (fetch API kullanılarak) ile Typescript kütüphanesi oluşturmayı hedefliyorum, bu kütüphane hem istemci tarafı (Webpack/Browserify) hem de arka uç geliştiricileri (Node) tarafından kullanılabilir.

Ancak, fetch öğesini hatasız derlemeyi başaramıyor gibi görünüyordum.

İlk denemem isomorphic-fetch ve @types/isomorphic-fetch ile oldu. Tiplerin tam olup olmadığından emin değilim, ama herhangi bir global değişken getirmediler (fetch'i getirmeleri gerekmiyor muydu?).

npm i isomorphic-fetch @types/isomorphic-fetch

index.ts

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

tsconfig.json

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

Çıktı :

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”’a ihtiyacım var mı? Görünüşe göre, dom kütüphanesi ile hem derleniyor hem de çalışıyor ✓, ama Node üzerinde gerçekten çalışıp çalışmayacağı konusunda kontrolüm yok. Yani, import 'isomorphic-fetch' yapıp yapmadığıma bakılmaksızın derlenecek, ama eğer bunu atladıysam Node üzerinde bildirim olmadan başarısız olacak.

Ayrıca, Node 'dom' değildir, tarayıcıları da desteklemek istememe rağmen.

İkinci denemem whatwg-fetch ile oldu.

npm i whatwg-fetch @types/whatwg-fetch

tsconfig.json

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

Bu bile derleme aşamasından geçmiyor ("dom" kütüphanesinden bağımsız olarak):

> 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" ile:

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'.
...

Ayrıca fetch-ponyfill gibi diğer benzer kütüphanelerle de denedim, ama bu kütüphanenin TypeScript için tipleri bile yok.

Evrensel bir uygulamada (tarayıcı + Node) fetch'i nasıl çağırmamız gerekiyor?

Teşekkürler!

Cevap #1

Doğru tür tanımlarını almak için birkaç seçeneğiniz var.

Eğer TypeScript’iniz tarayıcıda çalışacaksa:

Yerleşik "DOM"'u derleyici kütüphanelerinize ekleyin (ya --lib komut satırı derleyici seçeneği ile ya da tsconfig.json içindeki lib'e). Kütüphanelere "DOM" eklemek, TypeScript'iniz modern bir tarayıcıda çalışacaksa muhtemelen doğru seçenek olacaktır. Ancak, TypeScript'iniz fetch modüllü tarayıcı dışı bir ortamda çalışıyorsa, Seçenek 2'yi kontrol edin.

TypeScript'iniz sunucuda (node.js) çalışacaksa:

Node üzerinde node-fetch gibi bir kütüphane kullanıyorsanız, @types/node-fetch tür tanımlarını ekleyin ve fetch'i import fetch from "node-fetch" şeklinde içe aktarın.

Eğer TypeScript’iniz hem tarayıcıda hem de sunucuda çalışıyorsa (ör. bir sunucu tarafı render projesi için) DOM kütüphanesini içe aktarın ve muhtemelen isomorphic-fetch paketini eklemek isteyeceksiniz.

Cevap #2

Bir Angular (TypeScript) projesinde fetch kullanırken aynı hatayı aldım, bunu fetch'i şu şekilde tanımlayarak çözebildim:

  declare var fetch;

İlgili makaleler