টাইপস্ক্রিপ্ট টিউটোরিয়াল

চলুন, টাইপস্ক্রিপ্ট দিয়ে একটি সাধারণ ওয়েব অ্যাপ্লিকেশন তৈরির কাজ শুরু করা যাক।

টাইপস্ক্রিপ্ট টুলস পাওয়ার দুটি প্রধান উপায় রয়েছে:

• NPM এর মাধ্যমে (Node.js প্যাকেজ ম্যানেজার)।
• টাইপস্ক্রিপ্টের ভিজ্যুয়াল স্টুডিও প্লাগইন ইনস্টল করে।

ভিজ্যুয়াল স্টুডিও 2017 এবং ভিজ্যুয়াল স্টুডিও 2015 আপডেট 3 এর মধ্যে টাইপস্ক্রিপ্ট ডিফল্টরূপে অন্তর্ভুক্ত রয়েছে। আপনি যদি ভিজ্যুয়াল স্টুডিওর সাথে টাইপস্ক্রিপ্ট ইনস্টল না করে থাকেন, তবে আপনি এটি এখনো ডাউনলোড করতে পারেন।

 > npm install -g typescript 

আপনার এডিটর ওপেন করে, নিম্নলিখিত জাভাস্ক্রিপ্ট কোডটি টাইপ করুন এবং greeter.ts ফাইল নামে সংরক্ষণ করুনঃ

 function greeter(person) {
return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user); 

আমরা কোড সংরক্ষণের জন্য .ts ফাইল এক্সটেনশন ব্যবহার করেছি, তবে এই কোডটি কেবল জাভাস্ক্রিপ্ট। আপনি এটি আপনার বিদ্যমান জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন থেকেও সরাসরি কপি/পেস্ট করতে পারেন।

কমান্ড লাইনে, টাইপস্ক্রিপ্ট কপম্পাইলার রান করুনঃ

 tsc greeter.ts 

ফলাফল আকারে একটি ফাইল greeter.js পাওয়া যাবে যার মধ্যে আপনি টাইপ স্ক্রিপ্ট ফাইলে যে কোড লিখেছিলেন সেই একই জাভাস্ক্রিপ্ট কোড থাকবে। যাইহোক, আমরা আমাদের জাভাস্ক্রিপ্ট অ্যাপে টাইপস্ক্রিপ্ট কোড ব্যবহার এর জন্য প্রস্তুত হতে চলেছি! এখন আমরা টাইপস্ক্রিপ্টের নতুন কয়েকটি টুলসের সুবিধা নেওয়া শুরু করতে পারি। নিচের উদাহরণের ন্যায় Greeter ফাংশনের person আর্গুমেন্টে একটি :স্ট্রিং টাইপ অ্যানোটেশন যুক্ত করুনঃ

 unction greeter(person: string) {
return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user); 

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

কমান্ড লাইনে, টাইপস্ক্রিপ্ট কপম্পাইলার রান করুনঃ

 function greeter(person: string) {
return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user); 

পুনরায় কম্পাইল করলে আপনি নিচের এরর ম্যাসেজ দেখবেনঃ

 error TS2345: Argument of type 'number[]' is not assignable to parameter of type ‘string'. 

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

লক্ষ্য করলে দেখবেন যে, আপনার কোডে ত্রুটি থাকা সত্ত্বেও greeter.js ফাইলটি তৈরি হয়েছে। তাই আপনার কোডে ত্রুটি থাকলেও আপনি টাইপস্ক্রিপ্ট ব্যবহার করতে পারেন। তবে এই ক্ষেত্রে, টাইপস্ক্রিপ্ট আপনাকে সতর্ক করে দিচ্ছে যে, আপনার কোড সম্ভবত আপনার প্রত্যাশা অনুযায়ী চলবে না।

চলুন, আমাদের নমুনা কোড আরও ডেভেলপ করা যাক। নিচের উদাহরণে আমরা একটি ইন্টারফেস ব্যবহার করবো যাতে firstName এবং lastName ফিল্ডযুক্ত অবজেক্টগুলি বর্ণনা করে। টাইপস্ক্রিপ্টে, যদি দুটি টাইপের অভ্যন্তরীণ কাঠামো(structure) সামঞ্জস্যপূর্ণ হয় তবে তাদের টাইপও সামঞ্জস্যপূর্ণ। এটি আমাদেরকে ইন্টারফেসটির প্রয়োজনীয় আকার(shape) ঠিক রেখে ইন্টারফেস বাস্তবায়ন(implement) করার অনুমতি দেয়, এতে বাহ্যিক কোন implements ক্লজ(clause) এর প্রয়োজন হয় না।

 interface Person {
firstName: string;
lastName: string;
}

function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.textContent = greeter(user);

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

এখানে আমরা একটি কন্সট্রাক্টর(constructor) এবং কয়েকটি পাবলিক ফিল্ড সহ একটি Student ক্লাস তৈরি করতে যাচ্ছি। লক্ষ্য করলে দেখবেন যে, ক্লাস এবং ইন্টারফেসকে একসাথেই রাখা হয়েছে।

আরও লক্ষণীয় যে, কন্সট্রাক্টরের আর্গুমেন্টে public এর ব্যবহার একটি শর্টহ্যান্ড যা আমাদেরকে ঐ নামে স্বয়ংক্রিয়ভাবে প্রোপার্টি তৈরির অনুমতি দেয়।

class Student {

fullName: string;

constructor(public firstName: string, public middleInitial: string, public lastName: string) {

this.fullName = firstName + " " + middleInitial + " " + lastName;

}

}

interface Person {

firstName: string;

lastName: string;

}

function greeter(person: Person) {

return "Hello, " + person.firstName + " " + person.lastName;

}

let user = new Student("Jane", "M.", "User");

document.body.textContent = greeter(user);
 

Classes in TypeScript are just a shorthand for the same prototype-based OO that is frequently used in JavaScript.

Tsc greeter.ts পুনরায় রান করুন তাহলে আপনি দেখবেন উৎপন্ন জাভাস্ক্রিপ্ট কোড আগের কোডের মতোই। টাইপস্ক্রিপ্টে ক্লাসসমূহ একই প্রোটোটাইপ-ভিত্তিক OO এর জন্য কেবলমাত্র শর্টহ্যান্ড যা জাভাস্ক্রিপ্টে প্রায়শই ব্যবহৃত হয়।

এখন greeter.html এ নিম্নলিখিত কোড লিখুনঃ

<!DOCTYPE html>

<html>

    <head><title>TypeScript Greeter</title></head>

    <body>

        <script src="greeter.js"></script>

    </body>

</html>

আপনার প্রথম সাধারণ টাইপস্ক্রিপ্ট ওয়েব অ্যাপ্লিকেশনটি চালানোর জন্য ব্রাউজারে greeter.html ফাইলটি ওপেন করুন!

টাইপস্ক্রিপ্ট দিয়ে আরও কী কী সম্ভব তা জানার জন্য আমাদের পরবর্তী টিউটোরিয়ালগুলো দেখুন।