Mastering TypeScript: From Beginner to Pro ⭐ 👨‍💻

📚 Sommaire (Table of Contents)

1. Introduction

2. Why Typescript

3. Getting Started

4. Type System Fundamentals

5. Functions in Typescript

6. Advanced Types

7. Object oriented Programming

8. Working with generics types

9. Utility & Built-in Helpers

10. Conclusion & Next Steps

---

1. ✍️ Introduction

TypeScript is a statically typed superset of JavaScript that brings type safety to your codebase without losing the flexibility of JavaScript. Whether you’re working on a frontend UI or a backend API, mastering TypeScript will level up your productivity and confidence as a developer.

2. 🤷‍♂️ Why Typecript

• Prevents runtime errors by catching bugs at compile-time.
• Great tooling: IntelliSense, autocomplete, and better refactoring.
• Scales better for large codebases.
• Acts as documentation for your code.

3. 😁 Getting Started

Installing TypeScript

npm install -g typescript

Setting up a Project

npx tsc --init

This generates a tsconfig.json file.

To start , create an index.ts file and and add this code

// index.ts
let message: string = "Hello TypeScript";
console.log(message);

Compile and run

tsc index.ts && node index.js

4. Type System Fundamentals

Primitives

let name: string = "Scott";
let age: number = 30;
let isActive: boolean = true;

Arrays & Tuples

let numbers: number[] = [1, 2, 3];
let user: [string, number] = ["Alice", 25];

Enums

enum Role {
  Admin,
  User,
  Guest,
}

Inference
TypeScript can often infer types:

let greeting = "Hello"; // inferred as string

5. Functions in TypeScript

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

Function with optional parameters :

function log(message: string, user?: string) {
  console.log(user ? `[${user}] ${message}` : message);
}

6. Advanced Types

Union & Intersection

type Status = "success" | "error" | "loading";
type Admin = { name: string; role: "admin" };
type User = { name: string; role: "user" };
type Person = Admin | User;

Type Aliases vs Interfaces

type Point = { x: number; y: number };
interface IPoint { x: number; y: number; }

Type Guards

function isAdmin(person: Person): person is Admin {
  return person.role === "admin";
}

7. Object-Oriented Programming

class Animal {
  constructor(public name: string) {}
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

8. Generics

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

const num = identity<number>(42);

Generics make your code reusable while preserving type safety.

9. Utility Types

type User = { id: number; name: string; email: string };

type PartialUser = Partial<User>;
type UserEmail = Pick<User, "email">;
type WithoutEmail = Omit<User, "email">;

10. Conclusion

TypeScript might feel verbose at first, but as your project grows, the type safety, tooling, and scalability pay off. Whether you're building a simple frontend app or a large-scale backend service, TypeScript gives you the confidence to move fast and refactor safely.

**
🛠 Bonus: Tools & Resources
**

• TypeScript Docs
• TS Playground
• DefinitelyTyped