টাইপস্ক্রিপ্ট

গ্লোবালি টাইপস্ক্রিপ্ট ইন্সটল করা (yarn এর সাহার্যে)

yarn global add typescript

গ্লোবালি টাইপস্ক্রিপ্ট ইন্সটল করা (npm এর সাহার্যে)

npm install typescript -g

লোকাল প্রজেক্টে টাইপস্ক্রিপ্ট ইন্সটল করা (yarn এর সাহার্যে)

yarn add typescript

লোকাল প্রজেক্টে টাইপস্ক্রিপ্ট ইন্সটল করা (npm এর সাহার্যে)

npm install typescript

টাইপস্ক্রিপ্ট প্রজেক্টে ইনিশিয়ালাইজ করা

tsc --init

একটি নির্দিষ্ট ফাইলকে কম্পাইল করা

tsc app.ts

একটি নির্দিষ্ট ফাইলকে ওয়াচমোডে কম্পাইল করা

tsc app.ts -w

সব টাইপস্ক্রিপ্ট ফাইলকে কম্পাইল করা

tsc

সব টাইপস্ক্রিপ্ট ফাইলকে ওয়াচমোডে কম্পাইল করা

tsc -w

কোন ফাইলকে কম্পাইল করতে না চাইলে tsconfig.json ফাইলে গিয়ে শেষ ব্র্যাকেটের আগে এভাবে কোড লিখতে হবে

"exclude": [
	"example.ts",
	"example2.ts",
	"*.dev.ts",   //.dev.ts দিয়ে শেষ হওয়া ফাইলগুলো বাদ 
	"**/*.dev.ts" //সব ফোল্ডারে .dev.ts দিয়ে শেষ হওয়া ফাইলগুলো বাদ
]

কোন ফাইলকে কম্পাইল প্রোসেসে এড করতে চাইলে tsconfig.json ফাইলে গিয়ে শেষ ব্র্যাকেটের আগে এভাবে কোড লিখতে হবে

"include": [
	"app.ts"
]

ভ্যারিয়েবল ডিক্লারেশন

let age: number

ভ্যারিয়েবল ডিক্লারেশনের সময় ভ্যালু এসাইন করা

let age: number = 20

টাইপের এলিয়াস/উপনাম

type Direction: 'left' | 'right';
let direction: Direction;

টাইপের এসারশন

let someValue: any = 'this is a string';
let strLength: number = (someValue as string).length;
const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;

কন্সট্রাক্টর

new () => ConstructedType;

ফাংশন প্যারামিটার ও রিটার্ন টাইপ

function add (n1: number, n2: number) => number; 

	 //or 

function add (n1: number, n2: number): number;

এরো ফাংশন

let greeting = (name: string): string => {
	return "Hello " + name;
}

let greetUser = greeting("Shadab")
console.log(greetUser);

অপশনাল প্যারামিটার

(arg1: Type, optional?: Type) => ReturnType

ডিফল্ট প্যারামিটার

function fn(arg1 = 'default'): ReturnType {}

রেস্ট প্যারামিটার

(arg1: Type, ...allOtherArgs: Type[]) => ReturnType

ওভারলোড

function conv(a: string): number;
function conv(a: number): string;
function conv(a: string | number): string | number
{...}

ডিক্লারেশন

class Greeter {
	greeting: string;

	constructor(message: string) {
		this.greeting = message;
	}

	greet() {
		return "Hello, " + this.greeting;
	}
}

পাবলিক মডিফায়ার

class Animal {
	public name: string;
	public constructor(theName: string) {
		this.name = theName;
	}
	public move(distance: number) {
	  console.log(`${this.name} moved ${distance}m.`);
	}
}

প্রাইভেট মডিফায়ার

class Animal {
	private name: string;

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

প্রোটেক্টেড মডিফায়ার

class Animal {
	protected name: string;

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

ক্লাসকে ব্যবহার করা

let greeter = new Greeter("world");

ক্লাসের ইনহেরিটেন্স

class Animal {
	move(distance: number = 0) {
	  console.log(`Animal moved ${distance}m.`);
	}
}

class Dog extends Animal {
	bark() {
		console.log("Woof! Woof!");
	}
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

এবস্ট্রাক্ট ক্লাস

abstract class Animal {

	abstract makeSound(): void;

