টাইপস্ক্রিপ্টের প্রাথমিক বিষয়গুলি

এই প্রবন্ধে টাইপস্ক্রিপ্টের প্রাথমিক বিষয়গুলি ব্যাখ্যা করা হয়েছে।

YouTube Video

"হ্যালো ওয়ার্ল্ড!" কার্যকর করা

প্রথমে, আমরা ভিজুয়াল স্টুডিও কোড ব্যবহার করে টাইপস্ক্রিপ্টে ক্লাসিক "হ্যালো ওয়ার্ল্ড!" উদাহরণটি চালাব।

npm install -g typescript

npm কমান্ড ব্যবহার করে typescript ইনস্টল করুন।

tsconfig.json ফাইল তৈরি করুন।

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

ভিজুয়াল স্টুডিও কোডে main.ts ফাইল চালানোর জন্য .vscode/launch.json ফাইল তৈরি করুন।

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

"হ্যালো ওয়ার্ল্ড!" প্রদর্শনের জন্য একটি main.ts ফাইল তৈরি করুন। আপনি F5 কী টিপে এটিকে ভিজুয়াল স্টুডিও কোডে চালাতে পারেন।

1console.log("Hello World!");

এই ভাবে কনফিগার করলে, আপনি VSCode এর মধ্যে TypeScript ফাইলগুলো চালাতে পারবেন।

টাইপস্ক্রিপ্টের সংক্ষিপ্ত বিবরণ

টাইপস্ক্রিপ্ট (TS) হচ্ছে মাইক্রোসফটের দ্বারা উন্নত জাভাস্ক্রিপ্টের একটি সুপারসেট। টাইপস্ক্রিপ্ট স্থির টাইপিং সমর্থন করে, যা আরও শক্তিশালী এবং রক্ষণযোগ্য কোড নিশ্চিত করে।

স্থির টাইপিং

• টাইপস্ক্রিপ্ট জাভাস্ক্রিপ্টে টাইপ যোগ করে এবং কম্পাইল সময়ে টাইপ যাচাই করে। এটি টাইপ-সম্পর্কিত বাগ আগেই প্রতিরোধ করতে সহায়ক।

1let message: string = "Hello, TypeScript";
2console.log(message);

কম্পাইলেশন

• টাইপস্ক্রিপ্ট সরাসরি কোনো ব্রাউজারে কার্যকর করা যায় না, তাই এটিকে জাভাস্ক্রিপ্টে রূপান্তর (কম্পাইল) করতে হয়। tsc (টাইপস্ক্রিপ্ট কম্পাইলার) ব্যবহার করে TS ফাইলকে JS ফাইলে রূপান্তর করুন।

ঐচ্ছিক টাইপ অ্যানোটেশন

• টাইপস্ক্রিপ্ট টাইপ নির্ণয় করে কিন্তু প্রয়োজনে আপনাকে স্পষ্টভাবে টাইপ নির্ধারণের অনুমতি দেয়। এটি কোডের পাঠযোগ্যতা এবং নির্ভরযোগ্যতা উন্নত করে।

1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

ইন্টারফেস

• টাইপস্ক্রিপ্ট অবজেক্টের গঠন নির্ধারণ করার জন্য interface প্রদান করে। এটি অবজেক্টের কাঠামোর কঠোর ব্যবস্থাপনা নিশ্চিত করে।

1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

ক্লাসসমূহ

• টাইপস্ক্রিপ্ট জাভাস্ক্রিপ্টের ক্লাস সিনট্যাক্সের সম্প্রসারণ প্রদান করে এবং ইনহেরিট্যান্স, অ্যাক্সেস মডিফায়ারস (public, private, protected), এবং অ্যাবস্ট্রাক্ট ক্লাস সমর্থন করে।

 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

জেনেরিকস

• টাইপস্ক্রিপ্টে, আপনি জেনেরিকস ব্যবহার করে পুনঃব্যবহারযোগ্য এবং টাইপ-সঠিক কোড লিখতে পারেন।

1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

ইকোসিস্টেম

• টাইপস্ক্রিপ্ট জাভাস্ক্রিপ্ট ইকোসিস্টেমের সাথে পুরোপুরি সামঞ্জস্যপূর্ণ এবং বিদ্যমান জাভাস্ক্রিপ্ট কোড ব্যবহার করতে পারে। তদ্ব্যতীত, এটি React এবং Node.js এর মতো জনপ্রিয় লাইব্রেরির সাথে ইন্টিগ্রেটেড।

