TypeScript 通用提取函数，BodyInit 的类型错误答案

【问题标题】：TypeScript generic fetch function, wrong type for BodyInitTypeScript 通用提取函数，BodyInit 的类型错误
【发布时间】：2021-02-02 15:13:27
【问题描述】：

我不明白这个错误。它说toBody() 返回一个Blob 类型。但对我来说它应该返回一个被BodyInit接受的字符串

export class CredentialsRequestBody
  implements RequestBody<CredentialsRequestBody> {
  constructor(username: string, password: string) {
    this.username = username;
    this.password = password;
  }
  username: string;
  password: string;
  toBody(): BodyInit {
    console.log(typeof JSON.stringify(Object.assign({}, this)).toString());
    return '{"username":"jonas", "password": "something"}'; //JSON.stringify(Object.assign({}, this)).toString();
  }

type methods = 'DELETE' | 'POST' | 'GET' | 'POST';
export async function request(
  url: string,
  method: methods,
  headers: any,
  body: RequestBody<any>
): Promise<any> {
  const defaultHeaders = {
    'Content-Type': 'application/json'
  };

  const requestOptions: RequestInit = {
    method: method !== null ? method : 'GET',
    headers:
      headers !== null
        ? {
            ...defaultHeaders,
            ...headers
          }
        : defaultHeaders
  };
  if (
    body !== null &&
    requestOptions.method !== 'GET' &&
    requestOptions.method !== 'DELETE'
  ) {
    requestOptions.body = body.toBody();
  }

  const response = await fetch(url, requestOptions);//<--requestOptions INVALID
  return response.json();
}

fetch/index").RequestInit'.
  Types of property 'body' are incompatible.
    Type 'BodyInit' is not assignable to type 'import("/home/jonas/WebstormProjects/mindtherags-backend/node_modules/@types/node-fetch/index").BodyInit'.
      Type 'Blob' is not assignable to type 'BodyInit'.
        Type 'Blob' is missing the following properties from type 'ArrayBuffer': byteLength, [Symbol.toStringTag]

29   const response = await fetch(url, requestOptions);
                                       ~~~~~~~~~~~~~~

[9:40:22 PM] Found 1 error. Watching for file changes.

即使将字符串转换为Blob 并将其直接作为RequestInit.body 传递也会产生相同的错误。类型可以关闭吗？

  const requestOptions: RequestInit = {
    method: method !== null ? method : 'GET',
    headers:
      headers !== null
        ? {
            ...defaultHeaders,
            ...headers
          }
        : defaultHeaders,
    body: new Blob([JSON.stringify({ something: 'something' })], {
      type: 'text/plain'
    })
  };
  /*if (
    body !== null &&
    requestOptions.method !== 'GET' &&
    requestOptions.method !== 'DELETE'
  ) {
    requestOptions.body = JSON.stringify({ something: 'something' });
  }*/

  const response = await fetch(url, requestOptions);
  return response.json();
}

Argument of type 'RequestInit' is not assignable to parameter of type 'import("/home/jonas/WebstormProjects/mindtherags-backend/node_modules/@types/node-fetch/index").RequestInit'.
  Types of property 'body' are incompatible.
    Type 'BodyInit' is not assignable to type 'import("/home/jonas/WebstormProjects/mindtherags-backend/node_modules/@types/node-fetch/index").BodyInit'.
      Type 'Blob' is not assignable to type 'BodyInit'.
        Type 'Blob' is missing the following properties from type 'ArrayBuffer': byteLength, [Symbol.toStringTag]ts(2345)

    body: JSON.stringify({
      something: 'something'
    })

也不行

卸载@types/node-fetch 并以Blob、JSON.stringify(obj) 和toBody() 为主体进行获取都会在请求中产生以下错误

(node:145700) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'Symbol(Request internals)' of null

这是这个函数node-fetch

const INTERNALS$2 = Symbol('Request internals');

/**
* Check if a value is an instance of Request.
*
* @param   Mixed   input
* @return  Boolean
*/
function isRequest(input) {
   return typeof input === 'object' && typeof input[INTERNALS$2] === 'object';
}

【问题讨论】：

标签： typescript fetch node-fetch

【解决方案1】：

我怀疑打字稿问题与不同的定义冲突有关，因为错误特别指出您的 BodyInit 类型不可分配给 @types/node-fetch 文件夹中的类型。

RequestInit 在lib.dom.d.ts 中有一个定义，它与 node-fetch 包中的定义略有不同。例如 dom 允许 BodyInit 为 null 但 node-fecth 不允许。

作为记录，我在 Typescript Playground 中没有看到任何错误，但我认为这是使用 lib.dom 定义的 fetch 函数。

【讨论】：