Learn TypeScript 3 by Building Web Applications

Implementing the view model using a Data Transfer Object (DTO)

We first need to create our ChartDetails model class. Create a file called chart-details.intf.ts inside src/views.

Here's the implementation:

import {DataPoint} from "../domain"; 

export interface ChartDetails { 
    chartType: string; 
    data: DataPoint[]; 
    dataLabel: string; 
    title: string; 
    xAxisLabel: string; 
    yAxisLabel: string; 
} 

Again, we are using the .intf.ts filename suffix to indicate that this file contains an interface.

We have used an interface here and not a class because this model element is a simple Value Object (VO), also called a Data Transfer Object (DTO). It will only be created and used to transfer information from the controller back to our view and we don't need any ...