Ruhul Amin Sujon

Posted on Aug 25

TypeScript A-to-Z Roadmap/Syllabus দিলাম, যা Beginner Intermediate Advanced Expert লেভেল পর্যন্ত কভার করবে।

#typescript #javascript #tutorial #beginners

যেহেতু তুমি ইতিমধ্যে JavaScript জানো, তাই TypeScript শেখার জন্য তোমাকে JavaScript-এর বেসিকগুলো আবার শেখার দরকার নেই। বরং TypeScript-এর Type System, Advanced Types, Generics, OOP Features, Utility Types, এবং Framework Integration-এর উপর ফোকাস করা উচিত।

নিচে আমি TypeScript A-to-Z Roadmap/Syllabus দিলাম, যা Beginner → Intermediate → Advanced → Expert লেভেল পর্যন্ত কভার করবে।

Module 1: TypeScript Introduction

TypeScript কী?

TypeScript হলো JavaScript-এর Superset।

JavaScript-এর সব কোড TypeScript-এ চলে, কিন্তু TypeScript অতিরিক্ত Type Safety দেয়।

JavaScript

let name = "Ruhul";
name = 100;

এখানে কোনো Error নেই।

TypeScript

let name: string = "Ruhul";

name = 100;

Output:

Type 'number' is not assignable to type 'string'

TypeScript Installation

Global Install

npm install -g typescript

Check version

tsc -v

Compile TS

tsc app.ts

Generate:

app.js

Module 2: Basic Types

String

let name: string = "Ruhul";

Number

let age: number = 25;

Boolean

let isActive: boolean = true;

Array

let numbers: number[] = [1,2,3];

অথবা

let numbers: Array<number> = [1,2,3];

Object

let user: {
    name: string;
    age: number;
};

Tuple

নির্দিষ্ট Index-এর জন্য নির্দিষ্ট Type।

let person: [string, number];

person = ["Ruhul", 25];

Enum

enum Status {
    Pending,
    Approved,
    Rejected
}

let status = Status.Approved;

Module 3: Type Inference

TypeScript অনেক সময় নিজেই Type বুঝে নেয়।

let name = "Ruhul";

Automatically:

string

Explicit Type

let name: string = "Ruhul";

Module 4: Any, Unknown, Never

Any

let value: any;

value = "Hello";
value = 100;
value = true;

সব কিছু Assign করা যায়।

Unknown

let value: unknown;

value = "Hello";

Use করার আগে Type Check করতে হবে।

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

Never

function throwError(): never {
    throw new Error("Error");
}

Module 5: Functions

Function Parameter Type

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

Optional Parameter

function greet(name?:string){
    console.log(name);
}

Default Parameter

function greet(name:string="Guest"){
    console.log(name);
}

Rest Parameter

function total(...nums:number[]){
    return nums.reduce((a,b)=>a+b);
}

Module 6: Union & Intersection

Union Type

let value:string | number;

value = "Hello";
value = 100;

Function Example

function print(value:string | number){
    console.log(value);
}

Intersection Type

type User={
    name:string;
}

type Admin={
    role:string;
}

type SuperAdmin = User & Admin;

Module 7: Type Alias

type User = {
    name:string;
    age:number;
}

Use

const user:User = {
    name:"Ruhul",
    age:25
}

Module 8: Interface

interface User {
    name:string;
    age:number;
}

Extend Interface

interface User {
    name:string;
}

interface Admin extends User {
    role:string;
}

Module 9: Type vs Interface

Type:

type User = {}

Interface:

interface User {}

Interview Question

কখন Type ব্যবহার করবে?

Union
Intersection

কখন Interface ব্যবহার করবে?

Object Shape
OOP Design

Module 10: Object Oriented Programming

Class

class User{
    name:string;

    constructor(name:string){
        this.name=name;
    }
}

Access Modifier

Public

public name:string;

Private

private password:string;

Protected

protected email:string;

Readonly

readonly id:number;

Module 11: Inheritance

