ডেভসংকেত

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

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

কন্ট্রিবিউটর

  • shaonkabir8
  • hridoy43
  • Shadab420

শেয়ার করুন

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

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

ডেটাটাইপ

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

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