TypeScript Crash Course: Learn TypeScript in One Read (For JavaScript Developers)

December 17, 2025 - By Varun Shihara

TypeScript is not a new language.
It’s JavaScript with guardrails.

If JavaScript lets you drive fast, TypeScript adds seatbelts, lane markings, and a dashboard that warns you before the engine explodes.

This blog is written so you can:

Understand why TypeScript exists
Learn only what actually matters
Start using TypeScript today, not “after a course”

No theory overdose. No academic detours.

What is TypeScript (in one paragraph)?

TypeScript is a superset of JavaScript that adds static typing.
It catches bugs before your code runs, improves autocomplete, and makes large codebases sane.

TypeScript code compiles to JavaScript, and browsers never see the types.

If JavaScript is a dynamic conversation, TypeScript is that conversation written down and signed.

Why TypeScript Exists (Real Pain Points)

JavaScript fails silently.

function add(a, b) {
  return a + b;
}

add(5, "10"); // "510" 💀

TypeScript stops this at compile time.

function add(a: number, b: number): number {
  return a + b;
}

You now get:

Early bug detection
Better refactoring
IDE autocomplete that actually helps
Confidence while changing code

How TypeScript Works (Mental Model)

You write .ts or .tsx
TypeScript checks types
TypeScript removes all types
Output is plain JavaScript

Types do not exist at runtime.
They are a developer-only safety net.

Core Types You Must Know (80% of Usage)

1. Basic Types

let name: string = "Varun";
let age: number = 25;
let isDev: boolean = true;

Type inference works automatically:

let city = "Delhi"; // inferred as string

Avoid over-typing when inference is enough.

2. Arrays

let scores: number[] = [90, 85, 88];
let users: string[] = ["A", "B"];

Alternate syntax:

let scores: Array<number> = [90, 85];

3. Objects

let user: {
  name: string;
  age: number;
} = {
  name: "Varun",
  age: 25
};

This becomes painful quickly.
Use interfaces instead.

Interfaces (Most Important Feature)

Interfaces define the shape of an object.

interface User {
  id: number;
  name: string;
  email?: string; // optional
}

const user: User = {
  id: 1,
  name: "Varun"
};

Interfaces are:

Readable
Reusable
Extendable

interface Admin extends User {
  role: "admin";
}

Type vs Interface (Quick Rule)

Use interface for objects and APIs
Use type for unions, primitives, and utilities

type ID = number | string;

Union Types (Game Changer)

type Status = "loading" | "success" | "error";

let state: Status = "loading";

This prevents invalid states completely.

state = "done"; // ❌ error

Functions (Typed Properly)

function greet(name: string): string {
  return `Hello ${name}`;
}

Arrow function:

const add = (a: number, b: number): number => a + b;

Void return:

function log(msg: string): void {
  console.log(msg);
}

Any (Use Carefully)

let data: any = fetchSomething();

any turns off TypeScript.
It’s like removing the helmet while riding.

Better alternative:

let data: unknown;

Then narrow it:

if (typeof data === "string") {
  console.log(data.toUpperCase());
}

Generics (Don’t Be Scared)

Generics make code reusable without losing types.

function identity<T>(value: T): T {
  return value;
}

identity<number>(5);
identity<string>("hello");

Real-world example:

function getFirst<T>(arr: T[]): T {
  return arr[0];
}

Enums (Use Sparingly)

enum Role {
  ADMIN,
  USER
}

let userRole: Role = Role.ADMIN;

In modern apps, union types are often better.

Type Narrowing (Very Important)

function printId(id: number | string) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

TypeScript understands your logic.

Working with APIs (Real Example)

interface ApiResponse {
  id: number;
  title: string;
  completed: boolean;
}

async function fetchTodo(): Promise<ApiResponse> {
  const res = await fetch("...");
  return res.json();
}

Now your frontend knows exactly what it’s getting.

TypeScript in React (Must-Know)

Props

interface ButtonProps {
  text: string;
  onClick: () => void;
}

function Button({ text, onClick }: ButtonProps) {
  return <button onClick={onClick}>{text}</button>;
}

useState

const [count, setCount] = useState<number>(0);

Events

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}

TypeScript Configuration (Minimal Setup)

You don’t need to understand every option.

Important ones:

{
  "strict": true,
  "noImplicitAny": true,
  "target": "ES2020"
}

Start strict. Relax only if needed.

How to Learn TypeScript FAST (For Real)

Day 1

Convert one JS file to TS
Fix errors
Don’t use any unless forced

Day 2

Add interfaces to API responses
Type your functions

Day 3

Learn unions + generics
Refactor confidently

TypeScript is best learned while breaking things.

Common Beginner Mistakes

Over-typing everything
Fighting the compiler instead of listening
Using any everywhere
Trying to master advanced types too early

TypeScript rewards incremental adoption.

Final Thoughts

TypeScript is not about writing more code.
It’s about writing less wrong code.

Once your brain switches, going back to plain JavaScript feels like coding with the lights off.

Searching in