Stop 03 · HTML, CSS & JavaScript EssentialsTopics · 11/11

TypeScript Basics

Part of the Full Stack Developer Roadmap

In short

TypeScript catches bugs while you type, before your API ever runs. Spelling mistakes, missing fields and wrong types get flagged in the editor instead of in production logs.

Adding static types to your JavaScript so mismatched data shapes — a classic source of full-stack bugs between frontend and backend — get caught before runtime.

The mascot sticks colour labels on identical salt and sugar jars on a shelf.

Think of it like this

Labelled jars in the kitchen

Salt and sugar look the same in plain jars. One sleepy morning, your chai gets salted. Put labels on the jars and the mistake becomes almost impossible. TypeScript puts labels on your values so the wrong one doesn't go in.

Watch it happen

From .ts to running code

app.ts

Type check

Strip types

app.js

Node runs

1/5You write app.ts with type labels like price: number.

The big ideas

What you need to know

Annotate the edges

Label function parameters and return types. Inside functions, TypeScript usually infers the rest for you.

Turn on strict

"strict": true in tsconfig.json catches null bugs and missing types. Always start with it on.

Avoid any

any switches checking off for that value. Use unknown when you truly don't know, and narrow it before use.

Types vanish at runtime

TypeScript can't check JSON from a request. You still need runtime validation for outside data.

See it in code

Walk through the code

1function addGst(price: number, rate = 0.18): number {2  return price * (1 + rate);3}4 5addGst(100);        // OK6addGst("100");      // Error: string is not assignable to number7 8let orderId = 42;   // inferred as number9orderId = "abc";    // Error: string is not assignable to number10 11const tags: string[] = ["veg", "spicy"];12let discount: number | null = null; // can be a number or null

1/4Parameter and return types are labelled. rate gets its type from the default value.

You didn't write a type for orderId, but TypeScript inferred it from the first value. Most of the time, inference does the work.

Save yourself the pain

Common mistakes

Oops

Sprinkling any everywhere to make red squiggles go away.

Do this instead

Fix the real type, or use unknown and narrow it. Each any is a hole where bugs slip through.

Oops

Trusting that req.body matches your TypeScript type.

Do this instead

Types aren't checked at runtime. Validate incoming data with a library like Zod, then use the typed result.

Your mission

Catch three bugs

~20 min

Quick check

A request sends { "age": "twenty" } to a route typed as { age: number }. What does TypeScript do at runtime?

Go deeper

1Add basic type annotations to a small existing JS file.
2Define an interface for a data model you'll use on both frontend and backend.
3Practice letting inference work rather than over-annotating everything.