Learn TypeScript 3 by Building Web Applications

Implementing the TodoListView interface

Then, of course, we can implement this interface:

class HTMLTodoListView implements TodoListView { 
    constructor() { 
        // TODO 
    } 

    clearInput(): void { 
        // TODO 
    } 

    getFilter(): string { 
        // TODO 
    } 

    getInput(): TodoItem { 
        // TODO 
    } 

    render(todoList: ReadonlyArray<TodoItem>): void { 
        // TODO 
    } 

    filter(): void { 
        // TODO 
    } 
} 

This is the base structure. Now, we need to start refactoring/integrating our previous code to this new class while implementing the interface methods.

First, add private fields to the class for the different HTML elements that we know for sure should be available. Then, make sure to initialize them in the constructor:

 private readonly todoInput: HTMLInputElement; private readonly todoListDiv: ...