With all the dependencies properly in place, the time has come to refactor
our TaskService.ts file. Open the service file and let's update the import statements block:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { Task } from './task.model';

First, we import in the HttpClient and Response symbols so that we can annotate our objects later on. The Observable symbol is imported from the RxJS library so that we can properly annotate the return types of our async HTTP requests. We also import Task as a model (it is an interface) from the file task.model.ts, as follows:

export interface Task {
  name: string;
  deadline: string;
  pomodorosRequired: number;
  queued: boolean;
}

We will refactor this service using two steps:

1. Rewrite the service to use the HTTP service.
2. Implement a store/feed pattern and give the service a state.