🚀 Learn TypeScript from Scratch

A complete beginner's guide — no JavaScript experience needed!

Hey there, future TypeScript developer!

If you've never written a line of code before, you're in the right place. This guide assumes nothing. We'll start from the absolute basics and build up to professional-level patterns that companies like Google and Microsoft use every day.

By the end, you'll understand not just how to write TypeScript, but why it makes your life easier. Let's dive in! 🏊

📖What Is TypeScript, Really?

Imagine you're writing a letter to a friend. In regular JavaScript, you can write anything you want — but if you make a spelling mistake or address it to the wrong person, you won't know until your friend reads it (or doesn't!).

TypeScript is like having a helpful editor proofread your letter before you send it. It catches mistakes while you're writing, not after. It makes sure you're addressing the right person, using the right words, and following the right format.

🍕 Real-World Analogy

Think of a pizza ordering app. In JavaScript, you could accidentally order "42" pizzas instead of "4" because the app doesn't check if your input is a number or text. TypeScript would catch this immediately and say: "Hey, that's not a valid pizza count!" — saving you from a very expensive (and weird) dinner.

TypeScript is built on top of JavaScript. This means every valid JavaScript program is also a valid TypeScript program. TypeScript just adds a layer of safety checks. When you're done writing, TypeScript removes those checks and outputs plain JavaScript that runs everywhere — browsers, servers, even your phone.

🧠 Remember This

TypeScript is JavaScript with a safety net. It checks your code for mistakes before you run it. The checks disappear when your code runs, so there's no speed penalty. It's like having a spell-checker for your code!

🎯What You Need to Start

Good news: you don't need much!

✋ Let's Check If Node Is Installed

Open your terminal (Command Prompt on Windows, Terminal on Mac) and type:

node --version

If you see something like v20.12.0, you're good to go! If not, download Node.js from the official website first.

⚙️Setting Up Your First TypeScript Project

Before we write any code, we need to tell TypeScript how to check our code. We do this with a special file called tsconfig.json — think of it as the rulebook for your project.

🏠 House Building Analogy

Imagine tsconfig.json as the blueprint for a house. It tells the builders (TypeScript compiler) what materials to use, how strict the building codes should be, and where to put the finished house. Without a blueprint, everyone guesses — and that's how bugs happen!

Step 1: Create Your Project Folder

Open your terminal and create a new folder for your project:

mkdir my-first-typescript

cd my-first-typescript

Step 2: Initialize TypeScript

Type this command to create your rulebook:

npx tsc --init

This creates a tsconfig.json file. Now let's make it strict (so it catches more bugs):

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

🤔 What Does This Mean?

Don't worry about every line right now. Here's what matters:

"strict": true — TypeScript will be extra careful checking your code. This is good!
"outDir": "./dist" — Compiled JavaScript goes here
"rootDir": "./src" — Your TypeScript files live here

Step 3: Create Your Folders

mkdir src

mkdir dist

Your project now looks like this:

my-first-typescript/
├── src/          ← Your TypeScript code goes here
├── dist/         ← Compiled JavaScript appears here
└── tsconfig.json ← Your rulebook

🧠 Remember This

You write code in src/ (TypeScript files ending in .ts), and TypeScript automatically creates the matching JavaScript in dist/. You never touch dist/ manually!

👋Your First Program: Hello World

Every programmer's journey starts with saying "hello" to the computer. Let's do that now!

Step 1: Create Your First File

Create a file called hello.ts inside your src/ folder. Open it in VS Code and type:

const greeting: string = "Hello World";

console.log(greeting);

🤔 Let's Break This Down

Line by line:

const means "this value won't change" (like writing in permanent marker)
greeting is the name we give to our value (like labeling a box)
: string tells TypeScript "this box contains text, not numbers"
= "Hello World" puts the actual text inside the box
console.log(greeting) prints the contents of the box to the screen

Step 2: Compile and Run

In your terminal, type:

npx tsc

TypeScript reads your .ts file and creates a .js file in dist/. Now run it:

node dist/hello.js

Hello World

🎉 You just wrote and ran your first TypeScript program!

🎮 Try It Yourself!

Change "Hello World" to your name, like "Hello, Maria!". Save the file, run npx tsc again, then node dist/hello.js. What do you see?

Type Inference: TypeScript Is Smart!

TypeScript can often figure out the type without you saying it explicitly. Watch:

const greeting = "Hello World"; 
// TypeScript KNOWS this is a string — no need to say :string!

Both versions work, but as you write bigger programs, being explicit helps prevent confusion. It's like labeling boxes when you move — tedious now, lifesaver later!

💬Writing Comments (Notes to Yourself)

Comments are notes you write for yourself and other humans. The computer completely ignores them. They're like sticky notes on your code!

// This is a single-line comment
// The computer ignores everything after //

/*
 * This is a multi-line comment
 * Use it for longer explanations
 * Or to temporarily disable code
 */

/**
 * This is a special JSDoc comment
 * It describes what a function does
 * And shows up in IDE tooltips!
 */
function add(a: number, b: number): number {
    return a + b;
}

📝 Why Comments Matter

Imagine coming back to your code in 6 months. Will you remember why you wrote return a + b? Comments are love letters to your future self. Write them generously!

🧩Understanding the Type System

At its heart, TypeScript is about shapes. Not geometric shapes — data shapes. It checks if the shape of your data matches what you promised.

🧩 The Puzzle Analogy

Imagine you have a puzzle piece shaped like a square hole. TypeScript makes sure you only try to put square pieces in that hole. If you try to jam a triangle piece in, TypeScript says: "That doesn't fit!" before you even try.

Two Ways to Describe Shapes: interface vs type

TypeScript gives you two tools to describe data shapes. They're similar but have different strengths:

// interface — best for object shapes
interface User {
    id: string;
    name: string;
    email: string;
}

// type — best for combinations and transformations
type UserStatus = 'active' | 'inactive' | 'suspended';
type UserOrNull = User | null;

🤔 When to Use What?

Don't overthink this as a beginner. Here's a simple rule:

Use interface when describing the shape of an object (like a User, Product, or Order)
Use type when you need "either/or" (like string | number) or complex combinations

As you gain experience, the differences will become clearer. For now, both work!

Declaration Merging: interface Superpower

Here's something cool interface can do that type can't:

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

// Later in your code...
interface User {
    email: string;  // This ADDS to the User interface!
}

// Now User has: id, name, AND email
const user: User = {
    id: "123",
    name: "Alice",
    email: "alice@example.com"
};

This is called declaration merging. It's like adding a new room to a house after it's built — only interface lets you do this!

📦Storing Data: Variables

A variable is like a labeled box where you store a value. You put something in, give it a name, and use that name later to get your value back.

📦 The Box Analogy

Imagine three boxes:

A cardboard box (var) — anyone can open it, relabel it, or throw it away. Messy and unpredictable.
A plastic storage bin (let) — you can change what's inside, but you can't have two bins with the same label in the same room.
A sealed glass case (const) — once you put something in, it stays forever. Safe and predictable.

The Three Ways to Declare Variables

// const — use this by default (sealed box)
const name: string = "Alice";
// name = "Bob";  // ❌ ERROR! Can't change a const

// let — use when you NEED to change the value
let score: number = 0;
score = 10;  // ✅ This is fine
score = 20;  // ✅ Still fine

// var — old way, DON'T USE (cardboard box)
var oldWay: string = "avoid this";
var oldWay: string = "seriously, don't";  // Allowed but confusing!

⚠️ Why var Is Dangerous

var has weird behavior. It ignores block boundaries (the curly braces {}), can be redeclared, and causes hard-to-find bugs. It exists only for historical reasons. Always use const or let.

🧠 The Golden Rule

Default to const. Use let only when you genuinely need to change the value later. Never use var. This simple habit prevents 80% of variable-related bugs!

Type Annotations: Being Explicit

// Explicit: you tell TypeScript the type
const age: number = 25;
const name: string = "John";
const isStudent: boolean = true;

// Implicit: TypeScript figures it out
const age = 25;        // TypeScript sees 25, knows it's a number
const name = "John";   // TypeScript sees quotes, knows it's a string

Both work, but explicit annotations act as documentation. When another developer (or future you!) reads this code, they immediately know what each variable holds.

🔢The Building Blocks: Primitive Types

TypeScript has several basic types — the LEGO bricks of your programs. Here they are:

Type	What It Holds	Example
string	Text	"Hello", 'World'
number	Numbers (integers and decimals)	42, 3.14
boolean	True or false	true, false
null	Intentionally empty	null
undefined	Not yet assigned	undefined
symbol	Unique identifier	Symbol('id')
bigint	Huge numbers	9007199254740991n

The Dangerous any Type

// ❌ BAD: 'any' disables ALL type checking
let mysteryBox: any = "hello";
mysteryBox = 42;        // No error
mysteryBox = true;      // No error
mysteryBox.doAnything(); // No error — CRASH at runtime!

// ✅ GOOD: 'unknown' for truly dynamic data
let safeBox: unknown = fetchDataFromAPI();

// Must prove what it is before using
if (typeof safeBox === 'string') {
    console.log(safeBox.toUpperCase()); // Safe!
}

⚠️ Never Use any!

Using any is like turning off your smoke detector because it beeps too much. Sure, it's quieter — but your house might burn down! Use unknown instead when you genuinely don't know the type yet.

Type Predicates: Reusable Type Checks

// A function that PROVES data is a string array
function isStringArray(data: unknown): data is string[] {
    return Array.isArray(data) && 
           data.every(item => typeof item === 'string');
}

// Usage
const myData: unknown = ["apple", "banana"];

if (isStringArray(myData)) {
    myData.forEach(item => console.log(item));
    // TypeScript TRUSTS you — it knows myData is string[] here
}

🕵️ The Detective Analogy

A type predicate is like a detective's badge. When you show it, TypeScript says: "Okay, I trust your investigation — this data IS what you claim." Without the badge, TypeScript stays skeptical.

🔀Making Decisions: Booleans and Logic

Computers make decisions based on true or false — there's no "maybe" in code! TypeScript helps you write these decisions safely.

let isRaining: boolean = true;

if (isRaining) {
    console.log("Take an umbrella!");
} else {
    console.log("Enjoy the sunshine!");
}

// Logical operators
console.log(!isRaining);        // false (NOT true)
console.log(true && false);     // false (both must be true)
console.log(true || false);    // true  (at least one is true)

Type Narrowing: TypeScript Gets Smarter

Here's where TypeScript really shines. Watch how it narrows types based on your checks:

function processValue(value: string | number | boolean): void {
    if (typeof value === 'string') {
        // Inside here, TypeScript KNOWS value is a string
        console.log(value.toUpperCase());  // ✅ Allowed!
    } else if (typeof value === 'number') {
        // Inside here, TypeScript KNOWS value is a number
        console.log(value.toFixed(2));     // ✅ Allowed!
    } else {
        // Must be boolean — only option left!
        console.log(value ? 'Yes' : 'No'); // ✅ Allowed!
    }
}

🧠 Remember This

TypeScript narrows types as you check them. It's like peeling an onion — each check removes a layer of possibility until TypeScript knows exactly what you're working with. No guesswork needed!

🤔When Should You Write Types Explicitly?

TypeScript is smart, but you're smarter. Here's when to be explicit and when to let TypeScript handle it:

Situation	Write It Out?	Why?
Function parameters	Always yes	Others need to know what to pass in
Function return values	Always yes	Others need to know what they'll get back
Public API interfaces	Always yes	These are contracts with other developers
Simple local variables	Optional	TypeScript usually figures it out
Complex objects	Yes	Prevents confusion about structure

// ✅ Good: explicit function signature
function calculateTotal(price: number, quantity: number): number {
    return price * quantity;
}

// ✅ Good: explicit interface
interface Product {
    id: string;
    name: string;
    price: number;
}

// Optional: inference works fine here
const total = calculateTotal(10, 5);  // TypeScript knows it's number

📝 The Restaurant Menu Analogy

Think of explicit types as a restaurant menu. When you order, you want to know what ingredients are in the dish and what you'll get. Function signatures are your menu — they tell callers exactly what to provide and what to expect. No surprises!

🔄Repeating Actions: Loops

Computers excel at doing the same thing over and over. Loops let you repeat code without copy-pasting it a hundred times.

🏃 The Treadmill Analogy

A loop is like a treadmill. You keep running (executing code) while a condition is true. When the condition becomes false (you're tired!), you stop. Just make sure you don't create an infinite treadmill — that's an infinite loop, and it'll crash your program!

While Loop: "Do This While Something Is True"

let count: number = 0;

while (count < 5) {
    console.log("Count is: " + count);
    count++;  // Add 1 to count — VERY IMPORTANT!
}

// Output:
// Count is: 0
// Count is: 1
// Count is: 2
// Count is: 3
// Count is: 4

⚠️ Infinite Loop Warning!

If you forget count++, the loop runs forever because count never reaches 5. Always make sure your loop condition will eventually become false!

Do-While Loop: "Do This At Least Once, Then Check"

let number: number = 10;

do {
    console.log(number);  // Prints FIRST, checks AFTER
    number++;
} while (number < 10);

// Output: 10
// Even though 10 is NOT less than 10, it prints once!

For Loop: "Count From X to Y"

// for (start; condition; after-each-iteration)
for (let i: number = 0; i <= 5; i++) {
    console.log(i);
}

// Output: 0, 1, 2, 3, 4, 5

// Breaking out early
for (let i: number = 1; i <= 100; i++) {
    if (i % 2 === 0 && i % 5 === 0) {
        console.log(i);  // Prints multiples of 10
        if (i === 30) {
            break;  // STOP! Don't check anymore
        }
    }
}
// Output: 10, 20, 30

For...Of: The Modern Way (Best for Arrays)

const fruits: string[] = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
    console.log(fruit);
    // TypeScript knows 'fruit' is a string — no guessing!
}

// Output:
// apple
// banana
// cherry

🎮 Try It Yourself!

Write a loop that counts from 1 to 20 and prints only the even numbers. Hint: use if (i % 2 === 0) to check if a number is even!

📊Lists of Data: Arrays

So far, we've stored single values. But what if you need a list — like a shopping list, a class roster, or test scores? That's where arrays come in.

🎒 The Backpack Analogy

An array is like a backpack with numbered pockets. Each pocket holds one item, and they're numbered starting from 0 (not 1 — programmers start counting at 0!). You can look inside any pocket, replace items, add new pockets, or remove them.

Creating and Using Arrays

// A list of test scores
let scores: number[] = [85, 92, 78, 96, 88];

// Accessing items (remember: counting starts at 0!)
console.log(scores[0]);  // 85 (first item)
console.log(scores[2]);  // 78 (third item)
console.log(scores[4]);  // 88 (fifth item)

// How many items?
console.log(scores.length);  // 5

// Changing an item
scores[1] = 95;  // Changed 92 to 95
console.log(scores);  // [85, 95, 78, 96, 88]

🤔 Why Start at 0?

This confuses everyone at first! Think of it as offsets rather than positions. The first item is 0 steps away from the start, the second is 1 step away, and so on. It's weird, but you'll get used to it. Promise!

Adding and Removing Items

const fruits: string[] = ["apple", "banana"];

fruits.push("cherry");      // Add to the END
console.log(fruits);        // ["apple", "banana", "cherry"]

fruits.unshift("avocado");  // Add to the BEGINNING
console.log(fruits);        // ["avocado", "apple", "banana", "cherry"]

fruits.pop();               // Remove from the END
console.log(fruits);        // ["avocado", "apple", "banana"]

fruits.shift();             // Remove from the BEGINNING
console.log(fruits);        // ["apple", "banana"]

🧠 Memory Trick

Shift and Unshift work on the Start (both start with "sh-"). Push and Pop work on the end (both start with "p-"). Silly, but it works!

Finding Items

const numbers: number[] = [10, 20, 30, 40, 50];

console.log(numbers.indexOf(30));    // 2 (found at position 2)
console.log(numbers.indexOf(99));    // -1 (not found)
console.log(numbers.includes(20));   // true
console.log(numbers.includes(99));   // false

// Get a slice (subset)
const subset: number[] = numbers.slice(1, 4);  // Positions 1 to 3
console.log(subset);  // [20, 30, 40]

Tuples: Arrays with Fixed Structure

Sometimes you need an array where each position has a specific meaning — like a GPS coordinate (latitude, longitude) or a date (year, month, day). TypeScript calls these tuples.

// A coordinate: [latitude, longitude]
let coordinates: [number, number] = [40.7128, -74.0060];

// A person record: [name, age, isStudent]
let person: [string, number, boolean] = ["Alice", 25, true];

// Named tuples (more readable)
type RGB = [red: number, green: number, blue: number];
let purple: RGB = [128, 0, 128];

Readonly Arrays: Don't Touch!

const daysOfWeek: readonly string[] = [
    "Monday", "Tuesday", "Wednesday", "Thursday", 
    "Friday", "Saturday", "Sunday"
];

// daysOfWeek.push("Funday");  
// ❌ ERROR! Can't modify a readonly array

// daysOfWeek[0] = "Mon";
// ❌ ERROR! Can't change items either

🔒 The Museum Analogy

A readonly array is like a museum exhibit behind glass. You can look all you want, but you can't touch or change anything. Perfect for data that should never change, like days of the week or mathematical constants.

⚡Powerful Array Methods

Modern TypeScript encourages a functional style — describing WHAT you want rather than HOW to get it. These methods are like hiring specialists: each does one job perfectly.

forEach: "Do Something to Each Item"

const names: string[] = ["Alice", "Bob", "Charlie"];

names.forEach((name: string) => {
    console.log("Hello, " + name + "!");
});

// Output:
// Hello, Alice!
// Hello, Bob!
// Hello, Charlie!

map: "Transform Each Item"

const numbers: number[] = [1, 2, 3, 4, 5];

const doubled: number[] = numbers.map((num: number) => {
    return num * 2;
});

console.log(doubled);  // [2, 4, 6, 8, 10]

// Shorter version (when the logic is simple)
const tripled: number[] = numbers.map(num => num * 3);
console.log(tripled);  // [3, 6, 9, 12, 15]

🎨 The Factory Analogy

map is like an assembly line. Every item goes through the same machine and comes out transformed. The original items stay untouched — you get a brand new array!

filter: "Keep Only What Matches"

const scores: number[] = [65, 82, 45, 91, 73, 58, 88];

// Keep only passing scores (70 or above)
const passing: number[] = scores.filter((score: number) => {
    return score >= 70;
});

console.log(passing);  // [82, 91, 73, 88]

// Keep only even numbers
const even: number[] = scores.filter(score => score % 2 === 0);
console.log(even);  // [82, 58, 88]

reduce: "Combine Everything Into One"

const prices: number[] = [10, 20, 30, 40];

// Add them all up
const total: number = prices.reduce((sum: number, price: number) => {
    return sum + price;
}, 0);  // 0 is the starting value

console.log(total);  // 100

// Find the highest score
const scores: number[] = [65, 82, 91, 73, 88];
const highest: number = scores.reduce((max: number, score: number) => {
    return score > max ? score : max;
}, 0);

console.log(highest);  // 91

Chaining: The Pipeline Pattern

The real power comes from chaining methods together:

const students = [
    { name: "Alice", score: 85 },
    { name: "Bob", score: 62 },
    { name: "Charlie", score: 91 },
    { name: "Diana", score: 78 }
];

// Get names of students who passed, in uppercase
const passingNames: string[] = students
    .filter(student => student.score >= 70)     // Keep only passing
    .map(student => student.name.toUpperCase());  // Get uppercase names

console.log(passingNames);  // ["ALICE", "CHARLIE", "DIANA"]

🎮 Try It Yourself!

Given ["apple", "banana", "cherry", "date"], write a chain that:

Filters to keep only fruits with 6+ letters
Maps to uppercase
Reduces to a single comma-separated string

Expected result: "BANANA,CHERRY"

Sorting

// Sorting strings — works automatically
const fruits: string[] = ['Banana', 'Mango', 'Apple'];
fruits.sort();
console.log(fruits);  // ['Apple', 'Banana', 'Mango']

// Sorting numbers — NEEDS a helper!
const numbers: number[] = [12, 3, 19, 16, 14];

// Ascending (small to large)
numbers.sort((a: number, b: number) => a - b);
console.log(numbers);  // [3, 12, 14, 16, 19]

// Descending (large to small)
numbers.sort((a: number, b: number) => b - a);
console.log(numbers);  // [19, 16, 14, 12, 3]

⚠️ The Number Sort Trap

Without a comparator, JavaScript converts numbers to strings first! So [10, 2].sort() becomes ["10", "2"] alphabetically — which is wrong! Always provide a comparator for number sorting.

🔧Reusable Code: Functions

A function is a reusable recipe. You write it once, give it a name, and use it whenever you need that recipe. Functions are the building blocks of every program.

🍳 The Recipe Analogy

Think of a function as a recipe card. The parameters are the ingredients list (what you need to provide), the body is the cooking instructions (what happens inside), and the return value is the finished dish (what you get back).

Named Function

// Recipe: Add two numbers
function add(a: number, b: number): number {
    const result: number = a + b;
    return result;
}

// Using the recipe
const sum1: number = add(5, 3);   // 8
const sum2: number = add(10, 20); // 30

console.log(sum1);  // 8
console.log(sum2);  // 30

Arrow Functions: The Modern Way

// Short arrow function (one line, implicit return)
const multiply = (a: number, b: number): number => a * b;

// Multi-line arrow function (explicit return)
const calculateArea = (width: number, height: number): number => {
    const area: number = width * height;
    return area;
};

console.log(multiply(4, 5));        // 20
console.log(calculateArea(3, 4));   // 12

🤔 Arrow vs Regular Functions?

For beginners, the difference doesn't matter much. Arrow functions are shorter and have some advanced behaviors, but either works. Use whichever you find more readable. As you grow, you'll learn when one is better than the other.

Optional Parameters

// greeting has a default value
function greet(name: string, greeting: string = "Hello"): string {
    return greeting + ", " + name + "!";
}

console.log(greet("Alice"));           // "Hello, Alice!"
console.log(greet("Bob", "Hi"));       // "Hi, Bob!"
console.log(greet("Carol", "Goodbye")); // "Goodbye, Carol!"

Rest Parameters: Variable Arguments

// Accept ANY number of arguments
function sumAll(...numbers: number[]): number {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sumAll(1, 2, 3));      // 6
console.log(sumAll(10, 20));      // 30
console.log(sumAll());             // 0
console.log(sumAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));  // 55

