Module‌‌‌‌ ‌‌‌৪১ ‌‌‌‌এ‌‌‌‌ ‌‌‌‌আমরা‌‌‌‌ ‌‌‌‌যাকিছু‌‌‌‌ ‌‌‌‌শিখেছি‌‌‌‌ ‌

Getting started with typeScript

Npm = node package manager
What is typeScript? And how can you install it?
typeScript Command এর সাহায্যে তোমার প্রোজেক্ট ফোল্ডারে ইন্সটল কর ।

এখন তোমার typeScript রান করার পালা । স্বাধারণ Js মত তুমি first.ts কে লিঙ্ক করে খুশিতে html ফাইল টা লাইভ করে দেখলে Refused to execute script first.ts । তখন তোমার মনে আসবে এ বেটা কি কয় । ঠিকই বলছে ব্রাউজার । ব্রাউজার HTML, CSS, JS অর্থাৎ প্রোগ্রামিং ল্যাঙ্গুয়েজ ছাড়া আর কিছু execute করতে পারে না । এখন typeScript (.ts) ফাইল রান করার উপায় কি ? typeScript টাকে colpiled করে JS এ কনভার্ট করতে হবে ।
tsc = type script compiler
বলছিলাম typeScript ব্রাউজারে কাজ করবে না । কাজ করার জন্য .ts ফাইলকে JS এ কনভার্ট করতে হবে । তবে সেটা কিভাবে ? npx tsc এই command এর মাধ্যমে । এই command তা দিলে তুমি কিছু error খেয়ে যাবে । এরকম যে .ts ফাইলটা Js এ কনভার্ট করতে পাচ্ছে না । তাই npx tsc এর সাথে ফাইল নামটাও দিতে হবে । যেমন ঃ npx tsc first.ts (এটা করলেই typeScript ফাইলটা JS এ কনভার্ট হয়ে যাবে )
তবে অনেক .ts ফাইল থাকলে একটা একটা করে npx tsc first.ts এমন করে কনভার্ট করারটা একটু deficult . তাই তোমাকে typeScript আরও একটা সুবিধা দিবে সব ফাইল একসাথে কনভার্ট করার জন্য ।

১. tsc -- init এটা দিলেও তুমি কিছু error খেয়ে যাবা । এর কারণ হচ্ছে তুমি গ্লোবালি ইন্সটল করনি । গ্লোবালি ইন্সটল করলে তুমি এর error খাবে না

২. Error খেয়ে গেলে করনীয় কি ? npx tsc --init ( এই command টা দেওয়ার সাথে সাথেই তুমি একটা tsConfig.json ফাইল পেয়ে যাবে )

যদি তুমি .ts ফাইলে চেঞ্জ কর । তাহলে কিন্তু আবার তোমাকে .ts ফাইলটাকে compiled করে Js এ কনভার্ট করতে হবে । আগের same command npx tsc fileName.ts তাহলেই Js ফাইলের মাধ্যমে তুমি পরবর্তীতে যে পরিবর্তন করেছ সেটা দেখতে পারবে ।
ওকে । তোমার ,মনে আছে ? কিছুক্ষণ আগে একটা tsConfig.json নামে একটা ফাইল তৈরি হয়েছিলো ? সেটাতে দেখবে “targer” = “es5” দেওয়া আছে । তার মানে সে ES5 কে সাপোর্ট করবে । সেটা পরিবর্তন করে তুমি “targer” = “es6” করে দিবে ।
তুমি আর একটা tsConfig.json এ common পরিবর্তন করতে পার সেটা হচ্ছে । ওই যে তুমি কোমান্ডের মাধ্যমে .ts ফাইল থেকে .js এ কনভার্ট করে দিচ্ছিলে না ? সেই .js ফাইলটা কোথায় তৈরি হত ? গ্লবালি অর্থাৎ কোণ ফোল্ডারে ভেতরে না । যেমন আমরা CSS এর জন্য ফোল্ডার করি সেখানে CSS ফাইলটা রাখি । তেমনি .ts থেকে কনভার্ট করা .js ফাইল command এর মাধ্যমে একটা ফোল্ডারের ভেতরে রাখতে চাইলে নিচের ছবিটা লক্ষ কর ।

