Challenge 4: Mini app
- TypeScript course
- Beginner
- Lesson 89/89
- 6 min
Solve a task testing the full beginner level.
Challenge 4: Mini app
This challenge tests the entire beginner level. You will combine types, functions, union, and intersection to write a mini task app. First you will define the Task model and functions, then the PrioritizedTask type.
Practice Task model and functions
Define a Task interface: id: string, title: string, done: boolean. Write a function addTask(tasks: Task[], title: string): void (id = String(tasks.length + 1), done = false). Write a function completeTask(tasks: Task[], id: string): void (find and set done = true). Add a task, complete it, and print the done value.
Starter code
// Task arayüzü: id, title, done
// addTask(tasks: Task[], title: string): void yaz
// completeTask(tasks: Task[], id: string): void yaz
// id'ye göre bul, done true yap
// bir görev ekle, tamamla ve done yazdırSample solution
interface Task { id: string; title: string; done: boolean; }
function addTask(tasks: Task[], title: string): void {
tasks.push({ id: String(tasks.length + 1), title, done: false });
}
function completeTask(tasks: Task[], id: string): void {
const task = tasks.find(t => t.id === id);
if (task) {
task.done = true;
}
}
const tasks: Task[] = [];
addTask(tasks, "Süt al");
completeTask(tasks, "1");
console.log(tasks[0].done);Expected output
true
Practice Combine PrioritizedTask
Define a Priority type as "low" | "high". Define a Task interface: id: string, title: string, done: boolean. Define the PrioritizedTask type as Task & { priority: Priority }. Create an object and print its priority field.
Starter code
// Priority türü: "low" veya "high"
// Task arayüzü tanımla (id, title, done)
// PrioritizedTask = Task & { priority: Priority }
// bir nesne oluştur ve priority yazdırSample solution
type Priority = "low" | "high";
interface Task { id: string; title: string; done: boolean; }
type PrioritizedTask = Task & { priority: Priority };
const pt: PrioritizedTask = {
id: "1",
title: "Süt al",
done: false,
priority: "high"
};
console.log(pt.priority);Expected output
high
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is done first in a mini app?
- First write the output
- Immediately call console.log
- Define types and interfaces Correct answer
- First call the functions
Explanation: A solid app defines types first; then functions operate on those types. Writing output is the last step.
2 Complete the done field type
interface Task { id: string; title: string; done: ____; }interface Task { id: string; title: string; done: boolean; }Explanation: done is a logical field indicating whether a task is completed, so it is boolean. string and number are wrong types; "yes" | "no" is unnecessary complexity.
3 Task model parts
| Term | Meaning |
|---|---|
interface Task |
Task model |
id: string |
Identity field |
done: boolean |
Completion status |
title: string |
Title field |