🧠 The ... Spread

The ... (spread operator) says "gather all remaining arguments into an array." It's like a vacuum cleaner that sucks up all the loose numbers and puts them in a neat list!

Function Overloads: Multiple Personalities

// Two ways to call this function:
function format(input: string): string;      // If given a string
function format(input: number): string;       // If given a number

// The actual implementation handles both
function format(input: string | number): string {
    if (typeof input === 'string') {
        return input.toUpperCase();
    }
    return input.toFixed(2);  // Format number with 2 decimals
}

console.log(format("hello"));  // "HELLO"
console.log(format(3.14159));  // "3.14"

🔭Where Variables Live: Scope

Scope determines where a variable is visible and usable. It's like the rooms in a house — a variable declared in the kitchen isn't automatically available in the bedroom.

🏠 The House Analogy

Imagine your code as a house:

var = A note on the fridge — visible from EVERY room (function scope)
let/const = A note in a specific room — only visible there (block scope)

Block scope is safer because you can't accidentally use a variable where it shouldn't be used!

Keyword	Where It Works	Can Redeclare?	Can Change?	Use It?
var	Entire function	Yes (dangerous!)	Yes	❌ Never
let	Inside {} block	No	Yes	✅ When needed
const	Inside {} block	No	No	✅ Default choice

