Convert parameter to inner class

Question

I have defined an inner class in my component to hold the view model and I need to convert the http response interface to this view model. I tried this way:

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

However, TaskListItemViewModel type is not found. I tried also defining both the inner class and the method as static but still didn't work.

What am I missing?

Please feel free to correct me, but maybe using an interface would be easier? I feel like that's what this might be looking for. — HyperTextCoffeePot, Aug 24 '18 at 15:57
I tried with a class because originally the idea would be to place the static function inside of it. — juliano.net, Aug 24 '18 at 16:43

score 0 · Answer 1 · edited Aug 27 '18 at 16:10

you need to define the class outside of TasklistItemsGridComponent, with syntax like below but if you want to create nested classes you need to follow the solutions used in link: 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;
}

shohrukh · Answer 2 · 2018-08-25T23:04:52.973

I think you can declare interface of your model outside the component, and inside your component just create nested class (aka class expression) which implements that interface. And then you can add your methods inside the class expressions.

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

Of course this example show - how powerful TypeScript is (in this example we see the Class expressions feature), but I wouldn't do that in real projects, since most popular styleguides recommend to declare classes/interfaces/enums... (aka models) in separate file, normally it's some-feature.model.ts. And then we can use our models in other parts of app like components, directives etc.

AlokeT · Answer 3 · 2018-08-27T16:55:14.103

As per your requirement, you can use it as below:

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

Convert parameter to inner class

3 Answers3