এটা comment-out অবস্থায় থাকে । সেটা তুলে দিয়ে ./folderName দিবে
তারপর npx tsc কোমান্ডটা দিলেই একটা ফোল্ডার তৈরি হবে এবং সেখানে । .ts থেকে কনভার্ট হওয়া fileName.js টা থাকবে ।
মনে রাখবা .ts ফাইলে চেঞ্জ করলে npx tsc command টা দিলেই ফাইল এর কোড JS ফাইলে কনভার্ট হয়ে আউটপুট দিবে

এতক্ষণ আমরা typeScript নিয়ে কাজ করলাম কিন্তু typeScript আসলেই কি তাতো জানা হল না । সেটা জানার জন্য তুমি typeScript এর ওয়েবসাইটে চলে যাবা । তার পর তুমি DOCS থেকে the Basic টা পড়ে নিবা । বোঝ বা না বোঝ । শুধু পড় । তাইলেই হবে
JS ফাইল VS .ts ফাইল

Js file এ যা করতে পারবে ।

let money = 500;

money = "taka poi hater moyla ";

money = false;

তুমি Js এ চাইলেই কোণ variable এর চেঞ্জ করতে পার । সেটা হতে পারে স্ট্রিং থেকে নাম্বার বা বুলিয়ান । তোমাকে JS কোণ error দিবে না ।

Ts file এ যা করতে পারবে আর যা পারবে না ।

let money = 500;

money = "taka poi hater moyla ";

money = false;

তুমি চাইলেই typeSctipr এ কোণ veriable এর মান নাম্বার থেকে স্ট্রিং , বা স্ট্রিং থেকে নাম্বার , বা নাম্বার থেকে বুলিয়ান । কোণকিছুই করতে পারবে না । শুধু করতে পারবে সেটা হলো

variable number হলে নাম্বার আপডেট করতে পারবে ।
variable স্ট্রিং এর হলে স্ট্রিং আপডেট করতে পারবে ।
variable boolean হলে boolean আপডেট করতে পারবে ।

অর্থাৎ veriable যে টাইপের সেটাই আপডেট বা চেঞ্জ করতে পারবে

আমার তুমি যদি এমন কর তাইলে কি হতে পারে ?

let a: number = 50;

let b: string = "rashedul";

let c: boolean = true;

এখানে তুমি যদি শুধু let c:boolean = “true” boolean টা স্ট্রিং আকারে দাও তাহলেও কিন্তু typeScript mind খেয়ে যাবে । এর কারণ হচ্ছে typeScript টাইপ নিয়ে খুব strate forword .

শুধুযে variable এর ক্ষেত্রেই typeScript strate forword . কাজ করে তেমন না function এর ক্ষেত্রেও করে

function add(a: number, b: number) {

const result = a + b;

return result; }

add(10); // 2 টা argument চাইলে ১ টা দাও কেন ? mind খেয়ে যাবে
add(10, 20); //কিছু বলবে না ।
add(10, 20, 30); // ৩ টা দিলে নিবে না কারণ ২ টা argument দিছ ৩ টা পাস কর কেন । mind খেয়ে যাবে
add("rashedul", "islam"); // mind খেয়ে যাবে । বলে দিলা নাম্বার দিবা স্ট্রিং দাও কেন ?
const output: string = add(1, 2); // এখানে ধরা খাওয়ায়ে দিবে । কারণ যে ফাংশনের parameter ২ টাই নাম্বার । সেখানে আউটপুট স্ট্রিং কিভাবে হতে পারে । mind খেয়ে যাবে

তুমি চাইলে ফাংশনটা কি type এর রেজাল্ট return করবে সেটাও বলে দিতে পার

function sum(a: number, b: number): number {}

আবার তুমি চাইলেই ফাংশনের parameter/ arguments হিসেবে multiple ইনপুট নিতে পার ।

function adder(a : number | string, b : number | string): number | string {}

কিছু return না করতে চাইলে ফাংশনের টাইপ void করে দিবে

function dubbleIt(a: number) : void {console.log(a * 2) }

এবার আমরা typeScript এর array সম্পর্কে আলোচনা করি ।

const salary: number = 50000;

const friendsSalary: number[] = [1, 2, 54, 1514, 5];

const name: string[] = ["rashedul", "islam", "shihab"];

friendsSalary[0] = 1000;

