Stage 5: TypeScript — How the Web Works

Core Concepts: Type Safety

Static Typing Instead of waiting for the code to run in the browser to find an error, TypeScript catches bugs before the code even compiles.
Interfaces interface Task defines exactly what a task looks like. If you try to add a task missing a property, it throws an error immediately.
Safe Components By defining TodoItemProps, the component guarantees it will only ever receive the exact correct data it needs to render.
Developer Experience Because the editor knows the types, it can provide perfect autocomplete. You don't have to guess if it's task.isDone or task.done.

The final evolution: The app behaves exactly like Stage 4 to the user, but the developer experience is entirely transformed. Large teams can now collaborate on massive codebases without breaking each other's work!

Source Code title: string; description: string; initialCount?: number; // Optional } // Function must return void, takes specific types function renderCard(props: CardProps): void { let count: number = props.initialCount || 0; // TypeScript knows btn is an HTMLButtonElement const btn = document.querySelector<HTMLButtonElement>('#action-btn')!; btn.addEventListener('click', (event: MouseEvent) => { count++; console.log(`Count is strictly a number: ${count}`); // If you tried to do: count = "hello" // TypeScript would throw an error before running! }); } // Safe execution renderCard({ title: "Type Safety", description: "Catching bugs at compile time." });

// Notice how interfaces and types are gone!
// The browser only sees this plain JS:

function renderCard(props) {
    let count = props.initialCount || 0;

    const btn = document.querySelector('#action-btn');

    btn.addEventListener('click', (event) => {
        count++;
        console.log(`Count is strictly a number: ${count}`);
    });
}

renderCard({
    title: "Type Safety",
    description: "Catching bugs at compile time."
});

Type Safety

Catching bugs at compile time.