【问题标题】:How to transform response from API request into class instance with `class-transformer` in TypeScript?如何在 TypeScript 中使用“class-transformer”将 API 请求的响应转换为类实例?
【发布时间】:2020-06-07 14:06:36
【问题描述】:

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

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

例子:

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

我做错了什么?

【问题讨论】:

    标签: javascript typescript javascript-objects transformation class-transformer


    【解决方案1】:

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

    你有几个问题:

    1. 您从未真正将您的回复映射到new 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);

    基本上,您需要将constructor 添加到您的班级(否则,只需使用interface)。获得constructor 后,您可以新建响应中的新UserResponse 类。

    另外,如果Request 看起来像:

    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', ... , UserResponse);

    【讨论】:

    • 我的UserReponse 是any 的类型有问题... 为什么类没有自动拥有自己的类型?
    • UserResponse 不是any 类型。这是UserResponse
    • 那是问题..它不在我的代码中......或者 WebStorm IDE 认为它的any
    • UserResponse 是从构建为 .js + d.ts 的共享库(自定义 npm 包)导入的
    • 我在编译这个共享库时遇到了错误……现在很好。谢谢:)
    猜你喜欢
    • 2019-09-21
    • 1970-01-01
    • 2022-06-13
    • 2019-09-15
    • 1970-01-01
    • 2019-12-31
    • 2019-09-18
    • 1970-01-01
    • 2014-11-18
    相关资源
    最近更新 更多