Integration
- TypeScript course
- Beginner
- Lesson 80/89
- 5 min
Build the working Todo CLI by combining all parts.
Combine all parts
The Todo CLI has four main functions: addTodo (add), completeTodo (complete), filterByStatus (filter), listTodos (list). In a session you first add tasks, then complete some, then filter and list.
function addTodo(todos: Todo[], title: string): Todo[] { /* ... */ }
function completeTodo(todos: Todo[], id: string): void { /* ... */ }
function filterByStatus(todos: Todo[], status: Status): Todo[] { /* ... */ }
function listTodos(todos: Todo[]): void { /* ... */ }Working example
Let's add three tasks and complete one, then filter for active and list. The completed task is not removed; it just does not appear in the filtered list.
const todos: Todo[] = [];
addTodo(todos, "Süt al");
addTodo(todos, "Ekmek al");
addTodo(todos, "Çay al");
completeTodo(todos, "1");
const active = filterByStatus(todos, "active");
listTodos(active);Practice Write the working Todo CLI
Define Status and Todo. Write addTodo, completeTodo, filterByStatus, and listTodos functions. Add three tasks ("Süt al", "Ekmek al", "Çay al"), complete one ("1"), filter for "active", and list them.
Starter code
// Status ve Todo tanımla
// addTodo, completeTodo, filterByStatus, listTodos fonksiyonlarını yaz
// üç görev ekle, birini tamamla
// "active" olanları filtrele ve listeleSample solution
type Status = "active" | "completed";
interface Todo { id: string; title: string; status: Status; }
function addTodo(todos: Todo[], title: string): Todo[] {
const todo: Todo = { id: String(todos.length + 1), title, status: "active" };
todos.push(todo);
return todos;
}
function completeTodo(todos: Todo[], id: string): void {
const todo = todos.find(t => t.id === id);
if (todo) {
todo.status = "completed";
}
}
function filterByStatus(todos: Todo[], status: Status): Todo[] {
return todos.filter(t => t.status === status);
}
function listTodos(todos: Todo[]): void {
todos.forEach(t => console.log(t.id + ": " + t.title + " [" + t.status + "]"));
}
const todos: Todo[] = [];
addTodo(todos, "Süt al");
addTodo(todos, "Ekmek al");
addTodo(todos, "Çay al");
completeTodo(todos, "1");
const active = filterByStatus(todos, "active");
listTodos(active);Expected output
2: Ekmek al [active] 3: Çay al [active]
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the basic flow of a Todo CLI?
- List → delete → add
- Add → complete → filter → list Correct answer
- Filter → add → complete
- Complete → list → add
Explanation: You first add tasks, then complete some, then filter by status and list. This order makes a sensible CLI session.
2 Complete the filter call
const active = ____(todos, "active");const active = filterByStatus(todos, "active");Explanation: To get active tasks you call filterByStatus. completeTodo changes state, addTodo adds a new task, and listTodos only prints.
3 Integration flow
| Term | Meaning |
|---|---|
addTodo |
First step: add |
completeTodo |
Second step: complete |
filterByStatus |
Third step: filter |
listTodos |
Last step: list |