class User{
    name:string;

    constructor(name:string){
        this.name=name;
    }
}

class Admin extends User{
    role:string;

    constructor(name:string, role:string){
        super(name);
        this.role=role;
    }
}

Module 12: Abstract Class

abstract class Animal{
    abstract sound():void;
}

class Dog extends Animal{
    sound(){
        console.log("Bark");
    }
}

Module 13: Generics

সবচেয়ে গুরুত্বপূর্ণ Topic।

Without Generic

function getData(data:string){
    return data;
}

Generic

function getData<T>(data:T):T{
    return data;
}

Use

getData<string>("Hello");

getData<number>(100);

Generic Array

let numbers:Array<number>;

Generic Interface

interface ApiResponse<T>{
    data:T;
    success:boolean;
}

Module 14: Generic Constraints

function getLength<T extends {length:number}>
(value:T){
    return value.length;
}

getLength("Hello");

Module 15: keyof

type User = {
    name:string;
    age:number;
}

type UserKeys = keyof User;

Result:

"name" | "age"

Module 16: typeof

const user = {
    name:"Ruhul"
}

type User = typeof user;

Module 17: Mapped Types

type User = {
    name:string;
    age:number;
}

type ReadOnlyUser = {
    readonly [K in keyof User]: User[K]
}

Module 18: Utility Types

Partial

Partial<User>

সব Property Optional।

Required

Required<User>

সব Required।

Pick

Pick<User,"name">

Omit

Omit<User,"age">

Record

Record<string,string>

Module 19: Type Narrowing

function print(value:string|number){

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

}

Module 20: Type Assertion

let value = document.getElementById("app") as HTMLDivElement;

Module 21: Modules

Export

export const name="Ruhul";

Import

import {name} from "./user";

Module 22: Namespaces

namespace App{
    export const name="Ruhul";
}

Module 23: Decorators

function Logger(target:any){
    console.log(target);
}

@Logger
class User{}

Module 24: Declaration Files

declare const API_URL:string;

Module 25: tsconfig.json

Generate

tsc --init

Important Settings

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist"
  }
}

Module 26: Advanced Types

Conditional Types

type Check<T> =
T extends string
? string
: number;

Infer

type ReturnTypeCustom<T> =
T extends (...args:any[])=>infer R
? R
: never;

Module 27: TypeScript with DOM

const btn =
document.querySelector("button");

btn?.addEventListener("click",()=>{
    console.log("Clicked");
});

Module 28: TypeScript with API

interface User{
    id:number;
    name:string;
}

async function getUsers(){

    const response =
    await fetch('/users');

    const users:User[] =
    await response.json();

    return users;
}

Module 29: TypeScript with Node.js

import express from "express";

const app = express();

Module 30: TypeScript with React

Component Props

type Props={
    name:string;
}

function User({name}:Props){
    return <h1>{name}</h1>;
}

Module 31: TypeScript Interview Questions

শিখে রাখবে:

any vs unknown
type vs interface
union vs intersection
generic কী
keyof কী
mapped types কী
utility types কী
type inference কী
declaration merging কী
never type কী

Recommended Learning Order (সবচেয়ে ভালো)

Phase 1 (Foundation)

Introduction
Basic Types
Functions
Array
Object
Union
Type Alias
Interface

Phase 2 (Intermediate)

OOP
Generics
keyof
typeof
Type Narrowing

Phase 3 (Advanced)

Utility Types
Mapped Types
Conditional Types
Infer
Decorators

Phase 4 (Real Project)

React + TypeScript
Node + TypeScript
Express + TypeScript
API Typing
Database Typing

যদি লক্ষ্য Laravel Developer থেকে Full Stack Developer হওয়া হয়, তাহলে শেখার ক্রম হতে পারে:

JavaScript → TypeScript → React → Next.js → Node.js/Express → Full Stack TypeScript Project

এভাবে TypeScript শেখার পর React/Next.js-এ কাজ করা অনেক সহজ হবে।