Stop 07 · TypeScript Across the StackTopics · 1/7

TypeScript Fundamentals

Part of the Full Stack Developer Roadmap

In short

In a full stack app, one wrong field name can break the server, the page, or both. TypeScript catches that mistake in your editor, before you even run the code.

Going beyond basic type annotations into TypeScript's fuller feature set — the investment that pays off most once your codebase spans both a frontend and a backend that need to agree on data shapes.

The mascot sorts newspapers and a plastic bottle into separate scrap sacks.

Think of it like this

The kabadiwala's separate sacks

The kabadiwala keeps one sack for paper, one for plastic, one for metal. Toss a bottle into the paper sack and he stops you on the spot, not at the recycling plant. TypeScript is that check: wrong kind of value, wrong place, caught early.

Watch it happen

From .ts file to running code

order.ts

Type check

Errors

Plain .js

Runs

1/5You write normal JavaScript plus type annotations like amount: number.

The big ideas

What you need to know

Inference does most of the work

const count = 5 is already a number. Annotate function parameters and return types, and let TS infer the rest.

Union types

status: "pending" | "paid" | "failed" allows only those three strings. A typo like "payed" is an error.

Optional and null

coupon?: string may be missing. With strict mode on, TS forces you to check before using it.

Types vanish at runtime

TypeScript can't check JSON from an API while the app runs. Validate external data with something like Zod.

See it in code

Walk through the code

1type Status = "pending" | "paid" | "failed";2 3interface Order {4  id: number;5  amount: number;   // in paise6  status: Status;7  coupon?: string;  // optional8}9 10function receipt(order: Order): string {11  const note = order.coupon ? ` (coupon ${order.coupon.toUpperCase()})` : "";12  return `Order #${order.id}: ₹${order.amount / 100}${note}`;13}14 15receipt({ id: 7, amount: 49900, status: "paid" });  // fine16receipt({ id: 8, amount: "499", status: "done" });  // 2 errors before you even run it

1/4A union type: only these three exact strings are allowed.

Hover over anything in VS Code to see its type. The red squiggles on the last line are TypeScript doing its job.

Save yourself the pain

Common mistakes

Oops

Using any whenever the compiler complains.

Do this instead

any switches checking off. Use unknown and narrow it, or write the real type. Turn on strict in tsconfig.

Oops

Assuming a typed fetch result is safe: const user = (await res.json()) as User.

Do this instead

as only tells the compiler to trust you. Parse API data with a schema if it really matters.

Your mission

Convert a JS file

~30 min

Quick check

Your TypeScript code compiles fine, but the API sends price as a string. What happens at runtime?

Go deeper

1Convert a small existing project (frontend or backend) to TypeScript incrementally.
2Enable `strict` mode and fix the type errors it surfaces.
3Notice how much TypeScript catches integration bugs between your two codebases.