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

This article is from udemy course Understanding TypeScript by Maximilian Schwarzmüller

Content

1. Typescript getting started
2. Typescript Basics & Basic type
3. Typescript compiler and it’s configuration
4. Next generation Javascript & Typescript
5. Classes and Interfaces
6. Advanced types
7. Generics
8. Decorators
9. Drag and Drop Project
10. Modules & Namespaces

1. Typescript getting started

Typescript হচ্ছে javascript এর সুপারসেট . Typescript কম্পাইলার typescript কোডকে কম্পাইল করে javascript কোডে রূপান্তর করে সেটাকে ব্রাউজার অথবা node এ রান করে ।

Typescript এ কাজ করার জন্য typescript এবং node install করতে হয়

sudo npm install -g typescript

npm install করার জন্য node js ইন্সটল করতে হবে তাহলে অটোমেটিক npm cli এর এক্সেস পাওয়া যাবে ।

আর node js ইন্সটল করার জন্য নিচের লিঙ্কে যেতে হবে ।

distributions/README.md at master · nodesource/distributions

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

ubuntu র জন্য এই কমান্ড ।

Typescript ফাইলে কোড লিখে এরপর টারমিনাল ওপেন করে ঐ ফাইলকে tsc কমান্ডলাইনের মাধ্যমে রান করতে হবে ।

tsc example.ts

এই কমান্ড দিয়ে রান করলে ঐ টাইপস্ক্রিপ্ট ফাইল থেকে একিনামে একটি জাভাস্ক্রিপ্ট ফাইল তৈরি হবে ।

Essential vsCode extension: TSLint

npm init দিয়ে প্রজেক্ট সেটআপ দেওয়ার পর লাইভ সার্ভারের জন্য lite-server ব্যাবহার করবো ।

npm install -D lite-server

এরপর index.html ফাইল তৈরি করে সেখানে নিচের কোড গুলো লিখবো

এরপর app.ts ফাইলের নিচের লাইন লিখবো ।

console.log('code runs from here....');

এখন tsc app.ts কমান্ড দিয়ে এই ফাইল রান করলে এটাকে কম্পাইল করে app.js নামে ফাইল প্রডিউস করবে ।

এরপর lite-server প্যাকেজ ইন্সটল করে package.json ফাইলে নিচের লাইনটি দিয়ে দিবো ।

"start": "lite-server"

এরপর npm install কমান্ড দিলে ব্রাউজারের কনসলে গেলে আউটপুট দেখা যাবে ।

2. Typescript Basics & Basic type

number, boolean, string type:

number টাইপের ক্ষেত্রে integer/double এর কোনও পার্থক্য নাই, দুইটাই float হিশেবে কাউন্ট ক্রে ।

এই কোডগুলো লিখে tsc app.ts এই কমান্ড দিয়ে কম্পাইল করে npm start লিখে ব্রাউজার ওপেন করলে কনসলে আউটপুট দেখা যাবে ।

let number1: number;

এভাবে কোনও ভেরিয়েবলে যদি number type দিয়ে দেই তাহলে ঐ ভেরিয়েবলে এই number ছাড়া অন্য কিছু এসাইন করা যাবে না ।

object type

Array type:

Tuples type:

যদি আমরা জানি যে একটি array র প্রথম ইলিমেন্ট টা এক টাইপের আর দ্বিতীয়টা আরেক টাইপের তখন tuple ব্যাবহার করা হয়, কোথায় কোন ইলিমেন্ট কোন টাইপের হয় সেটা ফিক্স করে বলে দেওয়া যায় । ।

এখানে role: [number, string] এর মানে হচ্ছে যে এই role element এর প্রথমে ইলিমেন্টটি হবে number আর দ্বিতীয় ইলিমেন্টটি হতে হবে string, অন্য কোন টাইপের ভেলু দিলে এরর দিবে ।

enum type:

