使用 Fetch 和 Typescript 进行类型推断

Question

我编写了一个 Fetch 包装器来使用 Typescript 获取我的 API。我想，当我从我的 API 取回我的数据时，从“任何”类型到我的例如：“用户”类型。

我给你贴一个我的代码框的链接：https://codesandbox.io/s/react-query-error-rkmv1

当我 console.log 在 onSuccess 回调（甚至直接在 fetch 中）时，即使 Typescript 编译器没有抱怨，并且我可以将获取的数据用作“用户”，如果我记录此用户，它不是真正的用户。这是一个我可以“作为”用户使用的对象，但不能作为“用户”使用。

我可以就这样离开它，因为它最终会起作用，而且我的结果是典型的，但我担心它会带来其他我没有想到的问题。

谢谢！

Answer 1

您实际上是在使用和接口。在运行时打字稿接口或任何自定义类型不存在，只是一个普通对象，打字稿的签名。只有类在实际 JavaScript 代码中是“可见的”，但您应该使用 new 运算符来实例化该类。

正如您所说，“它带来了我没有想到的其他问题”。解决方法是在接口之外再创建一个类，这样你就可以和它交互了。

export interface IUserData {
  // id: number; // ID should not be part of the data
  name: string;
  firstName: string;
  email: string;
  password?: string;
}

export class User {
  public readonly attributes: IUserData;

  constructor(data: Partial<IUserData>, public readonly id?: number) {
    // validate and initialize default values of attributes

    this.attributes = { /* all keys with default values*/ };
  }
}

然后，您可以使用该接口作为响应的签名并使用const model = new User(response.data, response.id) 创建一个新实例，例如。这样，您可以将“功能”添加到类中以在实例之间共享。 model.attributes 具有可供使用的原始属性。您可以创建 getter/setter 以直接访问属性等。

Partial<T> 是 typescript 核心的一种实用程序类型，用于告诉对象具有 T 属性，但可选。例如，如果您只为 email 使用 PATCH，这将非常有用。

Answer 2

所以我注意到，如果您希望 IDE 反映函数的返回，则需要明确定义函数的返回，让我们采用您在链接中提供的 get 函数...

function get<T>(input: Request | string, init?): Promise<Partial<T>> { // so the return is defined here
  const token = localStorage.getItem(localStorageKey);

  const requestInit = {
    method: "GET",
    ...init
  };

  if (token) {
    requestInit.headers = {
      Authorization: `Bearer ${token}`,
      ...requestInit.headers
    };
  }

  return fetch(apiUrl + input, requestInit)
    .then(handleResponse)
    .then((res) => res.json())
    .then((data) => data as T);
}

试一试...谢谢