শক্তিশালী ডেভেলপার টুলস

• টাইপস্ক্রিপ্ট উন্নত বৈশিষ্ট্য প্রদান করে, যেমন অটোসম্পন্ন, রিফ্যাক্টরিং সাপোর্ট, এবং VSCode এর মতো এডিটরগুলিতে ত্রুটি পরীক্ষণ।

টাইপস্ক্রিপ্ট বড় প্রজেক্টে নির্ভরযোগ্যতা বৃদ্ধি এবং ডেভেলপারের উৎপাদনশীলতা উন্নত করার জন্য বিশেষভাবে উপকারী।

টাইপস্ক্রিপ্টে ভেরিয়েবল

এটি টাইপস্ক্রিপ্টে ভেরিয়েবলের মৌলিক ধারণা এবং ব্যবহারের ব্যাখ্যা দেয়।

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

টাইপস্ক্রিপ্টে, ভেরিয়েবল তিনটি কীওয়ার্ড ব্যবহার করে ডিক্লেয়ার করা হয়: let, const, এবং var। প্রতিটি কীওয়ার্ডের বিভিন্ন বৈশিষ্ট্য রয়েছে।

let এর উদাহরণ:

let ব্লক স্কোপ রয়েছে (শুধুমাত্র কার্লি ব্রেস {} এর মধ্যে বৈধ)। মানগুলি পরবর্তীতে পুনরায় নিয়োগ করা যেতে পারে।

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

const এর উদাহরণ:

const পুনরায় নির্ধারণ করা যায় না, তাই একবার মান নির্ধারিত হলে তা পরিবর্তন করা যাবে না। তবে, অবজেক্ট এবং অ্যারের বিষয়বস্তু পরিবর্তন করা যেতে পারে।

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

var এর উদাহরণ:

var এর ফাংশন স্কোপ আছে এবং এটি পুনরায় নিয়োগযোগ্য। তবে, ব্লক স্কোপ উপেক্ষা করে এটি let বা const এর তুলনায় অপ্রত্যাশিত আচরণ ঘটাতে পারে।

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

টাইপ অ্যানোটেশনস

টাইপস্ক্রিপ্ট-এ, আপনি ভেরিয়েবলের জন্য টাইপগুলিকে স্পষ্টভাবে অ্যানোটেট করতে পারেন। টাইপ অনুমানও সমর্থিত, তবে জটিল পরিস্থিতিতে টাইপ অ্যানোটেশনগুলি কার্যকরী।

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

অন初始化 ভেরিয়েবল

যদি কোনো ভেরিয়েবল ইনিশিয়ালাইজেশন ছাড়া ঘোষণা করা হয়, তবে ডিফল্ট-এ undefined বরাদ্দ করা হয়। let এর সাথে ঘোষিত একটি ভেরিয়েবলকে স্পষ্টভাবে undefined বরাদ্দ করতে হবে অথবা তার টাইপে undefined অন্তর্ভুক্ত করতে হবে যদি এটি ইনিশিয়ালাইজ না হয়।

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

ভেরিয়েবল স্কোপ

let এবং const এর ব্লক স্কোপ আছে, তাই সেগুলি শুধুমাত্র একই ব্লকের মধ্যে বৈধ।

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

ভেরিয়েবল হোয়িস্টিং

টাইপস্ক্রিপ্ট যেহেতু জাভাস্ক্রিপ্টের একটি সুপারসেট, এটি জাভাস্ক্রিপ্টের হোয়িস্টিং বৈশিষ্ট্য উত্তরাধিকার করে। হোয়িস্টিং বলতে সেই আচরণ বোঝায় যেখানে ভেরিয়েবল এবং ফাংশনের ঘোষণাগুলি তাদের স্কোপের শীর্ষে উত্তোলিত হিসাবে বিবেচিত হয়। তবে, শুধুমাত্র ঘোষণা হোয়িস্ট করা হয়, যখন ইনিশিয়ালাইজেশন স্থানে থাকে। var দিয়ে ঘোষণা করা ভেরিয়েবল হোয়িস্ট করা হয়, কিন্তু ঘোষণা করার আগে let বা const ব্যবহার করলে একটি ত্রুটি ঘটে।

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• এই ক্ষেত্রে, var দিয়ে ঘোষিত ভেরিয়েবল হোয়িস্ট করা হয়, এবং তাদের মান আউটপুট হয়।