এখানে role: ‘simple text’ এভাবে রোলের ভেলু কোনও লম্বা টেক্সট দেই এবং সেটা যদি আবার if স্টেটমেন্টের ভেতর চেক করতে হয় তাহলে অনেক সময় ভুল হয়ে যেতে পারে তাই এনাম এসেছে ।

এনামে স্টারটিং ভেলু ০ দিয়ে শুরু হবে পরবর্তীতে বারতে থাকবে । অর্থাৎ ADMIN এর ভেলু ০ দিয়ে শুরু হবে, এটা ডিফল্ট । ইচ্ছা করলে এটাকে আমরা ম্যানুয়ালি সেট করে দিতে পারি ADMIN=5 অথবা অন্য কোনও স্ট্রিং কেউ সেট করে দিতে পারি । এনাম আসলে কোন কিছু ম্যাপ করার জন্য, বা কম্পেয়ার করার জন্যই বেশি ব্যাবহার করা হয় ।

any type:

any type এর অর্থ হচ্ছে কোনও টাইপ নাই । অর্থাৎ typescript যে সব অফার করেছে সেগুলো ব্যাবহার করা যাবে না ।

let favourites: any[]

Union type:

union type এর মাধ্যমে একাধিক টাইপ ও ডিফাইন করে দেওয়া যায় । অর্থাৎ এই ভেরিয়েবল্টা number অথবা string টাইপের ভেলু এক্সসেপ্ট করবে ।

Literal type:

আমরা সাধারণত কোন কিছুর টাইপ string, number এভাবে লিখি অর্থাৎ শুধুমাত্র string ই নিতে পারবে অথবা নাম্বার ই নিতে পারবে, কিন্তু literal type এর ক্ষেত্রে এটাকে আরও স্পেসিফিক করে দিতে পারি যেমন কোন ভেরিয়েবল স্ট্রিং এক্সেপ্ট করলেও শুধু মাত্র as-number / as-text এ দুটোই নিতে পারবে এর বাহিরে অন্য কোনও স্ট্রিং নিতে পারবে না । নিচের এর একটি এক্সাম্পল দেওয়া আছে ।

Aliases or Custom type:

কোনও union টাইপ বার বার ব্যাবহারের প্রয়োজন পরলে তখন aliases / custom টাইপ ব্যাবহারের প্রয়োজন পরে ।

শুধুমাত্র union type এর ক্ষেত্রেই ব্যাবহার করা হয় না এছাড়াও অবজেক্ট টাইপেও ব্যাবহার করা যায় ।

type User = { name: string; age: number };
const u1: User = { name: 'Max', age: 30 }; // this works!

Function Return Types & “void” :

একটি ফাংশন কি টাইপের ভেলু রিটার্ন করবে সেটা বলে দিতে হয় । return type void এর মানে হচ্ছে কোন কিছুই রিটার্ন করবে না । undefined এর মানে হচ্ছে এই ফাংশনের রিটার্ন টাইপ থাকবে কিন্তু কিছু রিটার্ন করবে না return; এরকম ।

Function type :

কোনও ভেরিয়েবলে পূর্বে ডিক্লেয়ার করা ফাংশন এর রেফারেন্স এসাইন করার সময় ফাংশন টাইপ বলে দেওয়া যায় ।

এখানে

let combineValuesFunction: (a: number, b: number) => number;

উপরের এই লাইন্টার মানে হচ্ছে এই ভেরিয়েবল্টা শুধুমাত্র ফাংশন নিবে এবং সেই ফাংশনের আর্গুমেন্ট হিশেবে ২ টা প্যারামিটার থাকবে, দুইটাই নাম্বার এবং এটার রিটার্ন টাইপ হবে নাম্বার ।

Function Callback :

callback ফাংসনটি কি টাইপের হবে সেটা এখানে বলে দেওয়া হয় ।

Unkonwn type:

unknown টাইপ এবং any টাইপের এর মধ্যে কিছু পার্থক্য আছে ।

উপরের এক্সাম্পলে প্রথমে userName = userInput দিলে এরর দেখাবে কারণ userInput হচ্ছে unknown আর userName হচ্ছে string. সেজন্য পরবর্তীতে আবার টাইপ চেকিং করেছি ।

