typescript, জাভাসচ্রিপ্টের একটা আপডেটেড ভার্শন । এটা তৈরি করেছে microsoft । it's allows static strict typing . সাথে আছে অনেক এক্সট্রা ফিচার । যেমনঃ interfaces, enums, tuples, generics . আর সাথে থাকছে modern javascript এঁর সাপোর্ট । typescript কোণ প্রোগ্রামিং ল্যাঙ্গুয়েজ নয় । এটা পেছনে javascript এ কনভার্ট করে । based on the .NET harmony specification’s.
javascript এ wrong ছিল যার কারণে typescript কে আসতে হল ?
not suitable for larger application
javascript প্রথমে এসেছিল ছোট ছোট ওয়েব অ্যাপ্লিকেশাণে interectivity যোগ করতে । পরবর্তীতে javascript এঁর প্রসার ঘটলে চিন্তা করতে হয় যে কিভাবে বড় বড় অ্যাপ্লিকেশান হ্যান্ডেল করা যায় । সেখান থেকেই typescript এঁর উৎপত্তি ।
যারা অন্য প্রোগ্রামিং ল্যাঙ্গুয়েজ থেকে আস্তও তাদের কাছে javascript এঁর syntax অনেক weired লাগত সেখান থেকেই মুক্তি দিতে typescript এসেছে
জাভাসচ্রিপ্ট এ আমরা রানটাইমে এরর আমরা পাচ্ছিলাম । typescript এ যেটা কোড করার সময় পাওয়া যায় ।
suffers type coercion
এখন আসই typescript এঁর সুবধা নিয়ে ।
typescript আসলে avascript যা নতুন করে শেখার মত কিছুই নেই । কিছু syntax জনলেই typescript সম্পর্কে ভালো ধারনা হয়ে যাবে
new features work everywhere
typescript কিভাবে ইন্সটল করব ?
node js ইন্সটল করা থাকতে হবে
install typescript compilar
npm i -g typescript
এটা ইন্সটল করার মাধ্যমে আমাদের pc তে tsc নামক একটা কমান্ড রান হয়ে গেল । যেটা ব্যাবহার করে আমরা typescript এঁর কাজ করতে পারব
ব্যাবহার বিধি ঃ
create a script.ts file
.ts file সাপোর্ট করবে না তাই একে ম্যানুয়ালি compile করতে হবে । তার জন্য এই কমান্ড প্রয়োজন পরবে ।
tsc script.tsএই কমান্ড একটা script.js ফাইল তৈরি করে দিবে । যেটা হবে আমাদের application এ ব্যাবহার যোগ্য javscript ফাইল
link this script.js file
এখানে আমরা একটা সমস্যার সমক্ষিন হচ্ছি সেটা হল ম্যানুয়ালি আমাদেরকে .ts থেকে .js এ কনভার্ট করতে হচ্ছে ।
এটা থেকে পরিত্রাণ পেতে আমরা আমরা একটা কমান্ড দিতে পারি । যা আমাদের নতুন কোড অটোমেটিকালি কম্পাইন হয়ে যাবে
tsc --init
// message: successfully create a jsconfig.json file
// এটা করার পরও কাজ হবে না । এর জন্য আর একটা কমান্ড দিতে হবে । সেটা হলঃ
tsc -w
আমরা suffers type coercion নামে একটা পয়েন্ট বলে এসেছি । এঁর ব্যাবহার এখন দেখি
const name = "rashedul"
name = 32 // eta eror দিবে কারণ এখানে string কে number এ কনভার্ট করতে পাচ্ছে না ।
const age = 32
age = 35 // it's work perfectly
// কিন্তু এই কাজটা করলে কি আসে চিন্তা করুন তো ?
let myName;
myName = "rashedul";
myName = 43;
console.log(myName)
// এটা কোণ error দেখাবে না । কারণ এখানে intially কোণ টাইপ চেকিং নেই এটা undefined অবস্থায় ছিল । পরবর্তীতে string, number, boolean হোক তাতে তার কোণ সমস্যা নেই ।
// --------------------------------------------
function sum ( a , b ) {
// 👆 👆 এই ২ যায়গায় warning দিবে কারণে এখানে type cheking নেই। একজন বাবহারকারি চাইলে যেকোনো কিছু আর্গুমেন্ট হিসেবে পাস করতে পারে । যেটা typescript করতে দিবে না
return a + b
}
console.log(sum(1,3))
// 🚦🚦🚦🚦✅ solving
function sum ( a : number , b : number ) {
👆 👆
return a + b
};
console.log(sum(1,3))
// --------------------------------------------
// array
let names = ["rashedul", "islam", "shihab"]
names.push(32) // 🚫❗️ it's shows a warning.
let names = ["rashedul", "islam", "shihab" , 18 , true]
names.push(32) // ✅✅ not showing warning
names.push({ name: "shihab" }) // 🚫❗️ it's shows a warning . যদি names array তে একটা ব্ল্যাংক অবজেক্ট {} দিতেন তাহলে এরর দিত না
// --------------------------------------------
let a : string;
let b : number;
// ----------------
a : "rashedul"
a : 10 // shows an error
// ----------------
b : 10;
b : "rashedul" // shows an error
let arr = string[] = [] // স্ট্রিং এঁর array
👆 ইনিশিয়াল ভেলু
let arr = (string | number)[] = [] // স্ট্রিং ও নাম্বার এঁর array
// --------------------------------------------
let arr2 : object;
arr2 = ["name","email"] // not showing error. because array is an object
dynamic type or any type
let a : any;
let a : any[] = []; // any type of array
function
let myfunc : Function;
myfunc = ( ) => { console.log("hello") }
// --------------------------------------------
const csFunc = (a:string, b:number, c?:boolean)=>{
// 👆 optional
console.log(`hello ${a} ${b}`)
}
// --------------------------------------------
const csFunc = (a:string, b:number, c?:boolean = true ) => {
// 👆 optional with default value
console.log(`hello ${a} ${b}`)
}
// --------------------------------------------
const csFunc = (a:string, b:number) :number => {
console.log(`hello ${a} ${b}`)
}// এই ফাংশন টা একটা number return করবে সেঁটাই বোঝানো হচ্ছে ।
type aliases
let user = {id:number|string,user:{name:string,email:string}}
let user2 = {user:{name:string,email:string}}
// এখানে দেখুন user এঁর type cheking একদম সেম কিন্তু ২ বার আলাদা করে লেখতে হয়েছে । এটার সমাধান করতে পারি এইভাবে
// --------------------------------------------
type numberOrString = number|string;
type userType = {name:string,email:string};
let user = { id: numberOrString, user: userType };
let user2 = {user: userType };
Function Signatures
let myFunc = (a:number,b:number) => number ; //Function Signatures
myFunc = (a:number,b:number) => a + b ;
classes
const player {
name:string,
age:number,
country:string,
constructor(n:string, a:number, c:string){
this.name = n;
this.age = ca;
this.country: c;
}
play(){
console.log(`${this.name} is playing `)
}
}
const rashedul = new player("rashedul",30,"BD");
const islam = new player("islam",20,"BD");
// --------------------------------------------
const players = player[] = [] // এটা প্লেয়ার ক্লাসের একটা array
players.push(rashedul);
players.push(islam)
Access Modifier
const player {
privet name:string,
public age:number,
public country:string,
readonly role: string,
constructor(n:string, a:number, c:string){
this.name = n;
this.age = ca;
this.country: c;
}
play(){
console.log(`${this.name} is playing `)
}
}
const rashedul = new player("rashedul",30,"BD","ADMIN");
const islam = new player("islam",20,"BD","STDUNT");
// এখানে rashedul.age অর্থাৎ ভেতরের প্রপার্টি বাহির থেকে অ্যাক্সেস করা যাচ্ছে । তার মানে বাহির থেকে আপডেট অ করা যাবে । কারণ ক্লাসের প্রপার্টি গুলো public হয়ে আছে । যেমনটা এই উদাহরণে দেখানো হয়েছে । যেখানে name প্রপার্টিটা privet অন্য গুলো public . name বাহির থেকে অ্যাক্সেস করা =যাবে না । আর role কে বাহির থেকে আপডেট করা যাবে না কিন্তু অ্যাক্সেস করা যাবে কারণ একটা readonly.
// যেমন ঃ
console.log(rashedul.name) // not visible
console.log(rashedul.age) // it's visible
rashedul.role="STUDENT" // not editable but visible from outside
module system
// edded something very soon
Interfaces
interface rectangleOptions {
width:number;
height:number
}
const drawRectangle = (options:rectangleOptions) {
let width = options.width;
let height = options.height;
}
drawRectangle({
width:200,
height:300
});
interface uses on class
// class এ interface ব্যাবহার
export interface Isplayer {
name:string,
age:number,
country:string,
play() : void
};
const player implements Isplayer {
constructor(
public name:string,
public age:number,
public country:string,
readonly role: string
){}
play(){
console.log(`${this.name} is playing `)
}
}
Generics
যদি কোণ কিছু টাইপ আগে থেকে জানা না থাকে তখন আমরা Generics ব্যাবহার করি ।
const objMaker = (obj:object) => {
let id = genetateId();
return {...obj,id}
};
let user = objMaker({name:"rs",age:18,country:"BD"})
console.log(user.id)
// এখন মোদী আমরা user থেকে তার property গুলো অ্যাক্সেস করতে চাই তাহলে আমরা id বাদে কোণ কিছুরই suggestions পাব না । পাইতে হলে আমাদের Generics way ৎ চিন্তা করতে হবে । যেটা করতে পারি এইভাবে
// -----------------------------------------
const objMaker = <T>(obj: T) => {
let id = genetateId();
return {...obj,id}
};
let user = objMaker({name:"rs",age:18,country:"BD"})
// এখন user object এ কি কি প্রপার্টি আছে তার সাজেশন দিবে ।কিন্তু এখানে একটা সমস্যা আছে। সব ইউজার যে শুধু object ই পাস করবে এমন না । এখানে যেকোনো type এঁর ডাটা পাস করা যাবে সেঁতা তো আমরা করতে দিতে চাচ্ছি না । তার জন্য আমরা এই কাজটা করতে পারি ।
const objMaker = <T extends object>(obj: T) => {
let id = genetateId();
return {...obj,id}
}; // এখন অবজেক্ট বাদে অন্য কোন type এঁর ডাটা পাস করা যাবে না
//------------------------------------------------------
// আবার আমরা একটাও বলে দিতে পারি যে অবজেক্ট এঁর প্রপার্টি type কি হবে
const objMaker = <T extends {name:string, age:number}>(obj: T) => {
let id = genetateId();
return {...obj,id}
};
Generics uses on interface
interface useInterface<T> {
name:string,
age:number,
country:string,
data: T
};
const res1 : useInterface<object> = {
👆 এখান থেকে যা পাঠাব তাই T হিসেবে পাবে
name:"rashedul",
age:19,
country:"BD"
data:{
role:"admin",
class:"XI",
}
};
ENUMS types
enum RolType {"ADMIN","USER","STUDENT"}
interface useInterface<T> {
name:string,
age:number,
role:RolType,
data: T
};
const res1 : useInterface<string> = {
name:"rashedul",
age:19,
role:RolType.ADMIN // admin কত নাম্বার ইনডেক্সে আছে তার ভেলু রিটার্ন করবে
data:"rashedul islam shihab"
};
tuples
let a = [3,"dfb",{t:2}]
let b : [number,string,object] = [4,"hi",{t:4}]