	move(): void {
		console.log("roaming the earth...");
	}
}

ক্লাসকে ইন্টারফেসের মতো ব্যবহার করা

class Point {
	x: number;
	y: number;
}

interface Point3d extends Point {
	z: number;
}

let point3d: Point3d = { x: 1, y: 2, z: 3 };

ডিক্লারেশন

enum Role { ADMIN, READ_ONLY, AUTHOR }

সিরিয়াল অন্য নাম্বার থেকে শুরু করা

enum Role { ADMIN = 5, READ_ONLY, AUTHOR }

নিজের ইচ্ছামত ভ্যালু এসাইন করা

enum Role { ADMIN = 'Admin', READ_ONLY = 300, AUTHOR = 250 }

পারশিয়াল বা আংশিক টাইপ

interface Person {
	name: string;
	age: number;
	height: string;
}

const person1: Partial<Person> = {
	name: 'Hridoy',
	age: 28
}

বেসিক ডেটাটাইপগুলো

Any, number, string, boolean, object, Array, Tuple, Enum, undefined, null, void, never, unknown

ইউনিয়ন ডেটাটাইপ

const userId: number | string

ইন্টারসেকশন ডেটাটাইপ

let myIntersectionType: Foo & Bar;

লিটারেল ডেটাটাইপ (স্ট্রিং)

let direction: 'left' | 'right'

লিটারেল ডেটাটাইপ (নাম্বার)

let roll: 1 | 2 | 3 | 4 | 5

লিটারেল ডেটাটাইপ (বুলিয়ান)

let isOnline: true | false

অ্যারে ডিক্লারেশন

let ages: number[]

অ্যারেতে ভ্যালু এসাইন করা

ages = [12, 5];

ইউনিয়ন টাইপ অ্যারে ডিক্লারেশন

let x: (number | boolean | string)[];

ইউনিয়ন টাইপ অ্যারেতে ভ্যালু এসাইন করা

x = [23, true, 'AnyString'];

অ্যারের কোন পজিশনের ভ্যালু এক্সেস করা

let secondAge = ages[1]

টাপল ডিক্লারেশন

let tp: [number, string]

টাপলে ভ্যালু এসাইন করা

tp = [10, 'player']

কন্ডিশনাল টাপল ডিক্লারেশন

let tp: [number, string?]

কন্ডিশনাল টাপলে ভ্যালু এসাইন করা

tp = [10]

ডিক্লারেশন

var person = { 
	firstname:"Tom",
	lastname:"Hanks"
	sayHello:function() {  }
};
person.sayHello = function() {
	console.log('hello'+person.firstName)
};
person.sayHello();

প্রোপার্টি এক্সেস করা

person.firstname;
person.sayHello();

কন্ডিশনাল প্রপার্টি সহ ডিক্লারেশন

var person = { 
	firstname:"Tom",
	lastname?:string,
} = {firstname: 'Hridoy'}

কন্ডিশনাল প্রোপার্টি এক্সেস করা

console.log(person.lastname?.length)

ডিক্লারেশন

interface ClockInterface {
	currentTime: Date;
	setTime(d: Date): void;
}

ইন্টারফেস ইমপ্লিমেন্ট করা

class Clock implements ClockInterface {

	currentTime: Date = new Date();

	setTime(d: Date) {
		this.currentTime = d;
	}

	constructor(h: number, m: number) {}
}

ইন্টারফেসে ইনহেরিটেন্স

interface Child extends Parent, SomeClass {
	property: Type;
	optionalProp?: Type;
	optionalMethod?(arg1: Type): ReturnType;
}

ডিক্লারেশন

function food(value: string) {
	return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {};
}

ডেকোরেটর ব্যাবহার করা

@food('burger')
 class kitchen {}

অপশনাল প্রোপার্টি ডিক্লেয়ার করা('?' চিহ্ন দিয়ে)

interface PersonInterface {
	name:string;
	age:number; 
	profession?:string;
}

উপরের interface থেকে কোনো object বানাতে গেলে profession প্রোপার্টি ছাড়াই বানানো সম্ভব হবে

const person1:PersonInterface {

	name: ='Al Amin Khan',

	age:23 
}

অপশনাল প্রোপার্টি ডিক্লেয়ার না করেই প্রোপার্টি বাদ দেওয়া

interface PersonInterface {
	name:string;
	age:number; 
	profession:string;
}

Omit হ্যাকস ব্যবহার করে প্রোপার্টি বাদ দেওয়া যায়

const person1:Omit<PersonInterface,'profession'> {

	name: ='Al Amin Khan',

	age:23 
}