Mastering TypeScript from Scratch – Part 1: Beginner Foundations

A practical beginner-friendly guide to kickstart your TypeScript journey with clear examples and concepts.

Hey everyone 👋, posting after a very long time! I’ve decided to share my TypeScript learning journey here. Since I’m a JavaScript developer exploring TypeScript, I thought it would be fun (and useful) to break everything down step by step. This series will be divided into 3 parts – Beginner, Intermediate, and Advanced – and today we’re starting with Part 1: The Beginner Foundations 🚀.

So, let’s do a deep dive into Beginner TypeScript with clear explanations + code snippets. I’ll explain concept → example → key takeaway so even as a first-time learner, you’ll connect the dots.

📘 Beginner TypeScript Deep Dive

🔹 1. Intro & Setup

What is TypeScript & Why use it?

TypeScript = JavaScript + static types.

• It catches errors at compile time, before running.
• Makes code self-documenting.
• Works great for large projects and with frameworks like React, Node, Angular.

Install & Compiler Basics

**Install TypeScript globally**
npm install -g typescript

**Check version**
tsc -v

**Compile a file**
tsc index.ts

**Runs with Node (if you installed ts-node)**
npx ts-node index.ts

tsconfig.json (Basic Config)

tsc --init

Example config:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  }
}

This means TS will output ES6 JS into dist/.

🔹 2. Basic Types

let username: string = "Usman";
let age: number = 23;
let isDev: boolean = true;

let nothing: null = null;
let notDefined: undefined = undefined;

// Special types
let anything: any = "can be anything";  // avoid if possible
let unknownValue: unknown = "safer than any";
let neverHappens: never;  // for impossible cases

✅ Key takeaway: TS forces you to declare variable types and protects you.

🔹 3. Type Inference

You don’t always need to explicitly write types; TS guesses them.

let city = "New York"; // inferred as string
// city = 123; ❌ Error

let score = 100; // inferred as number

🔹 4. Literal Types

let status: "success" | "error" | "loading";

status = "success";  // ✅
status = "error";    // ✅
status = "failed";   // ❌ not allowed

🔹 5. Arrays & Tuples

Arrays

let fruits: string[] = ["apple", "banana"];
let numbers: Array<number> = [1, 2, 3];

Tuples

let user: [string, number];
user = ["Ali", 23];  // ✅
user = [23, "Ali"];  // ❌ wrong order

Readonly Arrays

let colors: readonly string[] = ["red", "green"];
// colors.push("blue"); ❌ cannot modify

🔹 6. Objects & Type Aliases

Object Types

let car: { brand: string; year: number } = {
  brand: "Toyota",
  year: 2022,
};

Optional Properties

type Person = {
  name: string;
  age?: number;  // optional
};

let p1: Person = { name: "Usman" };        // ✅
let p2: Person = { name: "Awan", age: 26 } // ✅

Readonly Properties

type Book = {
  readonly title: string;
  pages: number;
};

let b: Book = { title: "TS Handbook", pages: 300 };
// b.title = "New Title"; ❌ cannot reassign

Type Aliases

type User = {
  id: number;
  username: string;
};

let u: User = { id: 1, username: "usmanawan" };

🔹 7. Functions

Typing Parameters & Return Types

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

console.log(greet("Usman"));

Optional & Default Parameters

function log(message: string, userId?: number) {
  console.log(message, userId || "Anonymous");
}

function add(x: number, y: number = 10): number {
  return x + y;
}

log("Welcome");   // userId optional
console.log(add(5)); // uses default 10 → 15

Function Type Aliases

type MathOp = (a: number, b: number) => number;

const multiply: MathOp = (x, y) => x * y;

void vs never

function logMessage(msg: string): void {
  console.log(msg); // doesn’t return anything
}

function throwError(message: string): never {
  throw new Error(message); // never returns
}

🔹 8. Union & Intersection Types

Union (|)

let id: string | number;
id = "abc";  // ✅
id = 123;    // ✅

Intersection (&)

type A = { name: string };
type B = { age: number };

type PersonAB = A & B;

let person: PersonAB = { name: "Ali", age: 25 };

🔹 9. Enums

Numeric Enum

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

let move: Direction = Direction.Up;

String Enum

enum Status {
  Success = "SUCCESS",
  Error = "ERROR",
}

let s: Status = Status.Success;

Const Enum

const enum Roles {
  Admin,
  User,
}

let role: Roles = Roles.Admin;

✅ Beginner Summary Checklist

• Install TS + config setup
• Basic types (string, number, boolean, null, undefined, any, unknown, never)
• Type inference & literals
• Arrays, tuples, readonly arrays
• Objects, type aliases, optional/readonly props
• Functions (typed params, return types, void, never)
• Union & intersection types
• Enums

That wraps up Part 1 (Beginner) of our TypeScript journey! 🎉 We covered all the foundations you need to get started – from setting up TypeScript to working with basic types, arrays, objects, functions, unions, and enums. In the next part (Intermediate), we’ll dive deeper into concepts like interfaces, generics, classes, and utility types to start writing more powerful and structured code. Stay tuned for Part 2 – it’s going to be exciting! 💡

Part 2: Intermediate Concepts
Part 3: Advance Concepts

Thanks for reading! 🙌
Until next time, 🫡
Usman Awan (your friendly dev 🚀)