TypeScript 通用函数返回类型问题

Question

我想通过 TypeScript 泛型定义函数返回类型。所以R 可以是我定义的任何东西。

... Promise<R | string> 不是我的解决方案。

错误

错误：(29, 9) TS2322：类型“字符串”不可分配给类型“R”。 “string”可分配给“R”类型的约束，但“R”可以用约束“{}”的不同子类型来实例化。

import { isString, } from '@redred/helpers';

interface P {
  as?: 'json' | 'text';
  body?: FormData | URLSearchParams | null | string;
  headers?: Array<Array<string>> | Headers | { [name: string]: string };
  method?: string;
  queries?: { [name: string]: string };
}

async function createRequest<R> (url: URL | string, { as, queries, ...parameters }: P): Promise<R> {
  if (isString(url)) {
    url = new URL(url);
  }

  if (queries) {
    for (const name in queries) {
      url.searchParams.set(name, queries[name]);
    }
  }

  const response = await fetch(url.toString(), parameters);

  if (response.ok) {
    switch (as) {
      case 'json':
        return response.json();
      case 'text':
        return response.text(); // <- Error
      default:
        return response.json();
    }
  }

  throw new Error('!');
}

export default createRequest;

Answer 1

我可能会使用overloads 来表示调用方的这种区别......如果调用方指定"text"，那么返回类型肯定是Promise<string>，并且函数在R 中不再是通用的。

除此之外：TypeScript 命名约定通常为泛型类型参数保留单字符大写名称（尤其是 T、U、K 和 P），所以我会将您的 P 扩展为 @987654332 @。此外，标识符as 是有问题的，因为它是 TypeScript 中的保留字，可能会混淆 IDE 或编译器；在下文中，我将用az 替换as。好的，所以你的界面是

interface Params {
  az?: "json" | "text";
  body?: FormData | URLSearchParams | null | string;
  headers?: Array<Array<string>> | Headers | { [name: string]: string };
  method?: string;
  queries?: { [name: string]: string };
}

这是我要使用的重载。一个非通用调用签名只接受"text" 中的az，另一个在R 中是通用的，并且只接受"json" 或undefined/missing 中的az。 实现 签名可以涉及R | string 或any 或任何你想要的，因为它在调用者方面是不可见的。

async function createRequest(
  url: URL | string,
  { az, queries, ...parameters }: Params & { az: "text" }
): Promise<string>;
async function createRequest<R>(
  url: URL | string,
  { az, queries, ...parameters }: Params & { az?: "json" }
): Promise<R>;
async function createRequest<R>(
  url: URL | string,
  { az, queries, ...parameters }: Params
): Promise<R | string> {
  if (isString(url)) {
    url = new URL(url);
  }

  if (queries) {
    for (const name in queries) {
      url.searchParams.set(name, queries[name]);
    }
  }

  const response = await fetch(url.toString(), parameters);

  if (response.ok) {
    switch (az) {
      case "json":
        return response.json();
      case "text":
        return response.text(); // <- okay now
      default:
        return response.json();
    }
  }

  throw new Error("!");
}

下面是我们如何使用它来获取文本：

const promiseString = createRequest("str", { az: "text" }); // Promise<string>

下面是我们如何使用它来获取其他类型（这要求调用者指定R，因为它无法推断）：

interface Dog {
  name: string;
  age: number;
  breed: string;
  fleas: boolean;
}

const promiseDog = createRequest<Dog>("dog", {}); // Promise<Dog>

请注意，如果您指定了R，则不能要求"text"：

const notGeneric = createRequest<Dog>("dog", {az: "text"}); // error!
//                                     -----> ~~
// "text" is not assignable to "json" or undefined

好的，希望对您有所帮助。祝你好运！

Link to code