const API_URL: string = "https://api.example.com";  // Never changes
let retryCount: number = 0;                          // Will change

retryCount++;  // ✅ Fine, we used let
// API_URL = "other";  // ❌ ERROR! const can't change

📝Working with Text: Strings

Strings are sequences of characters — text! TypeScript gives you powerful tools to manipulate them.

const message: string = "Hello, TypeScript!";

// How long is it?
console.log(message.length);        // 18

// Get a piece of it
console.log(message.slice(0, 5));   // "Hello"
console.log(message[7]);            // "T" (8th character)

// Split into parts
const words: string[] = message.split(" ");
console.log(words);  // ["Hello,", "TypeScript!"]

// Remove extra spaces
const messy: string = "  hello  ";
console.log(messery.trim());  // "hello"

// Find and replace
const greeting: string = "Hello world";
console.log(greeting.replace("world", "TypeScript"));  // "Hello TypeScript"

Template Literal Types: Type-Safe Strings

// Only allow specific button class names
type Size = 'sm' | 'md' | 'lg' | 'xl';
type Color = 'primary' | 'secondary' | 'danger';
type ButtonClass = `btn-${Size}-${Color}`;

const goodButton: ButtonClass = 'btn-md-primary';     // ✅
// const badButton: ButtonClass = 'btn-xs-purple';    
// ❌ ERROR! 'xs' and 'purple' aren't allowed

