Learn TypeScript 3 by Building Web Applications

Filtering existing todo items using the ES2015 TypeScript support

It's time to take care of filtering.

Open index.html and modify the todoFilter input as follows:

<input type="text" id="todoFilter" title="Filter for the todo list" onkeyup="filterTodoList()" onblur="filterTodoList()" /> 

As you might guess, the next step is to implement the filterTodoList function in TypeScript.

Here's an implementation of that function:

function filterTodoList(): void { 
    console.log("Filtering the rendered todo list"); 

    const todoListHtml: HTMLUListElement =      document.getElementById('todoList') as HTMLUListElement; 

    if (todoListHtml === null) { 
        console.log("Nothing to filter"); 
        return; 
    } 

    const todoListFilter = document.getElementById('todoFilter') as  HTMLInputElement; ...