将参数转换为内部类

Question

我已经在我的组件中定义了一个内部类来保存视图模型，我需要将 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类型。我还尝试将内部类和方法定义为静态，但仍然不起作用。

我错过了什么？

Answer 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 有多强大(在这个例子中我们看到了类表达式功能(，但我不会在实际项目中这样做，因为大多数流行的样式指南都建议声明类/接口/枚举......(又名模型(在单独的文件中，通常它是some-feature.model.ts.然后我们可以在应用程序的其他部分使用我们的模型，如组件、指令等。

Answer 2

您需要在TasklistItemsGridComponent之外定义类，语法如下，但是如果要创建嵌套类，则需要遵循link中使用的解决方案： 有什么方法可以在打字稿中声明嵌套类结构吗？

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;
}

Answer 3

根据您的要求，您可以按如下方式使用它：

@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 {
taskListItem: TaskListItemViewModel;
constructor() {
// here or in ngOnInit
// this.taskListItem = new TaskListItemViewModel();
}
// .....
ngOnInit() {
// this.taskListItem = new TaskListItemViewModel();
}
convertToViewModel = (item: ITaskListItemViewModel) => item;
}
// in another file or same component you can write this class
export class TaskListItemViewModel implements ITaskListItemViewModel{    
id?: number;
tasklistId: number;
typeOfTask: number;
statusId: number;
created_at: Date;
updated_at: Date;
checked: Boolean;
rowVersion: number;
}
interface ITaskListItemViewModel{    
id: number;
tasklistId: number;
typeOfTask: number;
statusId: number;
created_at: Date;
updated_at: Date;
checked: Boolean;
rowVersion: number;
}