🎨 The Paint-by-Numbers Analogy

Template literal types are like paint-by-numbers kits. The outline is fixed (btn-), but you can only use the provided colors (Size and Color). Try to use a color not in the kit, and TypeScript says "That color isn't in the box!"

Converting Between Strings and Numbers

// String to number
const str: string = "42";
const num: number = parseInt(str, 10);  // Always use base 10!

console.log(num + 8);  // 50

// Number to string
const price: number = 99.99;
console.log(price.toString());   // "99.99"
console.log(price.toFixed(2));   // "99.99" (always 2 decimals)

// Safe parsing
function parseNumberSafe(value: string): number | null {
    const parsed: number = parseInt(value, 10);
    return isNaN(parsed) ? null : parsed;
}

console.log(parseNumberSafe("42"));   // 42
console.log(parseNumberSafe("abc"));  // null (not a crash!)

⚠️ The parseInt Trap

Always pass 10 as the second argument to parseInt! Without it, parseInt("08") might be interpreted as octal (base 8) in older environments, giving you 0 instead of 8. Weird but true!

📦Grouping Data: Objects

An object groups related data together. Think of it as a form with labeled fields — name, age, email, etc.

📋 The Form Analogy

An object is like a patient form at a doctor's office. It has labeled fields (name, age, symptoms) and you fill in each one. The form ensures you provide all required information and don't add random fields that don't belong.

Creating Typed Objects

// Define the shape first
interface Person {
    firstName: string;
    lastName: string;
    age?: number;        // Optional (might not be provided)
}

// Create an object matching that shape
const person: Person = {
    firstName: "Alice",
    lastName: "Johnson",
    age: 28
};

// Access properties
console.log(person.firstName);     // "Alice"
console.log(person["lastName"]);   // "Johnson" (alternative syntax)

// Update properties
person.firstName = "Alicia";

// Add optional property later
person.age = 29;

Methods in Objects

interface PersonWithGreeting {
    firstName: string;
    lastName: string;
    greet(): string;  // This object can greet people!
}

const friendlyPerson: PersonWithGreeting = {
    firstName: "Bob",
    lastName: "Smith",
    greet(): string {
        return "Hi, I'm " + this.firstName + " " + this.lastName + "!";
    }
};

console.log(friendlyPerson.greet());  // "Hi, I'm Bob Smith!"

Dynamic Properties

interface FlexiblePerson {
    name: string;
    [key: string]: unknown;  // Allows ANY extra properties
}

const person: FlexiblePerson = {
    name: "Charlie"
};

// Add properties dynamically
person.age = 25;
person.hobby = "painting";
person["favorite-color"] = "blue";

console.log(person);
// { name: "Charlie", age: 25, hobby: "painting", "favorite-color": "blue" }

Enterprise Pattern: Separate API from Domain

