04 · TypeScript — JavaScript that checks your work

You already know JavaScript — TypeScript IS JavaScript, plus a layer that reads your code before it runs and points at mistakes. Every JS line you've written is valid TS. You're not learning a new language; you're hiring a proofreader.

1. Why TypeScript exists — your own bugs are the proof

Every one of these is a real bug you wrote in the Library app. JavaScript ran them silently. TypeScript refuses to compile them:

2. Setup — the compiler

# one-time install (you have Node, so you have npm):
npm install -g typescript

# check it worked:
tsc --version

# compile one file: app.ts → app.js
tsc app.ts

# create tsconfig.json (project settings) once:
tsc --init

# with a tsconfig, just:  tsc        (compiles the project)
# or better:              tsc --watch   (recompiles on every save)

3. Type annotations — telling it what belongs in the box

An annotation is a colon + type after a name: "this box holds only this kind."

let title: string = "Harry Potter";
let copies: number = 5;
let isAvailable: boolean = true;

copies = "five";   // ❌ Type 'string' is not assignable to type 'number'

Arrays: the item type + []:

let titles: string[] = ["Harry Potter", "The Alchemist"];
let ids: number[] = [1, 2, 3, 4];

ids.push("5");   // ❌ string can't enter a number[] — the "53" bug, blocked at the door

4. Typing functions — contracts on the door

Parameters get annotations; the return type goes after the ( ):

function lateFine(daysLate: number): number {
    return daysLate * 2;
}

lateFine(5);      // 10
lateFine("5");    // ❌ caught — remember .value is always a string!
lateFine();       // ❌ Expected 1 argument, but got 0

5. interface — the shape of a Book, written down

Your whole app runs on objects shaped like a book — but in JS that shape lived only in your head. An interface writes it down, and TS enforces it everywhere:

interface Book {
    id: number;
    title: string;
    author: string;
    category: string;
    copies: number;
}

let books: Book[] = [
    { id: 1, title: "Harry Potter", author: "J.K. Rowling", category: "Fantasy", copies: 5 }
];

books.push({ id: 5, title: "New Book" });
// ❌ missing: author, category, copies — no more half-built books EVER entering the array

book.titel;     // ❌ typo caught — plus autocomplete now knows every field

6. Union types & undefined — your find is about to argue

A union means "one of these types," written with | (read it as "or"):

let memberId: number | null = null;      // "a number, or nothing yet"
let category: "Fantasy" | "Fiction" | "Autobiography";   // only these exact strings!

let book = books.find(b => b.id === id);
book.copies;                    // ❌ 'book' is possibly 'undefined'

if (!book) return;              // handle the miss (guard clause — your addBook pattern!)
book.copies;                    // ✅ TS watched the if — inside here it KNOWS it's a Book

7. any — the type that turns TypeScript off

any means "don't check this." Every safety net in this page — gone, for that variable, and for everything it touches.

let data: any = "hello";
data.lenght;        // no error. data() — no error. data.foo.bar — no error. All bombs at runtime.

8. TS meets the DOM — two speed bumps in your renderBooks/addBook

Converting the Library, you'll hit these immediately — they're features, not obstacles:

let tbody = document.getElementById("bookRows");
if (tbody) { tbody.innerHTML = rowsHTML; }        // narrowed, safe

// or, when you KNOW the element exists in your HTML:
let tbody = document.getElementById("bookRows")!;  // ! = "trust me, not null"

let input = document.getElementById("newTitle") as HTMLInputElement;
input.value;    // ✅ now TS knows .value exists — and that it's a string

9. Generics — the <T> you keep seeing (light intro)

How can one find work on arrays of books AND arrays of numbers, yet stay type-safe? Generics: a type placeholder, filled in per use.

// Book[] is shorthand for:
let books: Array<Book> = [];

// on Book[], TS reads find as:  find(callback): Book | undefined
// on number[], the SAME find is: find(callback): number | undefined

10. The conversion plan — Library JS → TS

This is the actual Phase 3 project, in order:

1. Extract — move the inline <script> body into app.ts; point the HTML at the compiled app.js.
2. Compile dirty — run tsc, watch it list errors. Don't panic: the errors are a TODO list, and each one is a real hole JS was hiding.
3. Write interface Book — then let books: Book[] = [...]. Most errors organize themselves around this.
4. Type every function signature — borrowBook(id: number): void, etc.
5. Fix the find/null/DOM bumps — guards, as HTMLInputElement, handle Book | undefined.
6. Zero errors, zero any, app works identically — that's the Phase 3 finish line.

11. The mental model to keep

12. The conversion, as it actually went (2026-08-27) ✅

Your real Phase 3 run — 18 errors to zero, with what each step taught:

13. Capstone: Loans, due dates & fines — first NEW code in TS

Everything so far was converting code you'd already written. The capstone is different: designing a feature in TypeScript from the start — types first, code second. Read-aheads: JS notes §29 (Dates) and §30 (linking by id) are the raw material.

interface Loan {
    id: number;          // the loan's own id (same Math.max trick as books)
    bookId: number;      // WHICH book — the link, like a foreign key
    memberName: string;
    borrowedDate: string;  // ISO string — see the why box below
    dueDate: string;
    returned: boolean;
}

14. Capstone, as it actually went (2026-08-30) ✅ — PHASE 3 COMPLETE

Built in one session: interface Loan + persistent loans array → Borrow creates a Loan (name via prompt, due = today + 14 days) → loans table with id→title lookup → Return button (copy goes back) → fines at ₹5/day overdue. Verified end-to-end: back-dated loan showed ₹50 (10 days late), Return flipped it to ₹0 and restored the copy, everything survived refresh. These are the bugs the build actually hit — each one is a permanent lesson:

← Prev: JavaScript  ·  Back to contents  ·  Next: Node.js →