Week 3 - TypeScript

Type System

Interfaces vs Types

Generics

Type inference

Type Unions and Intersections

Function Types and Return Types

Utility Types

Type-Safe API Responses

Type Guards

HTML Element Types

Tooling

Practice

Assignment

Front end Track

Week 3 Overview

You already know JavaScript. This week, you'll add TypeScript — a type system layered on top of JavaScript that catches bugs before your code runs. Every valid JavaScript program is already valid TypeScript, so you're not learning a new language. You're adding type annotations that tell the compiler (and your editor) what types your variables, parameters, and return values should be.

This week focuses on the syntax and concepts you need to start writing typed code. You'll learn how to annotate variables, functions, and objects, how to define reusable shapes with interfaces and type aliases, how to use generics to write flexible but type-safe code, and how to narrow union types so TypeScript knows exactly what you're working with. By the end of the week, you should be comfortable reading and writing TypeScript, and ready to apply it when you move on to React and beyond.

Learning goals

• Annotate variables, function parameters, and return types with TypeScript's type system.
• Type arrays and objects, and know when to reach for interfaces or type aliases.
• Extend and compose types using unions, intersections, and interface inheritance.
• Write generic functions and interfaces that work with any type while staying type-safe.
• Know when to let TypeScript infer types and when to add an explicit annotation.
• Use built-in utility types to derive new types from existing ones.
• Narrow union types with type guards and handle every variant of a discriminated union.
• Type API responses from fetch and handle success and failure in a type-safe way.
• Use TypeScript's DOM types to safely query and interact with HTML elements.

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0

*https://hackyourfuture.net/*

Found a mistake or have a suggestion? Let us know in the feedback form.