// What the API sends (snake_case, strings)
interface UserFromAPI {
    id: string;
    created_at: string;
    is_active: boolean;
}

// What our app uses (camelCase, proper types)
interface User {
    id: string;
    createdAt: Date;
    isActive: boolean;
}

// Bridge between them
function convertUser(apiUser: UserFromAPI): User {
    return {
        id: apiUser.id,
        createdAt: new Date(apiUser.created_at),
        isActive: apiUser.is_active
    };
}

🧠 Why Separate Them?

If the API changes (e.g., renames created_at to createdDate), you only update the convertUser function — not every place that uses User. Your app stays stable even when external services change!

🏗️Blueprints for Objects: Classes

A class is a blueprint for creating objects. It's like a cookie cutter — one shape, many cookies. Each cookie (object) is independent but follows the same pattern.

🏭 The Factory Analogy

A class is like a car factory blueprint. It defines what every car should have (engine, wheels, color) and what it can do (drive, honk, brake). But each car produced is a separate object with its own state — one might be red and fast, another blue and slow.

class Person {
    // Properties (what each person has)
    firstName: string;
    lastName: string;

    // Private property (hidden from outside)
    #ssn: string;

    // Constructor (how to create a new person)
    constructor(firstName: string, lastName: string, ssn: string) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.#ssn = ssn;
    }

    // Method (what a person can do)
    fullName(): string {
        return this.firstName + " " + this.lastName;
    }

    // Getter (access like a property)
    get location(): string {
        return "Earth";
    }
}

// Create instances (actual people)
const alice = new Person("Alice", "Smith", "123-45-6789");
const bob = new Person("Bob", "Jones", "987-65-4321");

console.log(alice.fullName());  // "Alice Smith"
console.log(bob.fullName());    // "Bob Jones"
console.log(alice.location);    // "Earth"

Shorter Syntax: Parameter Properties

// Instead of manually assigning each property...
class Employee {
    constructor(
        public readonly id: string,       // Can't change after creation
        public name: string,               // Public, can change
        private department: string,        // Hidden from outside
        protected salary: number           // Visible to subclasses
    ) {}

    getDepartment(): string {
        return this.department;  // Can access private inside the class
    }
}

const emp = new Employee("E001", "Alice", "Engineering", 75000);
console.log(emp.id);              // "E001"
console.log(emp.getDepartment());  // "Engineering"
// console.log(emp.department);    
// ❌ ERROR! Private property — can't access from outside

🎮 Try It Yourself!

Create a Book class with:

Properties: title (string), author (string), pages (number)
A method getSummary() that returns "Title by Author (X pages)"

Create two book instances and print their summaries!

🔒Controlling Access: Public, Private, Protected

Not everything should be visible to everyone. Access modifiers control who can see and touch what — like security clearance levels..

    private balance: number = 0;           // Only the account knows
    protected accountType: string = 'checking';  // Subclasses can see
    public readonly accountNumber: string;  // Everyone can see, can't change

    constructor(accountNumber: string, initialBalance: number = 0) {
        this.accountNumber = accountNumber;
        this.balance = initialBalance;
    }

    public deposit(amount: number): void {
        if (amount <= 0) {
            throw new Error("Deposit must be positive!");
        }
        this.balance += amount;
    }

    public withdraw(amount: number): boolean {
        if (amount > this.balance) {
            return false;  // Not enough money
        }
        this.balance -= amount;
        return true;
    }

    public getBalance(): number {
        return this.balance;
    }
}

const account = new BankAccount("ACC-123", 1000);
account.deposit(500);
console.log(account.getBalance());  // 1500

// console.log(account.balance);     
// ❌ ERROR! Private — can't peek inside!
// account.balance = 999999;        
// ❌ ERROR! Can't cheat the system!

🏦 The Bank Vault Analogy

A private property is like money in a bank vault. You can't just walk in and grab it — you must use the proper channels (methods like deposit and withdraw). This prevents accidental (or malicious) manipulation of sensitive data.

🧬Building on Blueprints: Inheritance

Inheritance lets a new class reuse and extend an existing class. It's like a child inheriting traits from a parent but developing their own personality too.

🐕 The Dog Family Analogy

All dogs share common traits (four legs, tail, bark). But a Golden Retriever has specific traits (friendly, golden fur) while a German Shepherd has others (protective, black and tan). Inheritance lets you define "Dog" once and then specialize for each breed.

// Parent class (the general blueprint)
class Animal {
    constructor(protected name: string) {}

    move(): void {
        console.log(this.name + " is moving");
    }

    makeSound(): string {
        return "Some generic sound";
    }
}

// Child class (specialized blueprint)
class Dog extends Animal {
    constructor(name: string, private breed: string) {
        super(name);  // Call parent's constructor
    }

    // Override parent's method
    override makeSound(): string {
        return "Woof! Woof!";
    }

    // New method only dogs have
    fetch(): string {
        return this.name + " fetched the ball!";
    }

    getBreed(): string {
        return this.breed;
    }
}

const genericAnimal = new Animal("Creature");
const myDog = new Dog("Buddy", "Golden Retriever");

genericAnimal.move();        // "Creature is moving"
console.log(genericAnimal.makeSound());  // "Some generic sound"

myDog.move();                // "Buddy is moving" (inherited!)
console.log(myDog.makeSound());  // "Woof! Woof!" (overridden!)
console.log(myDog.fetch());      // "Buddy fetched the ball!" (new!)
console.log(myDog.getBreed());   // "Golden Retriever"

Abstract Classes: Forcing Implementation

// Abstract = "You can't create me directly, only my children"
abstract class Shape {
    abstract getArea(): number;  // Every shape MUST implement this
    abstract getPerimeter(): number;

    describe(): string {
        return "I am a shape with area " + this.getArea();
    }
}

class Rectangle extends Shape {
    constructor(
        private width: number,
        private height: number
    ) {
        super();
    }

    override getArea(): number {
        return this.width * this.height;
    }

    override getPerimeter(): number {
        return 2 * (this.width + this.height);
    }
}

class Circle extends Shape {
    constructor(private radius: number) {
        super();
    }

    override getArea(): number {
        return Math.PI * this.radius * this.radius;
    }

    override getPerimeter(): number {
        return 2 * Math.PI * this.radius;
    }
}

const rect = new Rectangle(5, 3);
const circle = new Circle(4);

console.log(rect.getArea());     // 15
console.log(circle.getArea());   // ~50.27

// const shape = new Shape();  
// ❌ ERROR! Can't create abstract class directly

🧠 When to Use Abstract Classes

Use abstract classes when you want to provide a common foundation but force every child to implement specific methods. It's like saying: "Every employee must have a job title and a salary, but HOW they calculate their salary depends on their role."

🎓 You're in the home stretch! Advanced concepts ahead!

📦Organizing Code: Modules

As your programs grow, putting everything in one file becomes messy — like stuffing your entire wardrobe into a single drawer. Modules let you split code into separate files and share only what you want to share.

📚 The Library Analogy

Imagine a library where every book is a module. The math book exports formulas, the history book exports dates, and the science book exports experiments. Your main program is like a student who checks out only the books they need. No clutter, no confusion!