Never type :

never মানে হচ্ছে এই ফাংশনটা কোন কিছুই রিটার্ন করে না । যেমন কোন ফাংশনে এরর হলে অথবা ঐ ফাংশনটি ইনফিনিট লুপের মধ্যে পরলে ।

3. Typescript compiler and it’s configuration

watch mode :

সাধারণত কোন ফাইলে চেঞ্জ করলে প্রতিবার ই ঐ ফাইলটি কম্পাইল করতে হয় tsc file.ts এই কমান্ড দিয়ে ।

কিন্তু যদি আমরা ঐ ফাইলটাকে watch মুডে রান করি তাহলে যখনি ঐ ফাইলে কোনও কিছু পরিবর্তন হবে তখনি সেই ফাইলটি কম্পাইল হয়ে যাবে । এজন্য নিচের কমান্ডটি ব্যাবহার করতে হয় ।

tsc file.ts --watch
or
tsc file.ts -w

Compiling entire project:

উপরে আমরা দেখিয়েছি যে কিভাবে শুধু একটা ফাইল watch মুডে রাখা যায় কিন্তু আমরা যদি চাই যে পুরো প্রজেক্টটিই watch মুডে রাখতে তাহলে আমাদের প্রথমে Typescript এর কনফিগ ফাইলকে জেনারেট করতে হবে ।

tsc --init

এই কমান্ড দিলে tsconfig.json ফাইল তৈরি হবে এখানে সকল ধরনের কনফিগ আছে।

এরপর নিচের কমান্ডটি দিলেই এই ডিরেক্টরির সকল ফাইল কম্পাইল হয়ে যাবে ।

tsc

include & exclude :

যদি আমরা চাইযে কোন স্পেসিফিক ফাইল কম্পাইল হবে না তাহলে exclude ব্যাবহার করা হয় আবার কোন কোন ফাইল অটো কম্পাইল হবে সেটার জন্য include ব্যাবহার করতে হয় ।

node_module ডিফল্ট থাকে কিন্তু যদি আমরা exclude ফিল্ডটি লিখি তখন node_module দিয়ে দিতে হয়, নাহয় node_module এর সকল Typescript ফাইলকে মনিটরিং করে ।

Target :

"target": "es5",

tsconfig.json ফাইলে এই লাইন্টি দিয়ে দেওয়ার অর্থ হচ্ছে যে সকল ts ফাইল es5 এ কনভার্ট হয়ে রান হবে ।

এছাড়াও বিভিন্ন ধরনের কনফিগারেশন আছে, যেটা প্রয়োজন সেটাতেই কম্পাইল করা যাবে ।

libs :

যেকোনো টারগেট কম্পাইলারে কম্পাইল করার সময় অনেক সময় কিছু কিছু লাইব্রেরি ডিফল্ট থাকে না, তাই এটাকে ম্যানুয়ালি ইম্পরট করে নিতে হয় এজন্য এই অপশন ব্যাবহার করতে হয় ।

More configuration & compilation :

"allowJs": true,

এটা সাধারণত কমেন্ট আউট করা থাকে , এটার ভেলু true দেওয়ার অর্থ হচ্ছে typescript file এর এক্সটেনশন .ts না দেওয়া থাকলেও এটাকে কম্পাইল করে ।

"checkJs": true,

checkJs এর ভেলু true দেওয়া থাকলে এটার অর্থ হচ্ছে যে এই প্রজেক্টে কোনও এরর থাকলে সেটাকে চেক করে ।

"sourceMap": true,

sourceMap এর ভেলু true দেওয়ার অর্থ হচ্ছে source file এ .ts ফাইল জেনারেট করা । সাধারণত সোর্স ফাইলে অর্থাৎ browser এর inspect এ source ট্যাবে গেলে শুধু কম্পাইল্ড js ফাইল দেখা যাবে ।

