Master Table of Contents

• See full index in [01. Introduction]

Who this chapter is for

• Learners who already know basic JavaScript and want cleaner, safer code
• Beginners who want editor feedback before bugs hit runtime
• Anyone starting React seriously and tired of “undefined is not a function” moments

What you’ll learn

• Core TypeScript types for everyday app code
• Type inference vs explicit annotations (and when each is better)
• Interfaces, type aliases, unions, and optional fields in real project scenarios

Why this topic matters

In real projects, TypeScript saves you from silent data-shape bugs that usually appear at the worst time. You get feedback while coding, not after shipping.

Short version: TypeScript is not about writing “more code.” It is about reducing dumb bugs and making your intent obvious to teammates (including future you).

Core concepts

Type annotations

Use annotations when you need clarity at function boundaries.

let username: string = "Dina";
let total: number = 42;

Interfaces and type aliases

Use these to define data contracts explicitly.

interface User {
  id: number;
  name: string;
}

type UserRole = "admin" | "member";

Quick rule:

• interface is great for object shapes
• type is flexible for unions and composed types

Optional and union types

This is where TypeScript starts feeling practical in UI + API work.

type Profile = {
  name: string;
  bio?: string;
  status: "active" | "inactive";
};

Step-by-step walkthrough

Step 1 — Create a TypeScript file

Start with one .ts file and one typed function. Keep it simple.

Step 2 — Define data contracts

Create interfaces/types for repeated object shapes (User, Product, ApiResponse).

Step 3 — Add strict thinking

Avoid any as default. Model real possibilities with unions and optional fields.

Target in this chapter: make invalid data hard to pass by accident.

Practical examples

Example 1 — Typed utility function

function addTax(price: number, taxRate: number): number {
  return price + price * taxRate;
}

Why this matters:

• The function contract is obvious to anyone reading it.

Example 2 — Type-safe converter

function celsiusToFahrenheit(value: number): number {
  return (value * 9) / 5 + 32;
}

Real case:

• Utility functions like this are often reused in multiple components. Strong typing prevents misuse.

Common mistakes and how to avoid them

• Using any too often -> start with specific types, use unknown if needed
• Forgetting optional checks -> add guard conditions before access
• Overengineering type systems too early -> model only what you need now
• Trusting API responses blindly -> always define response types and validate assumptions

Mini Project

• Build a type-safe unit converter with at least 3 conversion functions.
• Bonus: add a union type for unit categories ("temperature" | "distance" | "weight").

Quick practice

• Define an interface for UserProfile
• Convert one JS function to TS with typed parameters and return type
• Add one union type for status or category
• Explain in one sentence: when should you choose interface vs type?

Key takeaways

• TypeScript makes bugs visible earlier in the dev cycle
• Types are contracts: they document intent and prevent accidental misuse
• Starting TypeScript habits early will make React chapters smoother

Next step

Continue to [04. JavaScript and TypeScript Basics].