Exporting: Making Things Available

// === math-utils.ts ===

// Named export — specific, clear
export function add(a: number, b: number): number {
    return a + b;
}

export function multiply(a: number, b: number): number {
    return a * b;
}

export const PI: number = 3.14159;

// Default export — one per file, use sparingly
export default class Calculator {
    add(a: number, b: number): number { return a + b; }
}

Importing: Bringing Things In

// === main.ts ===

// Import specific things by name
import { add, multiply, PI } from './math-utils';

// Import with a nickname (alias)
import { add as sum } from './math-utils';

// Import the default export
import Calculator from './math-utils';

// Import types only (disappears at runtime)
import type { SomeType } from './math-utils';

// Use them!
console.log(add(2, 3));        // 5
console.log(multiply(4, 5));   // 20
console.log(PI);               // 3.14159

const calc = new Calculator();
console.log(calc.add(10, 20)); // 30

Barrel Exports: One Door for Everything

// === models/index.ts ===
// This file gathers exports from many files

export { User } from './User';
export { Product } from './Product';
export { Order } from './Order';
export type { UserData, ProductData } from './types';

// === main.ts ===
// Now import everything from one place!
import { User, Product, type UserData } from './models';

🧠 Best Practice

Prefer named exports over default exports. Named exports are easier to refactor (IDE can rename them everywhere), better for tree-shaking (removing unused code), and clearer about what you're importing. Default exports hide the name and make code harder to understand.

🔷Writing Flexible Code: Generics

Imagine you need a function that finds an item in a list. You could write one for users, one for products, one for orders... or you could write one generic function that works with ANY type. That's generics!

🔧 The Universal Wrench Analogy

A generic function is like an adjustable wrench. Instead of carrying 20 wrenches for different bolt sizes, you carry one that adapts to any size. The <T> is the adjustment mechanism — it changes based on what you need!

Generic Function

// T is a placeholder for ANY type
function findById(
    items: T[],
    id: string
): T | undefined {
    return items.find(item => item.id === id);
}

// Works with Users!
interface User {
    id: string;
    name: string;
}

const users: User[] = [
    { id: '1', name: 'Alice' },
    { id: '2', name: 'Bob' }
];

const user = findById(users, '1');
// TypeScript KNOWS this is User | undefined

// Works with Products too!
interface Product {
    id: string;
    price: number;
}

const products: Product[] = [
    { id: 'p1', price: 99 },
    { id: 'p2', price: 49 }
];

const product = findById(products, 'p1');
// TypeScript KNOWS this is Product | undefined

Generic Class: Reusable Storage

// A storage box that works with ANY type
class StorageBox {
    private items: TItem[] = [];

    add(item: TItem): void {
        this.items.push(item);
    }

    findById(id: string): TItem | undefined {
        return this.items.find(item => item.id === id);
    }

    getAll(): readonly TItem[] {
        return this.items;
    }
}

// Use with Users
const userBox = new StorageBox();
userBox.add({ id: '1', name: 'Alice' });

// Use with Products
const productBox = new StorageBox();
productBox.add({ id: 'p1', price: 99 });

// TypeScript prevents mixing them up!
// userBox.add({ id: 'p1', price: 99 });  
// ❌ ERROR! This box only accepts Users!

Multiple Generics

// Combine two objects into one
function merge(
    first: TFirst,
    second: TSecond
): TFirst & TSecond {
    return { ...first, ...second };
}

const person = { name: 'Alice' };
const details = { age: 30, city: 'NYC' };

const combined = merge(person, details);
// TypeScript knows combined has: name, age, AND city!

🎮 Try It Yourself!

Write a generic function getLast<T>(items: T[]): T | undefined that returns the last item in an array. Test it with both number[] and string[]!

🔗Combining Types: Unions & Intersections

Sometimes a value can be one of several types, or needs to combine multiple types. TypeScript has tools for both scenarios.

Union Types: "This OR That"

// A status can only be one of these three values
type Status = 'active' | 'inactive' | 'suspended';

let userStatus: Status = 'active';    // ✅
userStatus = 'inactive';               // ✅
// userStatus = 'deleted';             
// ❌ ERROR! 'deleted' is not allowed

// An ID can be a string OR a number
type ID = string | number;

let userId: ID = 101;      // ✅ Number is fine
userId = "user-101";       // ✅ String is fine too
// userId = true;          
// ❌ ERROR! Boolean is not allowed

Discriminated Unions: Tagged Objects

// Each object has a "kind" tag that tells us what it is
type Shape =
    | { kind: 'circle'; radius: number }
    | { kind: 'rectangle'; width: number; height: number }
    | { kind: 'square'; side: number };

function getArea(shape: Shape): number {
    switch (shape.kind) {
        case 'circle':
            return Math.PI * shape.radius * shape.radius;
        case 'rectangle':
            return shape.width * shape.height;
        case 'square':
            return shape.side * shape.side;
        default:
            // If we add a new Shape type, TypeScript
            // will ERROR here until we handle it!
            const _exhaustive: never = shape;
            return _exhaustive;
    }
}

const myCircle: Shape = { kind: 'circle', radius: 5 };
console.log(getArea(myCircle));  // ~78.54

🏷️ The Name Tag Analogy

A discriminated union is like a conference where everyone wears a name tag saying their role ("Speaker", "Attendee", "Staff"). Instead of guessing who someone is, you just read their tag. TypeScript does the same — it reads the kind tag and instantly knows what properties are available!

Intersection Types: "This AND That"

interface HasName {
    name: string;
}

interface HasAge {
    age: number;
}

// Person must have BOTH name AND age
type Person = HasName & HasAge;

const person: Person = {
    name: "Alice",
    age: 30
};

// Missing either property = ERROR!
// const badPerson: Person = { name: "Bob" };  
// ❌ ERROR! Missing 'age'

🛡️Proving Types at Runtime: Type Guards

TypeScript types exist only during development — they vanish when your code runs. But sometimes you need to prove what type something is while the program is running. Type guards are your proof!

🕵️ The Detective Analogy

A type guard is like a detective proving someone's identity. TypeScript says: "You claim this is a string? Show me your evidence!" Once you provide proof (like typeof x === 'string'), TypeScript believes you and lets you use string methods.

Built-in Type Guards

function process(value: string | number | boolean): string {
    // typeof guard
    if (typeof value === 'string') {
        return value.toUpperCase();  // ✅ TypeScript knows it's a string
    }

    // instanceof guard (for classes)
    if (value instanceof Date) {
        return value.toISOString();  // ✅ TypeScript knows it's a Date
    }

    // Must be number (only option left)
    return value.toFixed(2);
}

// instanceof with custom classes
class Cat {
    meow(): string { return 'Meow!'; }
}

class Dog {
    bark(): string { return 'Woof!'; }
}

function makeSound(animal: Cat | Dog): string {
    if (animal instanceof Cat) {
        return animal.meow();  // ✅ TypeScript knows it's a Cat
    }
    return animal.bark();      // ✅ TypeScript knows it's a Dog
}

Custom Type Predicate

interface Admin {
    role: 'admin';
    permissions: string[];
}