যখন আমরা source ফাইলে ডিবাগিং করতে যাবো তখন এই কম্পাইল্ড js ফাইলে ডিবাগিং করা যাবে না কারণ typescript ফাইল্টি যদি অনেক কমপ্লেক্স হয় তখন কম্পাইল্ড js ফাইল দেখে কিছু বোঝা যাবে না তাই এর ভেলু true দিলে .ts ফাইল জেনারেট হয় ।

rootDir and outDir :

"outDir": "./dist",

outDir এর ভেলু এখানে ./dist দিয়েছি, এর মানে হচ্ছে আউটপুট / কম্পাইল্ড js ফাইল সব এই ডিরেক্টরিতে থাকবে অটোম্যাটিকভাবে ।

"rootDir": "./src",

rootDir এর ভেলু ./src এর অর্থ হচ্ছে যে সোর্স ফাইল অর্থাৎ .ts ফাইলগুলো সব এই ডিরেক্টরির আন্ডারে থাকবে ।

./src ডিরেক্টরির বাহিরের ফাইল গুলো সে ট্রাক রাখতে পারে না ।

"removeComments": true,

এটার মানে হচ্ছে যে typescript ফাইলে কোন কমেন্ট থাকলে কম্পাইল্ড javascript ফাইলে কোনও কমেন্ট থাকবে না, সেগুলোকে রিমুভ ক্রে দিবে ।

"noEmit": true,

এটার মানে হচ্ছে যে ts ফাইলে কোনও এরর থাকলে সেটার আউটপুট বের করবে না ।

"downlevelIteration": true,

এটার মানে হচ্ছে যে কোন লুপ চালালে যদি সেটার আউটপুট এ কোনও সমস্যা দেখা দেয় তখন এই অপশন চালু করতে হয় ।

"noEmitOnError": true,

এর মানে হচ্ছে যে কোন typescript ফাইলে সমস্যা থাকলে কোনও javascript ফাইল জেনারেট হবে না ।

strict type checking :

ডিফল্ট অবস্থায় “strict”: true থাকে আর এর নিচের সব গুলোই true থাকে কিন্তু আমরা চাইলে strict এর ভেলু false করে দিতে পারি, আর বাকিগুলো false/true স্পেসিফিক ভাবে বলে দিতে পারি ।

"noImplicitAny": true,

এর মানে হচ্ছে যে কোন ফাংশনের প্যারামিটার এ টাইপ বলে দিতে হবে নাহয় এরর ধরবে ।

Code quality :

"noUnusedLocals": true,
"noUnusedParameters": true,

কোন ভেরিয়েবল অথবা প্যারামিটার ব্যাবহার না করা হলে ওয়ার্নিং দিবে ।

"noImplicitReturns": true,

এটার মানে হচ্ছে যে কোন ফাংশনে যদি কোন কিছু চেক করার পর রিটার্ন করি তখন অনেক সময় ঐ রিটার্ন স্টেটমেন্টে প্রোগ্রাম নাও পৌছাতে পারে সেজন্য এক্সট্রা করে if চেকের পর এই return; দিতে হবে ।

4. Next generation Javascript & Typescript

let আর const হচ্ছে ব্লক লেভেল । var হচ্ছে গ্লোবাল ।

Arrow function :

Function Default value :

function এর ডিফল্ট ভেলু প্যারামিটার সব সময় শেষে দিতে হয়, নাহয় এরর দেখাবে ।

Spread operator :

Rest parameter:

অনেক সময় আনলিমিটেড আর্গুমেন্ট পাঠানোর প্রয়োজন পরে তখন এই rest parameter ব্যাবহার করা হয় , ঐ আনলিমিটেড আর্গুমেন্ট কে সে একটি এরের মধ্যে নেয় ।

