javascript - 如何在 TypeScript 中将 API 请求的响应转换为带有 `class-transformer` 的类实例？

Question

我有正常的方法 Request(method: HttpMethod, url: string, ...) 用于调用 API。我正在使用 TypeScript。

我需要使用class-transformer(或不使用它:D)将此 API 请求的响应转换为类实例。

示例:

class UserResponse {
  id: number;l
  foo: string;
  bar: string;
}
const user = await Request(HttpMEthod.GET, '/user/1');
// `user` should be class instance `UserResponse`

我知道我不能像这样使用泛型:

const Request = <T>(method: HttpMethod, url: string, ...) => {
  // axios or something else...
  return plainToClass(T, res);
}

const user = await Request<UserResponse>(HttpMEthod.GET, '/user/1');

泛型不是这样工作的，但我可以这样做:

const Request = <T>(method: HttpMethod, url: string, ...,  transformTo?: { new (): T }) => {
  // axios or something else...
  return plainToClass(transformTo, res);
}

const user = await Request(HttpMEthod.GET, '/user/1', ... , new UserResponse());

但这也不起作用。我仍然收到 user 类型:

const user: unknown

我做错了什么？

Answer 1

首先，什么是Request？我假设这会返回一个 Promise。

您有几个问题:

1. 您实际上从未将您的响应映​​射到新的 UserResponse
2. TypeScript 中的泛型不会新建响应。它的行为更像是一个接口(interface)，它更多的是一个数据契约而不是一个完整的初始化类。

以下是您需要执行此操作的方法:

class UserResponse {
  public id: number;
  public foo: string;
  public bar: string;
  constructor(user: UserResponse) {
    Object.assign(this, user); // or set each prop individually
  }
}
const response = await Request(HttpMEthod.GET, '/user/1');
const user = new UserResponse(response);

基本上，您需要向类添加一个构造函数(否则，只需使用接口(interface))。获得构造函数后，您就可以从响应中新建一个新的UserResponse类。

此外，如果 Request 如下所示:

const Request = <T>(method: HttpMethod, url: string, ...,  transformTo?: { new (): T }) => {
  // axios or something else...
  return plainToClass(transformTo, res);
}

我认为你想这样做: const user = wait Request(HttpMEThod.GET, '/user/1', ... , UserResponse);