interface User {
    role: 'user';
    username: string;
}

type Account = Admin | User;

// Type predicate: "This account IS an Admin"
function isAdmin(account: Account): account is Admin {
    return account.role === 'admin';
}

function getPermissions(account: Account): string[] {
    if (isAdmin(account)) {
        return account.permissions;  // ✅ TypeScript trusts us!
    }
    return ['read-only'];  // Must be User
}

🧠 The Power of never

The never type means "this should be impossible to reach." If TypeScript complains that your never variable isn't actually never, it means you forgot to handle a case! It's like a safety alarm that goes off when you miss a step.

🛠️TypeScript's Built-in Tools: Utility Types

TypeScript comes with a toolbox of ready-made type transformations. Instead of rewriting types from scratch, you can modify existing ones!

interface User {
    id: string;
    name: string;
    email: string;
    age: number;
    password: string;  // Secret! Don't expose!
}

// Partial — all properties become optional
type UserUpdate = Partial;
// { id?: string; name?: string; email?: string; ... }
// Perfect for PATCH requests where you only send changed fields!

// Pick — keep only what you need
type UserPreview = Pick;
// { id: string; name: string }
// Perfect for list views where you don't need everything!

// Omit — remove what you don't want
type PublicUser = Omit;
// { id, name, email, age } — password safely removed!
// Perfect for API responses!

// Readonly — prevent changes
type ImmutableUser = Readonly;
// Can't modify any property after creation!

// Required — remove optionality
type RequiredUser = Required>;
// All properties must be provided!

// Record — create a dictionary
type UserMap = Record;
// { [key: string]: User }
// Perfect for lookups by ID!

🛠️ The Power Tool Analogy

Utility types are like power tools. Sure, you could saw wood by hand (Omit manually listing every property), but why would you when a circular saw (Omit<User, 'password'>) does it instantly and perfectly? Work smarter, not harder!

🚨Handling Mistakes: Error Handling

Programs will encounter problems — networks fail, files go missing, users type nonsense. Good error handling makes your program graceful instead of fragile.

Custom Error Classes

class ValidationError extends Error {
    constructor(
        message: string, 
        public field: string  // Extra info about what failed
    ) {
        super(message);
        this.name = 'ValidationError';
    }
}

class NotFoundError extends Error {
    constructor(
        public resource: string,
        public id: string
    ) {
        super(resource + " with id '" + id + "' not found");
        this.name = 'NotFoundError';
    }
}

// Usage
function validateAge(age: number): void {
    if (age < 0 || age > 150) {
        throw new ValidationError(
            "Age must be between 0 and 150", 
            "age"
        );
    }
}

try {
    validateAge(200);
} catch (error) {
    if (error instanceof ValidationError) {
        console.log("Field:", error.field);        // "age"
        console.log("Message:", error.message);    // "Age must be..."
    }
}

The Result Pattern: Predictable Failures

// Instead of throwing, return a result object
type Result =
    | { success: true; data: T }
    | { success: false; error: E };

function divide(a: number, b: number): Result {
    if (b === 0) {
        return {
            success: false,
            error: new ValidationError(
                "Cannot divide by zero", 
                "denominator"
            )
        };
    }
    return { success: true, data: a / b };
}

// Usage — no try/catch needed!
const result = divide(10, 0);

if (!result.success) {
    console.log("Oops:", result.error.message);
} else {
    console.log("Answer:", result.data);
}

📦 The Package Delivery Analogy

