TypeScript 2.x By Example

Models

Our application's primary data structure is a board that consists of an array of tasks, and each task, in turn, contains an array of subtasks. So, let's create our three models: Board, Task, and SubTask.

Each of these models will be defined with TypeScript modules, meaning that they will be in a separate file and each class will be exported so that they can be imported into the Homepage component. 

First, create a new file, subtask.ts, in the model folder with the following code:

export class SubTask {id: string; title: string;}

As you can see, we have added the export keyword in front of the class so that the SubTask class can then be imported.

Next, we will create a task.ts file, which would have a reference to subtasks, as follows: ...