Stop 07 · TypeScriptTopics · 1/12

Types

In short

JavaScript happily lets you add a number to undefined and only complains when users see the bug. TypeScript catches it while you're still typing.

The basic building block of TypeScript — annotating variables, parameters and return values so mismatches are caught at compile time instead of runtime.

The jaadu mascot opens a steel compartment tiffin and keeps the dal away from the rotis.

Think of it like this

Labelled tiffin compartments

Your mom's tiffin has fixed spots: roti here, sabzi there, achaar in the small one. Nobody pours dal into the roti section. Types are those labels for your variables, so the wrong thing never goes in the wrong place.

Watch it happen

From .ts file to running code

Write .ts

Type check

Errors

Strip types

Run .js

1/5You write percentage(87, "100"). The function expects two numbers.

The big ideas

What you need to know

Annotate with a colon

let age: number = 19. Now putting a string in age is an error before you even run the code.

Inference does most of it

Write let name = "Riya" and TypeScript already knows it's a string. Annotate function inputs, let it infer the rest.

any switches checks off

any lets anything through, so you lose all safety. Use unknown when you truly don't know the type yet.

Types vanish at runtime

TypeScript compiles to plain JavaScript. Types help while coding, but the browser never sees them.

See it in code

Walk through the code

1let marks: number = 87;2const name = "Aditi";           // inferred as string3const subjects: string[] = ["DSA", "DBMS"];4 5function percentage(scored: number, total: number): number {6  return (scored / total) * 100;7}8 9percentage(87, "100");10// Error: Argument of type 'string' is not assignable to parameter of type 'number'.11 12let data: unknown = JSON.parse('{"ok":true}');13// data.ok  -> Error, check the type first

1/4An explicit number, an inferred string, and an array that only holds strings.

The error shows up in your editor with a red underline, long before anyone runs the code.

Save yourself the pain

Common mistakes

Oops

Using any whenever TypeScript complains.

Do this instead

Read the error and fix the type. If you really don't know it, use unknown and check before using.

Oops

Annotating every single variable, even obvious ones.

Do this instead

Let inference handle simple values. Annotate function parameters and anything inference gets wrong.

Your mission

Catch bugs before running

~15 min

Quick check

Why is unknown safer than any?

Go deeper

1Add type annotations to a small existing JS file's variables and functions.
2Learn TypeScript's structural typing — types match by shape, not by name.
3Practice letting inference work instead of over-annotating everything.