A Result type is like a package tracking system. Instead of wondering if your package arrived (and catching it if it didn't), you get a clear status: "Delivered successfully" or "Failed: address not found." No surprises, no lost packages!

✅Trust But Verify: Runtime Validation with Zod

Here's a crucial truth: TypeScript types disappear when your code runs. They check your code during development, but at runtime, they're gone. So how do you validate data from APIs, forms, or files?

🛡️ The Border Control Analogy

TypeScript is like a pre-flight security check — it makes sure your luggage is packed correctly before you leave. But Zod is like border control at your destination — it checks AGAIN that everything is valid when you arrive. Both are necessary for safety!

Installing Zod

npm install zod

Defining a Schema

import { z } from 'zod';

// Define what a valid user looks like
const UserSchema = z.object({
    id: z.string().uuid(),           // Must be a valid UUID
    email: z.string().email(),        // Must look like an email
    name: z.string().min(1).max(100), // 1-100 characters
    age: z.number().int().min(0).max(150).optional(),
    isActive: z.boolean().default(true)  // Defaults to true
});

// Derive TypeScript type AUTOMATICALLY from the schema!
type User = z.infer;
// TypeScript now knows User has: id, email, name, age?, isActive

Validating Data

// parse() — validates and returns typed data
// Throws an error if data is invalid
function parseUser(data: unknown): User {
    return UserSchema.parse(data);
}

// safeParse() — returns result without throwing
function safeParseUser(data: unknown) {
    const result = UserSchema.safeParse(data);

    if (!result.success) {
        console.log("Validation failed:");
        result.error.errors.forEach(err => {
            console.log("- " + err.path + ": " + err.message);
        });
        return null;
    }

    return result.data;  // Validated and typed!
}

// Test it
const rawData = {
    id: '550e8400-e29b-41d4-a716-446655440000',
    email: 'john@example.com',
    name: 'John Doe',
    age: 30
};

const user = parseUser(rawData);
console.log(user.email);  // 'john@example.com' — TypeScript knows it's a string!

// Bad data gets caught!
const badData = {
    id: 'not-a-uuid',
    email: 'not-an-email',
    name: ''  // Too short!
};

// parseUser(badData);  
// ❌ Throws error with DETAILED messages about what's wrong!

🧠 Why Zod + TypeScript Is Powerful

Change your Zod schema, and your TypeScript types update automatically. One source of truth, zero drift between validation and types. When the API changes, update the Zod schema — TypeScript will immediately show you every place that needs updating!

🎭Real-World Example: Testing with Playwright

Let's put everything together with a practical example: writing type-safe browser tests using Playwright, a popular testing framework.

🎭 The Stage Analogy

Playwright is like a theater director. It opens a browser (the stage), navigates to a website (sets the scene), interacts with elements (directs the actors), and checks that everything looks right (reviews the performance). TypeScript makes sure your directions make sense before the show starts!

Typed Page Object Model

import { test, expect, type Page, type Locator } from '@playwright/test';

// A Page Object represents one page of your app
class LoginPage {
    // Locators — "pointers" to elements on the page
    readonly usernameInput: Locator;
    readonly passwordInput: Locator;
    readonly submitButton: Locator;
    readonly errorMessage: Locator;

    constructor(private page: Page) {
        // Find elements by test IDs (best practice!)
        this.usernameInput = page.locator('[data-testid="username"]');
        this.passwordInput = page.locator('[data-testid="password"]');
        this.submitButton = page.locator('[data-testid="login-button"]');
        this.errorMessage = page.locator('[data-testid="error-message"]');
    }

    // Actions — what a user can do
    async goto(): Promise {
        await this.page.goto('/login');
    }

    async login(username: string, password: string): Promise {
        await this.usernameInput.fill(username);
        await this.passwordInput.fill(password);
        await this.submitButton.click();
    }

    // Queries — checking the state
    async getErrorMessage(): Promise {
        return this.errorMessage.textContent();
    }
}

Typed Test Data

// Discriminated union for test scenarios
interface ValidLogin {
    kind: 'valid';
    username: string;
    password: string;
    expectedUrl: string;
}

interface InvalidLogin {
    kind: 'invalid';
    username: string;
    password: string;
    expectedError: string;
}

type LoginScenario = ValidLogin | InvalidLogin;

Writing Tests

test.describe('Login Flow', () => {
    test('successful login redirects to dashboard', async ({ page }) => {
        const loginPage = new LoginPage(page);

        const scenario: ValidLogin = {
            kind: 'valid',
            username: 'admin',
            password: 'secret123',
            expectedUrl: '/dashboard'
        };

        await loginPage.goto();
        await loginPage.login(scenario.username, scenario.password);

        // Assert: we landed on the right page
        await expect(page).toHaveURL(scenario.expectedUrl);
    });

    test('invalid login shows error message', async ({ page }) => {
        const loginPage = new LoginPage(page);

        const scenario: InvalidLogin = {
            kind: 'invalid',
            username: 'hacker',
            password: 'wrong',
            expectedError: 'Invalid credentials'
        };

        await loginPage.goto();
        await loginPage.login(scenario.username, scenario.password);

        const error = await loginPage.getErrorMessage();
        expect(error).toContain(scenario.expectedError);
    });
});

Generic API Helper

// Reusable helper for API calls
async function apiRequest(
    page: Page,
    url: string,
    options?: { 
        method?: 'GET' | 'POST' | 'PUT' | 'DELETE'; 
        body?: unknown 
    }
): Promise {
    const response = await page.request.fetch(url, {
        method: options?.method ?? 'GET',
        data: options?.body
    });

    if (!response.ok()) {
        throw new Error('API failed: ' + response.status());
    }

    return response.json() as Promise;
}

// Usage: TypeScript knows the shape of User!
const user = await apiRequest(page, '/api/users/1');
console.log(user.name);  // TypeScript knows .name exists!

🎮 Try It Yourself!

Install Playwright and create a test for your favorite website:

npm init playwright@latest

Then write a test that navigates to the site, clicks a button, and checks that something changed on the page!

📋What You've Learned

Let's look at how far you've come. You started with zero knowledge and now understand concepts that professional developers use daily!

Concept	What It Does	Why It Matters
strict mode	Catches bugs before running	Saves hours of debugging
Types	Describes data shapes	Prevents wrong data from spreading
interface	Defines object structure	Living documentation
Generics	Reusable type-safe code	Write once, use everywhere
Unions	"This OR that" types	Models real-world flexibility
Type Guards	Proves types at runtime	Safety when types disappear
Utility Types	Transform existing types	Less code, more safety
Zod	Validates runtime data	Catches API changes instantly

🎓Your Next Steps

You've just completed a journey that many developers take months to travel. Here's what you should do next:

🚀 Action Plan

Build something real. Convert a simple JavaScript project to TypeScript. Feel the difference!
Enable strict mode. In your tsconfig.json, set "strict": true. Embrace the errors — they teach you!
Practice generics. Write a findById function that works with any object that has an id.
Try Zod. Validate data from a public API. Watch it catch malformed responses!
Join the community. Follow TypeScript on Twitter, join Discord servers, and ask questions!

💭 Final Thought

TypeScript isn't about adding complexity — it's about removing fear. Fear of breaking something when you refactor. Fear of passing the wrong data. Fear of the codebase growing unmanageable. With TypeScript, you code with confidence.

Every expert was once a beginner who refused to give up. Keep building, keep breaking things (safely!), and keep learning. You've got this! 💪

🎉 Congratulations, TypeScript Developer!

You now have the foundation to write professional, type-safe code. The best way to learn is by doing — so open your editor and start building!

Questions? Stuck on something?

Drop a comment below — I read every single one and love helping fellow learners!

Happy coding! 🚀

Last updated: May 2026 | TypeScript 5.6+

Found this helpful? Share it with a friend who's learning to code! 🤝

Complete TypeScript in 30 Minutes

🚀 Learn TypeScript from Scratch

Hey there, future TypeScript developer!

📖What Is TypeScript, Really?

🎯What You Need to Start

⚙️Setting Up Your First TypeScript Project

Step 1: Create Your Project Folder

Step 2: Initialize TypeScript

Step 3: Create Your Folders

👋Your First Program: Hello World

Step 1: Create Your First File

Step 2: Compile and Run

Type Inference: TypeScript Is Smart!

💬Writing Comments (Notes to Yourself)

🧩Understanding the Type System

Two Ways to Describe Shapes: interface vs type

Declaration Merging: interface Superpower

📦Storing Data: Variables

The Three Ways to Declare Variables

Type Annotations: Being Explicit

🔢The Building Blocks: Primitive Types

The Dangerous any Type

Type Predicates: Reusable Type Checks

🔀Making Decisions: Booleans and Logic

Type Narrowing: TypeScript Gets Smarter

🤔When Should You Write Types Explicitly?

🔄Repeating Actions: Loops

While Loop: "Do This While Something Is True"

Do-While Loop: "Do This At Least Once, Then Check"

For Loop: "Count From X to Y"

For...Of: The Modern Way (Best for Arrays)

📊Lists of Data: Arrays

Creating and Using Arrays

Adding and Removing Items

Finding Items

Tuples: Arrays with Fixed Structure

Readonly Arrays: Don't Touch!

⚡Powerful Array Methods

forEach: "Do Something to Each Item"

map: "Transform Each Item"

filter: "Keep Only What Matches"

reduce: "Combine Everything Into One"

Chaining: The Pipeline Pattern

Sorting

🔧Reusable Code: Functions

Named Function

Arrow Functions: The Modern Way

Optional Parameters

Rest Parameters: Variable Arguments

Function Overloads: Multiple Personalities

🔭Where Variables Live: Scope

📝Working with Text: Strings

Template Literal Types: Type-Safe Strings

Converting Between Strings and Numbers

📦Grouping Data: Objects

Creating Typed Objects

Methods in Objects

Dynamic Properties

Enterprise Pattern: Separate API from Domain

🏗️Blueprints for Objects: Classes

Shorter Syntax: Parameter Properties

🔒Controlling Access: Public, Private, Protected

🧬Building on Blueprints: Inheritance

Abstract Classes: Forcing Implementation

📦Organizing Code: Modules

Exporting: Making Things Available

Importing: Bringing Things In

Barrel Exports: One Door for Everything

🔷Writing Flexible Code: Generics

Generic Function

Generic Class: Reusable Storage

Multiple Generics

🔗Combining Types: Unions & Intersections

Union Types: "This OR That"

Discriminated Unions: Tagged Objects

Intersection Types: "This AND That"

🛡️Proving Types at Runtime: Type Guards

Built-in Type Guards

Custom Type Predicate

🛠️TypeScript's Built-in Tools: Utility Types