const add = (...numbers: number[number, number, number]) => {

এই লাইনটার মানে হচ্ছে এখানে ৩ টাই আর্গুমেন্ট পাঠাতে পারবে ।

Array and Object Destructuring :

array র ক্ষেত্রে সিরিয়াল অনুযায়ী ডিস্ট্রাকচার হয়, এসময় যেকোনো নামে ডিস্ট্রাকচার করা যায় কিন্তু অবজেক্টের ক্ষেত্রে যে নামে key আছে ঐ নামেই ডিস্ট্রাকচার করতে হয়, তবে অবজেক্টের ক্ষেত্রে এটা কোনও সিরিয়াল মেইন্টেইন করে না, তবে ঐ এলিমেন্টের নাম থাকতেই হবে, আর নাহয় এরর দিবে ।

const { firstName: userName, age } = person;

এখানে userName হচ্ছে aliases

5. Classes and Interfaces

class: class হচ্ছে অবজেক্টের জন্য একটি ব্লুপ্রিন্ট, একটি অবজেক্ট কেমন হবে সেটাতে কি কি মেথড, প্রপার্টি থাকবে সেগুলো এখানে ডিফাইন করে দিতে হয় ।

object: অবজেক্ট হচ্ছে ঐ ক্লাসের একটি ইন্সটেন্স ।

এখন প্রজেক্ট সেটআপ করে index.html ফাইল এড করে নিবো এরপর dist/app ফাইল ইন্টিগ্রেট করে দিবো index.html ফাইলের header সেকশনে ।

<script src="dest/app.js" defer></script>

npm init দিয়ে প্রজেক্ট সেটআপ করে tsc --init দিয়ে typescript কনফিগ ফাইল জেনারেট ক্রে নিবো । এরপর tsconfig.json ফাইলে নিচের কনফিগ গুলো সেটআপ ক্রে নিবো ।

"rootDir": "./src"
"outDir": "./dest"
"target": "ES6"

এখন live-server এবং typescript প্যাকেজ দুটো ইন্সটল করে নিয়ে package.json ফাইলে নিচের স্ক্রিপ্টটি এড করে দিবো ।

"start": "lite-server"

এখন টারমিনাল ওপেন করে tsc -w কমান্ড দিয়ে পুরো প্রজেক্টের ts ফাইলকে watch মোডে রাখবো, টারমিনালে আরেকটি ট্যাব ওপেন করে সেখানে নিচের কমান্ডটি চালিয়ে প্রজেক্ট রান করবো ।

npm start

এখানে নিচের এই লাইনটাতে name proparty না দিলে এরর দিবে কারণ সেটা তখন this keyword দিয়ে Department ক্লাসটাকে বোঝাবে না ।

“private” and “public” Access Modifiers :

by default যেকোনো মেথড অথবা ভেরিয়েবল public থাকে, অর্থাৎ যে কোন ক্লাসের ভেতরে বাহিরে সেটাকে মডিফাই করা যায় ।

এখানে employee variable ডিক্লেয়ার করেছি পরে সেটাকে Department ক্লাসের বাহিরে মডিফাই করেছি, অর্থাৎ সেটাতে ভেলু অ্যাড করেছি । কিন্তু আমরা যদি চাইযে ঐ ক্লাসের বাহিরে employee ভেরিয়েবলকে মডিফাই করা যাবে না সেজন্য private access modifier ব্যাবহার করতে হয় ।

private employees: string[] = [];

এটা শুধুমাত্র Typescript এর ব্যাবহার করা যাবে কিন্তু Javascript এ ব্যাবহার করা যাবে না। কারণ এই মডিফায়ার গুলো javascript এ এখনো introduce হয় নাই ।

Shorthand Initialization :

variable এবং প্যারামিটারের সংখ্যা বারতে থাকলে এবং এটাকে ইনিসিয়ালাইজেসনের প্রয়োজন হলে বার বার অপ্রয়োজনীয় রিপিটেসন করতে হয় এটার জন্যই shorthand syntax ব্যাবহার করা হয় ।

constructor(private id: string, public name: string) {}

“readonly” properties :

যদি আমরা কোন প্রপার্টির ভেলু কখনই পরিবর্তন করতে না চাই তখন এই readonly keyword ব্যাবহার করতে হয়। শুধুমাত্র একবার ই ইনিসিয়ালাইজেসন হবে ।

Inheritance :