如何使用 TypeScript 中的“class-transformer”將 API 請求的響應轉換為類實例？

Question

我有用於調用 API 的普通方法Request(method: HttpMethod, url: string, ...) 。 我正在使用打字稿。

我需要使用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. 你從來沒有真正將你的響應映射到一個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);