friendsSalary[3] = "20000"; // error খেয়ে যাবে । number দাও বেটা । কাজ করে দিব ।

friendsSalary.push(6000000);

friendsSalary.push("500000")// আবে সালা স্ট্রিং দাও ক্যা । নাম্বার দাও ।

তোমার প্রশ্ন আস্তে পারে Arrow function এ কিভাবে typeScript কাজ করে ?

const add = (a: number, b: number): number => {a + b;};

const add1 = (a: number, b: number): string => {a + b;};

const add2 = (a: number, b: number): void => {};

আবার যদি তুমি স্ট্রিং এর উপরে ফর লুপ চালাও তাইলেও কিন্তু typeScript mind করে ফেলবে

এবার আমরা typeScript এর Object সম্পর্কে আলোচনা করি ।

Object diclear করার নিয়ম

const student: { name: string; age: number } = {

age: 17,

};

এভাবেও তুমি করতে পার কিন্তু ভেবে দেখো এমন যদি অনেক Object তৈরি করতে হয় তাহলে । কি বার বার এরকম করে করবেন । অবশ্যয় না ।
তার জন্য তুমি একটা common type লিখে নিতে পার ।

type Person = {

age: number;

salary: number;

};

const employee: Person = {

age: 34,

salary: 150000,

};

এখন তুমি common type টা ব্যাবহার করে । যত খুশি ততগুলা Object create করতে পার ।

type এর একটা খালাত ভাই আছে যার নাম interface. এটা ঠিক type এর মতই কাজ করে তবে কিছু ভিন্নতা আছে ।

interface Player {

club: string;

salary: number;

wife?: string;

}

const messy: Player = {

club: "abohani",

salary: 15000,

wife: "kopila begun",

};

const hannan: Player = {

club: "barir math",

salary: 5000,

//এখানে কিন্তু wife এর নাম দেওয়া হয়নি । কারণ Player interface এ আমরা একটা question mark দিয়ে তাকে optional করে দিয়েছি

};

আরো কিছু উদাহরণ দেখে ফেলি

interface details {

salary: number;

}

interface dev extends details {

language: string;

codeEditor: string;

}

const rashedul: dev = {

salary: 15000,

language: "JS",

codeEditor: "VS code",

};

এখানে interface dev এ interface details কে extand করার কারণে rashedul নামে variable এ interface dev ও interface details এর কোণ একটা প্রপার্টি বাদ দিয়ে ফেললে সেখানে error দেখাবে ।

তুমি ES6 এ কিভাবে ক্লাস ডিক্লার করতা ? মনে আছে ? ঠিক তেমন করেই typeScript এও তুমি ক্লাস ডিক্লার করতে পারবে ।

class Car {

model: string;

price: number;

private _millage: number;

constructor(model: string, price: number) {

this.model = model;

this.price = price;

this._millage = 1000;

}

includeVat(tax: number): number {

const taxAmount = (this.price * tax) / 100;

const total = this.price + taxAmount;

return total;

}

getMillage(): number {

const realMillage = this._millage + 500;

return realMillage;

}

const toyata = new Car("toyota", 100000);

const totalPrice = toyata.includeVat(25);

তুমি ES6 এ লাল কালার লেখা গুলা না লিখলেও হয়ত । মানে assignm করে না দিলেও কাজ হয়ে যেত। কিন্তু তুমি যদি typeScript এ না assign করে দাও তাহলে তোমাকে লাল বাত্তি জালায়ে দিবে ।

তুমি চাইলেও প্রাইভেট veriable ও typeScript এ assign করে দিতে পার । blue কালার লাইন গুলো খেয়াল কর । তবে মনে রাখবে privet veriable কিন্তু তুমি use করতে পারবে না । এটা প্রাইভেটই থেকে যাবে । ব্যাবহারযোগ্য নয় ।

All module link

আর আমার github এ যাইতে চাইলে এই লিঙ্কে ক্লিক করুন

About

Md: Rashedul Islam Shihab

Writer of this note

Batch4

Social accounts

Module‌‌‌‌ ‌‌‌৪১ ‌‌‌‌এ‌‌‌‌ ‌‌‌‌আমরা‌‌‌‌ ‌‌‌‌যাকিছু‌‌‌‌ ‌‌‌‌শিখেছি‌‌‌‌ ‌

Post a Comment

Contact Form