1console.log(b); // ReferenceError
2let b = 20;

• let দিয়ে ঘোষিত ভেরিয়েবল হোয়িস্ট করা হয় না, যার ফলে একটি ত্রুটি ঘটে।

সারসংক্ষেপ

let, const, এবং var নিয়ে নিচে একটি সংক্ষিপ্তসার দেওয়া হলো।

• let পুনরায় নির্ধারণযোগ্য এবং ব্লক স্কোপ রয়েছে।
• const পুনরায় নির্ধারণযোগ্য নয় এবং ব্লক স্কোপ রয়েছে।
• var পুনরায় নির্ধারণযোগ্য এবং ফাংশন স্কোপ রয়েছে।
• এগুলো সকলেই ভেরিয়েবল টাইপ নির্ধারণের জন্য স্পষ্ট টাইপ অ্যানোটেশন সমর্থন করে।

টাইপস্ক্রিপ্টে এসকেপ ক্যারেক্টার

এসকেপ ক্যারেক্টার ব্যবহার করা হয় যখন নির্দিষ্ট ক্যারেক্টার সরাসরি প্রবেশ করা যায় না বা স্ট্রিং-এর মধ্যে বিশেষ অর্থবহ ক্যারেক্টার উপস্থাপন করতে হয়। টাইপস্ক্রিপ্টে, এসকেপ ক্যারেক্টার ব্যবহার করা হয় নিয়ন্ত্রণমূলক বা বিশেষ ক্যারেক্টার উপস্থাপন করতে।

উদাহরণস্বরূপ, একটি নতুন লাইন সহ বার্তা আউটপুট করতে \n ব্যবহার করুন।

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

বিশেষ ক্যারেক্টারগুলি এসকেপ করা

স্ট্রিং-এ বিশেষ ক্যারেক্টার যোগ করার সময় এসকেপ ক্যারেক্টার খুবই কার্যকর। উদাহরণস্বরূপ, আপনি একটি স্ট্রিং-এর মধ্যে সরাসরি ডবল কোট বা সিঙ্গেল কোট ব্যবহার করতে পারেন।

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

ব্যাকস্ল্যাশ নিজেকে এসকেপ করা

স্ট্রিং-এ একটি ব্যাকস্ল্যাশ যোগ করতে, আপনাকে এটি ডবল ব্যাকস্ল্যাশ হিসাবে লিখতে হবে।

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

ইউনিকোড এবং হেক্সাডেসিমাল এসকেপ

টাইপস্ক্রিপ্টে, ইউনিকোড কোড পয়েন্টগুলি এসকেপ সিকোয়েন্স ব্যবহার করে উপস্থাপন করা যেতে পারে।

ইউনিকোড এসকেপ সিকোয়েন্স

আপনি \u এর পরে চার-সংখ্যার হেক্সাডেসিমাল নম্বর নির্দিষ্ট করে ইউনিকোড ক্যারেক্টার উপস্থাপন করতে পারেন।

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

হেক্সাডেসিমাল এসকেপ

\x এর পরে দুই-সংখ্যার হেক্সাডেসিমাল নম্বর ব্যবহার করে আপনি নির্দিষ্ট ক্যারেক্টার উপস্থাপন করতে পারেন।

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

টেমপ্লেট লিটারাল এবং এসকেপ

টেমপ্লেট লিটারালগুলি ব্যাকটিক্স দিয়ে আবদ্ধ করে সংজ্ঞায়িত করা হয় এবং এমবেডেড এক্সপ্রেশন বা মাল্টি-লাইন স্ট্রিং তৈরি করার সহজ উপায় সরবরাহ করে। সাধারণ এসকেপ ক্যারেক্টার সরাসরি টেমপ্লেট লিটারাল-এ ব্যবহার করা যেতে পারে।

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

বিশেষ কেস

টাইপস্ক্রিপ্টে, একটি স্ট্রিং এর মধ্যে অবৈধ এসকেপ সিকোয়েন্স ব্যবহার করলে সিনট্যাক্স ত্রুটি হতে পারে। তাই, এসকেপ ক্যারেক্টারগুলি বৈধ কিনা তা পরীক্ষা করা গুরুত্বপূর্ণ।

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

