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

ডেভসংকেত

টাইপস্ক্রিপ্ট জাভাস্ক্রিপ্ট ল্যাংগুয়েজের একটি সুপারসেট। এটির উদ্দেশ্য হলো জাভাস্ক্রিপ্টকে স্ট্রংলি টাইপড ল্যাংগুয়েজের একটা ফ্লেভার দেওয়া যাতে আমাদের কোডের ইরর সহজে ধরা পড়ে এবং এপ্লিকেশনের অনেক অনাকাঙ্ক্ষিত আচরণ থেকে আমরা রক্ষা পাই। টাইপস্ক্রিপ্ট জাভাস্ক্রিপ্টের মত ব্রাউজারে লেখা যায় না।

ইন্সটলেশন ও কনফিগারেশন

গ্লোবালি টাইপস্ক্রিপ্ট ইন্সটল করা (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"
]

ডেটাটাইপ

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

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 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;

অ্যারে ও টাপল

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

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]

ফাংশন

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

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
{...}

অবজেক্ট

ডিক্লারেশন

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)

ক্লাস

ডিক্লারেশন

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 };

ইন্টারফেস

ডিক্লারেশন

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;
}

ইনিউমারেশন বা ইনাম

ডিক্লারেশন

enum Role { ADMIN, READ_ONLY, AUTHOR }

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

enum Role { ADMIN = 5, READ_ONLY, AUTHOR }

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

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

ডেকোরেটর

ডিক্লারেশন

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

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

@food('burger')
 class kitchen {}

ইউটিলিটি টাইপ

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

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

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

ইন্টারফেস হ্যাকস ও ট্রিকস

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

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 
}

এই চিটশিটে কন্ট্রিবিউট করেছেনঃ

  • AlAminKh03

    AlAminKh03

    username/AlAminKh03

  • SojebSikder

    sojebsikder

    username/SojebSikder

  • iamraufu

    iamraufu

    username/iamraufu

  • hridoy43

    hridoy43

    username/hridoy43

  • shaonkabir8

    Shaon Kabir

    username/shaonkabir8

  • Shadab420

    Shadab420

    username/Shadab420

ডেভসংকেত

বাংলা চিটশিটের ভান্ডার

devsonket.com

প্রিন্ট করুন