angular - 將參數轉換為內部類別

我在我的組件中定義了一個內部類來保存視圖模型，我需要將 HTTP 回應介面轉換為這個視圖模型。我嘗試了這種方法：

@Component({
  selector: 'app-tasklist-items-grid',
  templateUrl: './tasklist-items-grid.component.html',
  styleUrls: ['./tasklist-items-grid.component.scss'],
  providers: [TasklistItemsService, BsModalService]
})
export class TasklistItemsGridComponent implements OnInit {

// .....

  TaskListItemViewModel = class {    
    id?: number;
    tasklistId: number;
    typeOfTask: number;
    statusId: number;
    created_at: Date;
    updated_at: Date;
    checked: Boolean;
    rowVersion: number;
  }

  convertToViewModel = (item: TaskListItemViewModel) => item;
}

然而，找不到 TaskListItemViewModel 類型。我也嘗試將內部類別和方法都定義為 static，但仍然無法工作。

我錯過了什麼？

答案＃1

我認為你可以在組件外聲明你的模型介面，在組件內僅創建實現該介面的嵌套類（也就是類表達式）。然後你可以在類表達式中添加你的方法。

import { Component } from '@angular/core';

export interface MyInterface {
  id?: number;
  tasklistId: number;
  typeOfTask: number;
  // other properties
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  TaskListItemViewModel = class implements MyInterface {
    constructor(
      public id: number,
      public tasklistId: number,
      public typeOfTask: number
    ) {}
    // other methods which you want to implement
  }

  convertToViewModel = (item: MyInterface) => new this.TaskListItemViewModel(1, 2, 3);
}

當然，這個例子展示了 TypeScript 的強大（在這個例子中，我們看到 Class expressions 的特性），但我不會在真正的專案中這麼做，因為大多數流行的風格指南建議將類別/介面/枚舉...（也就是模型）宣告在獨立的檔案中，通常是 some-feature.model.ts。然後我們可以在應用程式的其他部分使用這些模型，例如元件、指令等。

答案＃2

你需要在 TasklistItemsGridComponent 外部定義這個類，語法如下，但如果你想創建嵌套類，你需要遵循鏈接中使用的解決方案：Any way to declare a nest class structure in typescript?

class TaskListItemViewModel { 
  id?: number;
  tasklistId: number;
  typeOfTask: number;
  statusId: number;
  created_at: Date;
  updated_at: Date;
  checked: Boolean;
  rowVersion: number;
  }

@Component({
  selector: 'app-tasklist-items-grid',
  templateUrl: './tasklist-items-grid.component.html',
  styleUrls: ['./tasklist-items-grid.component.scss'],
  providers: [TasklistItemsService, BsModalService]
  })
export class TasklistItemsGridComponent implements OnInit {
   convertToViewModel = (item: TaskListItemViewModel) => item;
}