ব্যবহারিক উদাহরণ

এখানে এসকেপ ক্যারেক্টার ব্যবহার করে একটি জটিল স্ট্রিং তৈরির উদাহরণ দেওয়া হল।

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

এই উদাহরণে, \n নতুন লাইনের জন্য এবং \t ইন্ডেন্টেশন যোগ করার জন্য ব্যবহৃত হয়েছে। এটি JSON স্ট্রাকচারটি পড়া সহজ করে তোলে।

সারসংক্ষেপ

টাইপস্ক্রিপ্টে স্ট্রিং নিয়ে কাজ করার সময় এস্কেপ ক্যারেক্টারগুলি খুবই গুরুত্বপূর্ণ। যখন আপনি একটি স্ট্রিং-এ বিশেষ ক্যারেক্টার বা নিয়ন্ত্রণ ক্যারেক্টার অন্তর্ভুক্ত করতে চান, তখন সঠিক এস্কেপ সিকোয়েন্স ব্যবহার করে আপনি প্রকাশমূলক স্ট্রিং তৈরি করতে পারেন। এস্কেপ ক্যারেক্টারগুলি সঠিকভাবে বোঝা এবং ব্যবহার করা কোডের পাঠযোগ্যতা এবং রক্ষণাবেক্ষণ ক্ষমতা উন্নত করতে পারে।

টাইপস্ক্রিপ্টের সংস্করণসমূহ

আসুন এখানে টাইপস্ক্রিপ্টের সংস্করণের একটি সারসংক্ষেপ দেখেন।

1. টাইপস্ক্রিপ্ট ১.০ (২০১৪)

   টাইপস্ক্রিপ্টের প্রথম স্থিতিশীল সংস্করণ। টাইপিং, ক্লাস এবং মডিউলের মতো প্রাথমিক বৈশিষ্ট্যগুলিকে পরিচয় করানো হয়েছিল।

2. টাইপস্ক্রিপ্ট ২.০ (২০১৬)

   Non-nullable Types, Control Flow Analysis, Read-only Properties এবং Never টাইপ পরিচয় করানো হয়েছিল, যা টাইপ অনুমান আরও উন্নত করে।

3. টাইপস্ক্রিপ্ট ৩.০ (২০১৮)

   আরও নমনীয় টাইপ সিস্টেম পরিচয় করানো হয়, যেমন Project References, Tuple Types এর সম্প্রসারণ এবং Rest Parameters এর উন্নতি।

4. টাইপস্ক্রিপ্ট ৪.০ (২০২০)

   Variadic Tuple Types, এডিটর উন্নয়ন, উন্নত টাইপ অনুমান এবং Labelled Tuple Elements এর মতো বৈশিষ্ট্যগুলি উন্নয়ন অভিজ্ঞতার উন্নতির জন্য যোগ করা হয়েছিল।

5. টাইপস্ক্রিপ্ট ৪.১ (২০২০)

   Template Literal Types পরিচিত করা হয়েছিল, যা স্ট্রিং টাইপ ম্যানিপুলেশনকে আরও শক্তিশালী করে তোলে।

6. টাইপস্ক্রিপ্ট ৪.৩ (২০২১)

   Override কীওয়ার্ড যোগ করা, কনস্ট্রাক্টরের মধ্যে অ্যাক্সেস মডিফায়ারগুলির উন্নতি, এবং WeakMap এবং WeakSet এর উন্নত টাইপ সমর্থন।

7. টাইপস্ক্রিপ্ট ৪.৫ (২০২১)

   Awaited টাইপ, ModuleSuffixes, এবং ECMAScript মডিউলগুলির সাথে উন্নত সামঞ্জস্য যোগ করা হয়েছে।

8. টাইপস্ক্রিপ্ট ৫.০ (২০২৩)

   Decorators এর মানকরণ, প্রকল্প নির্মাণের গতি উন্নতি, টাইপ সিস্টেমের উন্নতি এবং সর্বশেষ ECMAScript বৈশিষ্ট্যগুলির সমর্থন যোগ করা হয়েছে।

টাইপস্ক্রিপ্ট নিয়মিতভাবে উন্নতি লাভ করছে, প্রতি বছর একাধিক সংস্করণ প্রকাশিত হয় যা নতুন বৈশিষ্ট্য এবং উন্নতিগুলি উপস্থাপন করে।

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

YouTube Video