├── .gitignore ├── Abstract Class └── index.ts ├── Any └── index.ts ├── Built-in Data Types └── index.ts ├── Class Typescript └── index.ts ├── Custom Data Type └── index.ts ├── Diagram images ├── enum systax.png ├── how works.png └── set value enum variable.png ├── Encapsulation └── index.ts ├── Enum Data Type └── index.ts ├── First Program └── index.ts ├── Function Signature └── index.ts ├── Generic └── index.ts ├── Inheritance └── index.ts ├── Interface └── index.ts ├── Object Data Type └── index.ts ├── README.md ├── Tuple Data Type └── index.ts ├── User Define Data Types ├── array-type.ts └── index.ts ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Abstract Class/index.ts: -------------------------------------------------------------------------------- 1 | abstract class Person { 2 | name: string; 3 | age: number; 4 | gender: string; 5 | constructor(name: string, age: number, gender: string) { 6 | this.name = name; 7 | this.age = age; 8 | this.gender = gender; 9 | } 10 | 11 | abstract show(): void; 12 | } 13 | -------------------------------------------------------------------------------- /Any/index.ts: -------------------------------------------------------------------------------- 1 | // any type 2 | let typeOfAny: any; 3 | typeOfAny = 10; 4 | typeOfAny = "string"; 5 | typeOfAny = true; 6 | typeOfAny = {}; 7 | typeOfAny = []; 8 | typeOfAny = function () {}; 9 | typeOfAny = null; 10 | typeOfAny = undefined; 11 | -------------------------------------------------------------------------------- /Built-in Data Types/index.ts: -------------------------------------------------------------------------------- 1 | let thatName = "Rahi Ahmed"; // String 2 | let thatNumber = 555; // Number 3 | let isMale = true; // Boolean 4 | let hasMoney = null; // Null 5 | let houseAddress = undefined; // Undefined 6 | 7 | console.log(thatName); 8 | console.log(thatNumber); 9 | console.log(isMale); 10 | console.log(hasMoney); 11 | console.log(houseAddress); 12 | -------------------------------------------------------------------------------- /Class Typescript/index.ts: -------------------------------------------------------------------------------- 1 | class User { 2 | name: string; 3 | age: number; 4 | constructor(name: string, age: number) { 5 | this.name = name; 6 | this.age = age; 7 | } 8 | 9 | Show() { 10 | console.log(`username: ${this.name}, age: ${this.age}`); 11 | } 12 | } 13 | 14 | let user = new User("John", 20); 15 | user.Show(); 16 | 17 | let user2 = new User("Jane", 30); 18 | user2.Show(); 19 | -------------------------------------------------------------------------------- /Custom Data Type/index.ts: -------------------------------------------------------------------------------- 1 | // creating a custom data type 2 | type myCustomDataType = { 3 | name: string; 4 | age: number; 5 | isMarried: boolean; 6 | kids: string[]; 7 | job: { 8 | title: string; 9 | salary: number; 10 | }; 11 | }; 12 | 13 | let allUsers: myCustomDataType[]; 14 | allUsers = []; 15 | 16 | // creating a new user 17 | let newUser: myCustomDataType; 18 | 19 | newUser = { 20 | name: "John", 21 | age: 25, 22 | isMarried: false, 23 | kids: ["Jane", "Jack"], 24 | job: { 25 | title: "Software Engineer", 26 | salary: 100000, 27 | }, 28 | }; 29 | 30 | // adding a new user to the array 31 | allUsers.push(newUser); 32 | 33 | // we can make custom data type for functions as well 34 | type myCustomFunctionType = (a: number, b: number) => number; 35 | 36 | let myCustomFunction: myCustomFunctionType; 37 | 38 | myCustomFunction = (a, b) => { 39 | return a + b; 40 | }; 41 | 42 | // and we can make custom data type for a class as well 43 | type myCustomClassType = { 44 | name: string; 45 | age: number; 46 | isMarried: boolean; 47 | kids: string[]; 48 | job: { 49 | title: string; 50 | salary: number; 51 | }; 52 | sayHi: () => void; 53 | }; 54 | 55 | class myCustomClass implements myCustomClassType { 56 | name: string; 57 | age: number; 58 | isMarried: boolean; 59 | kids: string[]; 60 | job: { 61 | title: string; 62 | salary: number; 63 | }; 64 | 65 | constructor( 66 | name: string, 67 | age: number, 68 | isMarried: boolean, 69 | kids: string[], 70 | job: { 71 | title: string; 72 | salary: number; 73 | } 74 | ) { 75 | this.name = name; 76 | this.age = age; 77 | this.isMarried = isMarried; 78 | this.kids = kids; 79 | this.job = job; 80 | } 81 | 82 | sayHi() { 83 | console.log(`Hi, my name is ${this.name}`); 84 | } 85 | } 86 | 87 | let myCustomClassInstance: myCustomClassType; 88 | 89 | myCustomClassInstance = new myCustomClass("John", 25, false, ["Jane", "Jack"], { 90 | title: "Software Engineer", 91 | salary: 100000, 92 | }); 93 | 94 | myCustomClassInstance.sayHi(); // Hi, my name is John 95 | 96 | // and oviously we can make custom data type for a variable as well 97 | type myCustomVariableType = string | number | boolean; 98 | 99 | let myCustomVariable: myCustomVariableType; 100 | 101 | myCustomVariable = "John"; 102 | myCustomVariable = 25; 103 | myCustomVariable = false; 104 | -------------------------------------------------------------------------------- /Diagram images/enum systax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asfak00/typescript-learning/b78434c9641b923edf7fa779212bf89dc7a10ea2/Diagram images/enum systax.png -------------------------------------------------------------------------------- /Diagram images/how works.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asfak00/typescript-learning/b78434c9641b923edf7fa779212bf89dc7a10ea2/Diagram images/how works.png -------------------------------------------------------------------------------- /Diagram images/set value enum variable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asfak00/typescript-learning/b78434c9641b923edf7fa779212bf89dc7a10ea2/Diagram images/set value enum variable.png -------------------------------------------------------------------------------- /Encapsulation/index.ts: -------------------------------------------------------------------------------- 1 | // public access control 2 | class User { 3 | public name: string; 4 | public age: number; 5 | constructor(name: string, age: number) { 6 | this.name = name; 7 | this.age = age; 8 | } 9 | 10 | Show() { 11 | console.log(`username: ${this.name}, age: ${this.age}`); 12 | } 13 | } 14 | 15 | // private access control 16 | class User2 { 17 | private name: string; 18 | private age: number; 19 | 20 | constructor(name: string, age: number) { 21 | this.name = name; 22 | this.age = age; 23 | } 24 | 25 | Show() { 26 | console.log(`username: ${this.name}, age: ${this.age}`); 27 | } 28 | 29 | GetAge() { 30 | return this.age; 31 | } 32 | 33 | SetAge(age: number) { 34 | this.age = age; 35 | } 36 | 37 | GetName() { 38 | return this.name; 39 | } 40 | 41 | SetName(name: string) { 42 | this.name = name; 43 | } 44 | } 45 | 46 | // protected access control 47 | 48 | class User3 { 49 | protected name: string; 50 | protected age: number; 51 | 52 | constructor(name: string, age: number) { 53 | this.name = name; 54 | this.age = age; 55 | } 56 | 57 | Show() { 58 | console.log(`username: ${this.name}, age: ${this.age}`); 59 | } 60 | } 61 | 62 | class Employee extends User3 { 63 | private salary: number; 64 | 65 | constructor(name: string, age: number, salary: number) { 66 | super(name, age); 67 | this.salary = salary; 68 | } 69 | 70 | Show() { 71 | console.log( 72 | `username: ${this.name}, age: ${this.age}, salary: ${this.salary}` 73 | ); 74 | } 75 | } 76 | 77 | // readonly access control 78 | class User4 { 79 | readonly name: string; 80 | readonly age: number; 81 | 82 | constructor(name: string, age: number) { 83 | this.name = name; 84 | this.age = age; 85 | } 86 | 87 | Show() { 88 | console.log(`username: ${this.name}, age: ${this.age}`); 89 | } 90 | } 91 | 92 | // static access control 93 | class User5 { 94 | static username: string; 95 | static age: number; 96 | 97 | static Show() { 98 | console.log(`username: ${this.username}, age: ${this.age}`); 99 | } 100 | } 101 | 102 | // abstract access control 103 | abstract class User6 { 104 | abstract name: string; 105 | abstract age: number; 106 | 107 | abstract Show(): void; 108 | } 109 | 110 | class Employee2 extends User6 { 111 | name: string; 112 | age: number; 113 | salary: number; 114 | 115 | constructor(name: string, age: number, salary: number) { 116 | super(); 117 | this.name = name; 118 | this.age = age; 119 | this.salary = salary; 120 | } 121 | 122 | Show() { 123 | console.log( 124 | `username: ${this.name}, age: ${this.age}, salary: ${this.salary}` 125 | ); 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /Enum Data Type/index.ts: -------------------------------------------------------------------------------- 1 | // Enum Data Type - it's not take any duplicate value 2 | 3 | // numeric enum 4 | enum Direction { 5 | Up = 1, 6 | Down, 7 | Left, 8 | Right, 9 | } 10 | 11 | // string enum 12 | enum DirectionString { 13 | Up = "UP", 14 | Down = "DOWN", 15 | Left = "LEFT", 16 | Right = "RIGHT", 17 | } 18 | 19 | // Heterogeneous enum 20 | enum BooleanLikeHeterogeneousEnum { 21 | No = 0, 22 | Yes = "YES", 23 | } 24 | 25 | // Computed and constant members 26 | enum E { 27 | X, 28 | } 29 | 30 | enum E1 { 31 | X, 32 | Y, 33 | Z, 34 | } 35 | 36 | enum E2 { 37 | A = 1, 38 | B, 39 | C, 40 | } 41 | 42 | enum FileAccess { 43 | // constant members 44 | None, 45 | Read = 1 << 1, 46 | Write = 1 << 2, 47 | ReadWrite = Read | Write, 48 | // computed member 49 | G = "123".length, 50 | } 51 | 52 | // Union enums and enum member types 53 | enum ShapeKind { 54 | Circle, 55 | Square, 56 | } 57 | 58 | // Reverse mappings 59 | enum Enum { 60 | A, 61 | } 62 | 63 | let a = Enum.A; 64 | let nameOfA = Enum[a]; // "A" 65 | console.log(nameOfA); 66 | 67 | // const enums 68 | const enum EnumConst { 69 | A = 1, 70 | B = A * 2, 71 | } 72 | 73 | // Ambient enums 74 | declare enum EnumAmbient { 75 | A = 1, 76 | B, 77 | C = 2, 78 | } 79 | -------------------------------------------------------------------------------- /First Program/index.ts: -------------------------------------------------------------------------------- 1 | let person = { 2 | name: "John", 3 | age: 30, 4 | }; 5 | 6 | console.log(person); 7 | -------------------------------------------------------------------------------- /Function Signature/index.ts: -------------------------------------------------------------------------------- 1 | // Function Signature 2 | 3 | // Example 1 4 | let greet: (name: string) => void; 5 | 6 | greet = (name: string) => { 7 | console.log(`My name is ${name}`); 8 | }; 9 | greet("John"); 10 | 11 | // Example 2 12 | let calc: (a: number, b: number, c: string) => number; 13 | 14 | calc = (numOne: number, numTwo: number, action: string) => { 15 | if (action === "add") { 16 | return numOne + numTwo; 17 | } else { 18 | return numOne - numTwo; 19 | } 20 | }; 21 | calc(5, 10, "add"); 22 | -------------------------------------------------------------------------------- /Generic/index.ts: -------------------------------------------------------------------------------- 1 | // Generic with a single parameter 2 | function userInfo1(user: x) { 3 | console.log(user); 4 | } 5 | 6 | userInfo1("Rahi"); 7 | 8 | // Generic with nultiple single parameter 9 | function userInfo2(user: x, active: y) { 10 | if (active) { 11 | console.log(user); 12 | } 13 | } 14 | 15 | userInfo2("Alamin", true); 16 | 17 | // user generic with arrow function 18 | const userInfo3 = (user: x, active: y) => { 19 | if (active) { 20 | console.log(user); 21 | } 22 | }; 23 | 24 | userInfo2("Naim", false); 25 | -------------------------------------------------------------------------------- /Inheritance/index.ts: -------------------------------------------------------------------------------- 1 | class User { 2 | name: string; 3 | age: number; 4 | constructor(name: string, age: number) { 5 | this.name = name; 6 | this.age = age; 7 | } 8 | 9 | Show() { 10 | console.log(`username: ${this.name}, age: ${this.age}`); 11 | } 12 | } 13 | 14 | class Student extends User { 15 | studentId: number; 16 | studentGender: string; 17 | 18 | constructor( 19 | name: string, 20 | age: number, 21 | studentId: number, 22 | studentGender: string 23 | ) { 24 | super(name, age); 25 | this.studentId = studentId; 26 | this.studentGender = studentGender; 27 | } 28 | 29 | Show() { 30 | console.log( 31 | `username: ${this.name}, age: ${this.age} studentId: ${this.studentId}, studentGender: ${this.studentGender}` 32 | ); 33 | } 34 | } 35 | 36 | const user = new User("John", 20); 37 | user.Show(); 38 | 39 | const student = new Student("rahi", 19, 502386, "male"); 40 | student.Show(); 41 | -------------------------------------------------------------------------------- /Interface/index.ts: -------------------------------------------------------------------------------- 1 | interface IUser { 2 | id: number; 3 | name: string; 4 | age: number; 5 | } 6 | 7 | let users: IUser[] = []; 8 | 9 | let user1: IUser = { 10 | id: 10, 11 | name: "Rahi Ahmed", 12 | age: 19, 13 | }; 14 | 15 | let user2: IUser = { 16 | id: 15, 17 | name: "Alamin Ahmed", 18 | age: 20, 19 | }; 20 | 21 | users.push(user1); 22 | users.push(user2); 23 | 24 | let printAllUserInfo = (user: IUser) => { 25 | console.log( 26 | `User Id is ${user.id}, User Name is ${user.name} and User Age is ${user.age}` 27 | ); 28 | }; 29 | 30 | users.forEach((user) => printAllUserInfo(user)); 31 | -------------------------------------------------------------------------------- /Object Data Type/index.ts: -------------------------------------------------------------------------------- 1 | // this is a object and it will return single object 2 | let names: Object; 3 | names = { name: "John", age: 30 }; 4 | 5 | // this is a array of object and it will return muiltiple object 6 | let users: Object[]; 7 | users = [ 8 | { name: "John", age: 30 }, 9 | { name: "Jane", age: 30 }, 10 | { name: "Mark", age: 30 }, 11 | ]; 12 | 13 | // here we are defining the type of object 14 | let newUser: { name: string; age: number }; 15 | 16 | // here we are creating a new object and pushing it to the array 17 | newUser = { name: "Rahi", age: 19 }; 18 | users.push(newUser); 19 | 20 | // here we are looping through the array and printing the object 21 | users.forEach((user) => console.log(user)); 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Table of content ( click to navigate ) 2 | 3 | - [Introduction](#What-is-TypeScript) 4 | - [Installation](#TypeScript-Install) 5 | - [How works TypeScript](#How-works-TypeScript) 6 | - [TypeScript Configuration](#TypeScript-Configuration) 7 | - [Data Types](#Data-Types) 8 | - [Class](#Class-Typescript) 9 | - [Inheritance](#Inheritance) 10 | - [Abstract Class](#Abstract-Class) 11 | - [Encapsulation](#Encapsulation) 12 | - [Function Signature](#Function-Signature) 13 | - [Interface](#Interface) 14 | - [Generic Type](#Generic) 15 | 16 |
17 | 18 | # What is TypeScript? 19 | 20 | types / additional features + javascript মিলেই কিন্তু TypeScript গঠিত। TypeScript ব্যাবহার করার মাধ্যমে আমরা টাইপ ফ্রি কোড লিখতে পারি ( মানে কোন variable এর ডেটা টাইপ কেমন হবে )। TypeScript ২০১২ সালে ডেভেলপ করা হয়েছে এবং এটি মাইক্রোসফট তৈরি করেছে এবং মেইনটেইন করছে। 21 | 22 | # TypeScript Install 23 | 24 | **First Step:** 25 | Check node install or not: node --version 26 | 27 |
28 | 29 | **Second Step** 30 | 31 | ```js 32 | // global 33 | npm install -g typescript 34 | 35 | // local 36 | npm install --save-dev typescript 37 | ``` 38 | 39 | Check installed or not: tsc --version 40 | 41 | # How works TypeScript 42 | 43 | image 44 | 45 |
46 | 47 | **উপরের Diagram লক্ষ করলেই বুঝা যাচ্ছে যে TypeScript program run করার সেটা Compile হয় এবং তারপর সেটি Javascript এ রুপান্তর হয়ে Output দেখায়। আর এটা করার জন্য আমাদের কোড ইডিটরের কমান্ড লাইনে যে কমান্ড দিতে হয় সেটা নিচে দেওয়া হলো...** 48 | 49 | ```js 50 | tsc file-name 51 | 52 | // আর আপনি যদি চান না যে বার বার এই কমান্ড রান করবেন তাহলে নিচের কমান্ড দিতে পারেন। 53 | tsc file-name --watch 54 | ``` 55 | 56 |
57 | 58 | # TypeScript Configuration 59 | 60 | - create src, public folder 61 | - Inside public folder create index.html, style.css and inside src folder create index.ts or other ts files 62 | - in terminal -> tsc --init 63 | - edit tsconfig.json as shown in the following example 64 | 65 | ```json 66 | { 67 | "compilerOptions": { 68 | "target": "es5", 69 | "module": "commonjs", 70 | "rootDir": "./src", 71 | "outDir": "./public", 72 | "strict": true, 73 | "noUnusedLocals": true, 74 | "noUnusedParameters": true 75 | }, 76 | "include": ["./src"], 77 | "files": ["./src/index.ts", "./src/app.ts"] 78 | } 79 | ``` 80 | 81 |
82 | 83 | # Data Types 84 | 85 | Data Types এর মধ্যে **any** হচ্ছে সুপার ডেটা টাইপ এবং এর মধ্যে রয়েছে Built-in data types ও user define data types। 86 | 87 | ### Built-in data types 88 | 89 |
    90 |
  • Number
    • 91 |
  • String
    • 92 |
  • Boolean
    • 93 |
  • Undefined
    • 94 |
  • Null
    • 95 |
  • Void
    • 96 |
97 | 98 | **সব ডেটা টাইপের একটা করে example নিচে দেখানো হলোঃ** 99 | 100 | ```js 101 | let name = "Rahi Ahmed"; // String 102 | let Number = 123; // Number 103 | let isMale = true; // Boolean 104 | let hasMoney = null; // Null 105 | let houseAddress = undefined; // Undefined 106 | ``` 107 | 108 | > উপরে যে ডেটা টাইপের সাথে পরিচয় করানো হলো এগুলো হচ্ছে any এর built-in ডেটা টাইপ। এগুলো আমরা ব্যবহার করে অভ্যস্ত। 109 | 110 | ### User define data types 111 | 112 |
    113 |
  • Arrays
    • 114 |
  • Enums
    • 115 |
  • Classes
    • 116 |
  • Interfaces
    • 117 |
118 | 119 | ### Union Data Type 120 | 121 | কোনো সময় আমাদের একই variable অথবা function এর মধ্যে ১ এর অধিক ডেটা টাইপ আসতে পারে তখন আমরা ইউনিয়ন (Union) ব্যাবহার করবো সেটা হ্যান্ডেল করার জন্য। Union এর মাধ্যমে আমরা কয়েকটি ডেটা টাইপকে একত্রিত করতে পারি। নিচে তার example দেওয়া হলোঃ 122 | 123 | ```js 124 | let person: string | number; 125 | 126 | person = "John"; 127 | person = 123; 128 | ``` 129 | 130 | উপরে person নামের variable টি ২টি ডেটা টাইপ নিতে পারবে string এবং number এবং ২টি আলাদা ডেটা টাইপ নেওয়ার সময় কোনো error দিবে না কারণ আমরা Union data type এর মাধ্যমে সেটা বলে দিয়েছি যে আমাদের ২টি ডেটা টাইপ লাগবে। 131 | 132 | একইভাবে function এর মধ্যে ও আমরা Union ব্যবহার করতে পারবো। নিচে example দেওয়া হলোঃ 133 | 134 | ```js 135 | function clientId(id: string | number) { 136 | console.log(id); 137 | } 138 | 139 | clientId("123"); 140 | clientId(123); 141 | ``` 142 | 143 | উপরে clientId নামের function টি id নামে যে পেরামিটার নিবে সেখানে ইনপুট হিসেবে ২টি ডেটা টাইপ দেওয়া যাবে string এবং number এবং ২টি আলাদা ডেটা টাইপ নেওয়ার সময় কোনো error দিবে না কারণ আমরা Union data type এর মাধ্যমে সেটা বলে দিয়েছি যে আমাদের ২টি ডেটা টাইপ লাগবে। 144 | 145 | > উদাহরণে ২টি ডেটা টাইপ কম্বাইন করে দেখানো হয়েছে কিন্তু Union এর মাধ্যমে যতগুলো ডেটা টাইপ ইচ্ছা আমরা কম্বাইন করতে পারবো। 146 | 147 | ### Array Type 148 | 149 | Array type তো আমরা ডিফাইন করতে পারি আমরা, কিন্তু typescript এ কিভাবে টাইপের সাথে array ডিফাইন করতে হয় সেটা এখানে দেখানো হচ্ছে। 150 | 151 | ```js 152 | let info = ["Rahi", "Alamin", "Naim"]; // যখন আমরা ভেলু সহ array ডিফাইন করছি তখন typescript ইন্টেলিজেন্স বুঝে যাচ্ছে এটার ডেটা টাইপ এবং এখানে এই array এর ডেটা টাইপ হচ্ছে string। 153 | 154 | let info: string[]; // কিন্তু যখন আমরা ভেলু না দিয়ে শুধু array টি ডিফাইন করে রাখি তখন আমরা typescript এ এভাবে ডেটা টাইপ বলে দেই। 155 | ``` 156 | 157 | > আমরা চাইলে Union এর মাধ্যমে ডেটা টাইপ কম্বাইন করতে পারি array এর জন্য ও। নিচে example দেওয়া হলো। 158 | 159 | ```js 160 | let info: (string | number)[]; 161 | 162 | info = ["Rahi", 23]; 163 | ``` 164 | 165 | ### Tuple Data Type 166 | 167 | অনেক সময় আমাদের (key, value) নিয়ে array তে কাজ করার প্রয়োজন হতে পারে মাল্টিপল টাইপের ডাটা নিয়ে তখন আমরা এই **টাপল** ডাটা টাইপ ব্যবহার করে সেটা করতে পারি। 168 | নিচে উদাহরণ দেওয়া হলোঃ 169 | 170 | ```js 171 | let data: [number, string]; 172 | data = [101, "Rahi"]; 173 | data.push(303, "Alamin"); 174 | 175 | console.log(data); 176 | ``` 177 | 178 | Tuple data type এ আমরা variable define করে নিবো এবং সেই variable এর ডেটা টাইপ বলে দিবো ( [] ) থার্ড ব্র্যাকেট এর মধ্যে ( , ) এর মাধ্যমে ( যদি ১ এর অধিক ডেটা টাইপ দেওয়া হয় তাহলে )। এরপর নরমাল array তে যেভাবে কাজ করা হয় ওইভাবেই যেকোনো অপারেশন চালানো যাবে কিন্তু যেহেতু এটা typescript তাই আমরা variable define করার সময় যে order এ ডেটা টাইপ দিয়েছি সেই order এ কিন্তু আমাদের ডেটা পুশ করতে হবে array তে। 179 | 180 |
181 | 182 | ### Enum Data Type 183 | 184 | অনেক সময় আমাদের প্রোগ্রামে এমন কিছু variable থাকে যেগুলোর value সব একই থাকে এবং আমরা সেগুলো বিভিন্ন জায়গায় ব্যবহার করে থাকি এই কাজটি রিডেবল করতে typescript আমাদের দিচ্ছে Enum Data Type নামে একটি ডেটা টাইপ যেটার মধ্যে আমরা আমাদের constant variable গুলো রাখতে পারবো। এবং array তে আমরা যেভাবে প্রতিটি item ধরতে পারতাম ঠিক সেইমভাবে Enum Data Type এ ও ধরতে পারবো। আমরা Enum Data Type switch statements, comparisons এবং আর অনেক জায়গায় ব্যবহার করতে পারবো। Enum Data Type এর মাধ্যমে আমরা আমাদের কোডকে আর বেশি readable করতে পারবো। **Enum Data Type এ আমরা duplicate কোনো কিছু দিতে পারবো না।** Enum Data Type এ আমরা কোনো variable declear করলে সেটার value অটোমেটিক সেট হয়ে যায় ( ০ থেকে শুরু হয়ে যতগুলো item থাকবে তত পর্যন্ত ১ -> ১ করে বাড়তে থাকবে ) কিন্তু আমরা চাইলে নিজেদের value দিতে পারবো ( ওইটা ডিফল্ট হিসেবে সেট হয় )। 185 | 186 | **Enum Data Type ৩ ধরনের** 187 | 188 | - Numeric Enums - ( এটিতে আমরা সংখ্যা এবং মৌলিক সংখ্যা রাখতে পারবো ) 189 | 190 | - String Enums - ( এটিতে আমরা string রাখতে পারবো ) 191 | 192 | - Heterogeneous Enums - ( এটিতে আমরা Numeric Enums এবং String Enums সমন্বয় করে রাখতে পারবো ) 193 | 194 |
195 | 196 | **Enum Data Type Syntax** 197 | 198 |
199 | image 200 | 201 | উপরের কিভাবে আমরা নিজেরা কোনো variable এর value সেট করবো সেটা দেখানো হয় নি! **নিচে সেটা দেখানো হবে** 202 | 203 |
204 | 205 | **Set The Value In Enum Variable** 206 | 207 |
208 | image 209 | 210 | এভাবে আমরা যেকোনো variable এ value সেট করতে পারি আর যদি কোনো value সেট না করি তাহলে Enum ডিফল্ট ভাবে একটি নাম্বার value সেট করে দেয়। 211 | 212 |
213 | 214 | ### Any Data Type 215 | 216 | Any Data Type তখনই আমাদের প্রয়োজন হয় যখন আমি জানি না যে আমাদের এই ফাংশন এর জন্য কোন ধরণের ডেটা আসতে পারে ( মানে হয়তো আমার string এর ও প্রয়োজন আছে সাথে number, object, array or boolean etc প্রয়োজন রয়েছে ) সেক্ষেত্রে আমরা Data Type হিসেবে Any ব্যবহার করতে পারি তাহলে যেকোনো ধরণের ডেটা আসলেও কোনো error দিবে না। 217 | 218 | ```js 219 | let form: any; 220 | form = 10; 221 | form = "string"; 222 | form = true; 223 | form = {}; 224 | form = []; 225 | form = function () {}; 226 | form = null; 227 | form = undefined; 228 | ``` 229 | 230 |
231 | 232 | ### Object Data Type 233 | 234 | নিচে দেখানো হলো যে typescript এ আমরা কিভাবে object ডিফাইন করতে পারি ডেটা টাইপের সঙ্গে। 235 | 236 | ```js 237 | let names: Object; 238 | names = { name: "John", age: 30 }; 239 | ``` 240 | 241 | উপরে যেই কোডটি দেখানো হয়েছে সেখানে names নামের variable যে একটা object এটা বলে দেওয়া হচ্ছে টাইপ এর মাধ্যমে এবং আমরা যখন ওই names এর মধ্যে কোনো value রাখতে যাবো তখন আমাদের object রাখতে হবে না হলে আমাদের প্রোগ্রামে error দিবে। 242 | 243 | **এখন দেখে নেই কিভাবে আমরা array of object এর ডেটা টাইপ লিখতে ডিফাইন করবো। নিচে তা দেখানো হলোঃ** 244 | 245 | ```js 246 | let users: Object[]; 247 | users = [ 248 | { name: "John", age: 30 }, 249 | { name: "Jane", age: 30 }, 250 | { name: "Mark", age: 30 }, 251 | ]; 252 | ``` 253 | 254 | উপরে যে কোড দেখানো হয়েছে সেটা হচ্ছে array of object মানে এর মধ্যে আমরা অনেক গুলো object রাখতে পারবো এবং সেটা একটি array এর মধ্যে হবে। আর তার জন্য আমাদের ডেটা টাইপ এভাবে লিখতে হবে `Object[]`। 255 | 256 | **কিভাবে object ডেটা টাইপ ডিফাইন করতে হয় জেনে নিলাম এবং কিভাবে array of object ডেটা টাইপ ডিফাইন করতে হয় জেনে নিলাম কিন্তু কিভাবে আমরা একটি object এর মধ্যে যে entires গুলো থাকবে সেগুলোর আলাদা আলাদা ডেটা টাইপ দিতে হয় সেটা জানি না সেটা নিচে দেওয়া হলোঃ** 257 | 258 | ```js 259 | let newUser: { name: string, age: number }; 260 | 261 | newUser = { name: "Rahi", age: 19 }; 262 | ``` 263 | 264 | উপরে আমরা newUser নামে একটি object declear করেছি এবং এর মধ্যে যে entries গুলো থাকবে সেগুলোর আলাদা আলাদা করে ডেটা টাইপ ডিফাইন করে দিলাম এবং নিচে সেই অবজেক্ট এর মধ্যে ২টি value এসাইন করলাম। **কিন্তু আমরা যদি চাই যে উপরে যে অবজেক্ট রয়েছে তার মধ্যের age কে দিলে ও হবে না দিলে ও হবে মানে অপশনাল রাখতে চাইলে `?` এটা ব্যবহার করতে পারি। তার সিনট্যাক্স এইরকম হবে `age?: number`। তাহলে আমাদের এই প্রপার্টি টি অপশনাল হয়ে যাবে এবং এই প্রপার্টি যদি না দেওয়া হয় তাহলে কোনো error দিবে না।** 265 | 266 |
267 | 268 | ### Custom Data Type 269 | 270 | যখন বড় প্রোগ্রাম বানানো হয় তখন একই ডেটা টাইপ নিয়ে অনেক বার লিখতে হয় যার জন্য টাইপস্কিপ্ট আমাদের দিচ্ছে নিজের কাস্টম ডেটা টাইপ বানানোর সুযোগ। কাস্টম ডেটা টাইপ এর সবচেয়ে বড় সুবিধা হচ্ছে এটি আমাদের কোডকে অনেক বেশি রিডেবল বানিয়ে দেয় এবং বাগ ফ্রি বানায় কোডকে। কাস্টম ডেটা টাইপ আমরা সবকিছুর জন্য বানাতে পারবো যেমন - ( function, variable, object, class etc )। নিচে কোডগুলোর সাহায্যে দেখানো হলোঃ 271 | 272 | ```js 273 | type myCustomDataType = { 274 | name: string, 275 | age: number, 276 | isMarried: boolean, 277 | kids: string[], 278 | job: { 279 | title: string, 280 | salary: number, 281 | }, 282 | }; 283 | ``` 284 | 285 | উপরে একটি custom data type বানানো হয়েছে এবং অবশ্যই আমরা যখন custom data type বানাবো তখন আমাদের `type` keyword লিখতে হবে। উপরে যে ডেটা টাইপ বানানো হয়েছে সেটা একটি অবজেক্ট। 286 | 287 | ```js 288 | // এখানে allUsers নামে একটি variable এর ডেটা টাইপ হিসেবে দেওয়া হয়েছে myCustomDataType কে এবং এটিকে একটি array of object বানানো হয়েছে। 289 | let allUsers: myCustomDataType[]; 290 | 291 | // allUsers কে ডিফাইন করা হয়েছে শুধু এখানে। 292 | allUsers = []; 293 | 294 | // এখানে একটি নতুন user বানানোর জন্য newUser variable এর ডেটা টাইপ হিসেবে myCustomDataType কে দেওয়া হয়েছে কারণ myCustomDataType এর মধ্যে যে যে প্রপার্টি রয়েছে আমার সব প্রপার্টি দরকার এর জন্যই। 295 | let newUser: myCustomDataType; 296 | 297 | // এখানে newUser এর প্রপার্টি গুলোর value দেওয়া হচ্ছে এবং যেহেতু আমরা newUser এর ডেটা টাইপ হিসেবে myCustomDataType দিয়েছি তাই myCustomDataType এর মধ্যে যে যে প্রপার্টি রয়েছে সব এই newUser এর মধ্যে চলে এসেছে এবং এখন যখন আমি newUser এর value দিতে যাচ্ছি তখন আমাদের ওই সব প্রপার্টি এর value দিতে হবে যেগুলো রয়েছে myCustomDataType এর মধ্যে। 298 | newUser = { 299 | name: "John", 300 | age: 25, 301 | isMarried: false, 302 | kids: ["Jane", "Jack"], 303 | job: { 304 | title: "Software Engineer", 305 | salary: 100000, 306 | }, 307 | }; 308 | 309 | // সবার শেষে আমরা এই newUser কে পুশ করে দিচ্ছি allUsers এর মধ্যে। এবং এখন যদি আমরা allUsers কে console.log করি তাহলে একটি object পাবো। 310 | allUsers.push(newUser); 311 | ``` 312 | 313 | **উপরে তো আমরা একটি অবজেক্টের জন্য custom data type বানিয়ে দেখেছি কিন্তু আমরা custom data type সব কিছুর জন্য বানাতে পারবো (variable, function, class etc )।** 314 | 315 |
316 | 317 | # Class Typescript 318 | 319 | Typescript এ জাভাস্কিপ্টের সবকিছুর Syntax সেইম শুধু পরিবর্তন হয় ডেটা টাইপ বলে দেওয়ার ধরনটা। তেমনি ভাবে এখন দেখবো Typescript এ কিভাবে Class ডিফাইন করতে হয় এবং কিভাবে Class এর মধ্যে থাকা Property গুলোর ডেটা টাইপ বলে দেওয়া যায়। নিচে দেখানো হলোঃ 320 | 321 | ```js 322 | class User { 323 | name: string; 324 | age: number; 325 | constructor(name: string, age: number) { 326 | this.name = name; 327 | this.age = age; 328 | } 329 | 330 | Show() { 331 | console.log(`username: ${this.name}, age: ${this.age}`); 332 | } 333 | } 334 | 335 | let user = new User("John", 20); 336 | user.Show(); 337 | 338 | let user2 = new User("Jane", 30); 339 | user2.Show(); 340 | ``` 341 | 342 | উপরে একটি Class তৈরি করা হয়েছে। তার মধ্যে name, age ২টি Property দেওয়া হয়েছে এবং সেগুলোর ডেটা টাইপ বলে দেওয়া হয়েছে। তারপর আউটপুট দেখার জন্য Show নামে একটি ফাংশন বানানো হয়েছে এবং তার মধ্যে Console করা হয়েছে। 343 | 344 |
345 | 346 | # Inheritance 347 | 348 | Inheritance হলো একটি অবজেক্ট বা ক্লাস যা অন্য একটি অবজেক্ট বা ক্লাস থেকে একটি বা একাধিক প্রপার্টি ব্যবহার করতে সাহায্য করে। ধরুন, আপনার একটি ক্লাস বানানো রয়েছে এবং ওই ক্লাসের মধ্যে যতগুলো প্রপার্টি দেওয়া আছে সবগুলো প্রপার্টি অন্য আরেকটি কাজের জন্য আপনার প্রয়োজন। তাহলে একটি ক্লাস যখন রয়েছে সেটা ব্যবহার করা গেলে কোড রিডেবল হবে তাই না? আর ওইসময় Inheritance ব্যাবহার করার মাধ্যমে আগের ক্লাস কপি করে আনা যায় নতুন ক্লাস এর মধ্যে। Inheritance করার জন্য আমাদের ক্লাসের নাম দেওয়ার পর `extends` keyword দিতে হবে এবং এর পরে যে ক্লাসকে Inheritance করতে চাচ্ছি তার নাম দিতে হবে। নিচে কোড দেওয়া হলোঃ 349 | 350 | ```js 351 | class User { 352 | name: string; 353 | age: number; 354 | constructor(name: string, age: number) { 355 | this.name = name; 356 | this.age = age; 357 | } 358 | 359 | Show() { 360 | console.log(`username: ${this.name}, age: ${this.age}`); 361 | } 362 | } 363 | 364 | const user = new User("John", 20); 365 | user.Show(); 366 | 367 | class Student extends User { 368 | studentId: number; 369 | studentGender: string; 370 | 371 | constructor( 372 | name: string, 373 | age: number, 374 | studentId: number, 375 | studentGender: string 376 | ) { 377 | super(name, age); 378 | this.studentId = studentId; 379 | this.studentGender = studentGender; 380 | } 381 | 382 | Show() { 383 | console.log( 384 | `username: ${this.name}, age: ${this.age} studentId: ${this.studentId}, studentGender: ${this.studentGender}` 385 | ); 386 | } 387 | } 388 | 389 | const student = new Student("rahi", 19, 502386, "male"); 390 | student.Show(); 391 | ``` 392 | 393 | উপরের উদাহরণে প্রথমে একটি ক্লাস তৈরি করা হয়েছে User নামে এবং তার মধ্যে ২টি প্রপার্টি এবং আউটপুট দেখার জন্য একটি ফাংশন রয়েছে। আর নিচে আরেকটি ক্লাস তৈরি করা হয়েছে Student নামে যেখানেও একটি Student এর নাম, বয়স এর তথ্য লাগবে যার কারণে উপর থেকে User ক্লাস কে কপি করে নিয়ে আসা হয়েছে Student ক্লাস এর মধ্যে এবং Student ক্লাসে আর নতুন ২টি প্রপার্টি যুক্ত করা হয়েছে User ক্লাসে থাকা প্রপার্টি গুলোর সাথে। Student ক্লাসের মধ্যে যে `super()` দেখতে পাচ্ছেন, এটা হচ্ছে একটি keyword এবং এটি constructor প্যারেন্টের মধ্যে ব্যবহার করা হয় চাইল্ড কে আনার জন্য। এখানে name, age কে আনার জন্য ব্যবহার করা হয়েছে। 394 | 395 |
396 | 397 | # Abstract Class 398 | 399 | Abstract আমাদের প্রোগ্রাম থেকে কোনো কিছু লুকিয়ে রাখতে সাহায্য করে। যেমনঃ আমরা এমন একটি প্রোগ্রাম তৈরি করেছি যেটার ভিতরে কি হচ্ছে সেটা ইউজারকে জানতে দেওয়া যাবে না এইরকম ক্ষেত্রে Abstract ব্যবহার করা হয়। Abstract ব্যাবহার করার জন্য অবশ্যই আমাদের `bstract` keyowrd দিতে হবে। নিচে দেখে নেই কিভাবে Abstract ক্লাস তৈরি করতে হয়, 400 | 401 | ```js 402 | abstract class Person { 403 | name: string; 404 | age: number; 405 | gender: string; 406 | constructor(name: string, age: number, gender: string) { 407 | this.name = name; 408 | this.age = age; 409 | this.gender = gender; 410 | } 411 | } 412 | ``` 413 | 414 | উপরে যেভাবে দেখানো হয়েছে সেভাবে আমরা Abstract ক্লাস তৈরি করতে পারবো কিন্তু আমরা Abstract ক্লাসের মধ্যে object দিতে পারবো না তাহলে error দিবে। আর আমরা চাইলে Abstract ক্লাসের মধ্যে Abstract মেথড তৈরি করতে পারি। কিন্তু Abstract মেথড কোনো কিছু রিটার্ন করে না। নিচে দেখানো হলোঃ 415 | 416 | ```js 417 | abstract class Person { 418 | name: string; 419 | age: number; 420 | gender: string; 421 | constructor(name: string, age: number, gender: string) { 422 | this.name = name; 423 | this.age = age; 424 | this.gender = gender; 425 | } 426 | 427 | // Abstract method 428 | abstract show(): void; 429 | } 430 | ``` 431 | 432 | এভাবে Abstract তৈরি করা যাবে। কিন্তু একটা জিনিস যে যদি আমরা Abstract ক্লাসের মধ্যে Abstract মেথড তৈরি করি তাহলে আমরা যখন এই Abstract ক্লাস Inheritance করবো তখন অবশ্যই আমাদের Abstract মেথড ব্যবহার করতে হবে না হলে error দিবে। এবং যে এই Abstract ক্লাসকে Inheritance করবে সে তার মতো করে Abstract মেথডগুলোকে বলে দিতে পারবে যে তারা কি কাজ করবে তাদের ফাংশনালিটি কি। 433 | 434 |
435 | 436 | # Encapsulation 437 | 438 | Encapsulation হচ্ছে Object-Oriented Programming এর ৪টি ফান্ডামেন্টাল এর মধ্যে একটি। এর দ্বারা একটি অব্জেক্টের আসল ফাংশন অথবা মেথডগুলো লুকিয়ে রাখা যায় ( পাবলিক, প্রাইভেট ) ইত্যাদি এর মাধ্যমে। Encapsulation ব্যবহারের মাধ্যমে ডাটার এক্সেস কনট্রোল করা সম্ভব। এর মাধ্যমে ডাটাকে প্রটেক্টেট রাখা সম্ভব। Encapsulation এর ৩টি key principles রয়েছে নিচে দেওয়া হলোঃ 439 | 440 | - Data Hiding 441 | - Access Control 442 | - Modularity 443 | 444 | ### Data Hiding 445 | 446 | Encapsulation এর মুল উদ্দেশ্য হচ্ছে ডাটাকে সুরক্ষিত রাখা। যার জন্য Data Hiding ব্যবহার করা হয়। এর মাধ্যমে আমাদের যেসব implementation রয়েছে দেগুলোকে বাহিরের থেকে লুকিয়ে রাখা যায়। যেগুলোকে বাহিরে প্রদর্শন করতে চাই না সেগুলোকে প্রাইভেট করে দিতে পারি এবং সেগুলোকে এক্সেস করার জন্য ২টি পাবলিক মেথড তৈরি করতে পারি ( সেট এবং গেট ) নামে। Data Hiding unauthorized আক্সেস গুলো প্রতিরোধে সাহায্য করে। 447 | 448 | ### Access Control 449 | 450 | Access Control এর মাধ্যমে আমাদের ডাটাগুলোর আক্সেস রাখতে পারি ( পাবলিক, প্রাইভেট, প্রটেক্টেড, রিডঅনলি )। Access Control এর মাধ্যমে এটা নিশ্চিত করা যায় যে ক্লাসে থাকা একটি নির্দিষ্ট প্রপার্টিকে বাহিরে থেকে আক্সেস করা সম্ভব অথবা না। 451 | 452 | ### Modularity 453 | 454 | Modularity হলো একটি প্রোগ্রামিং প্যারাডাইম যা প্রোগ্রামকে ছোট একক ভাগে ভাগ করে তাদেরকে আলাদা আলাদা মডিউলে অর্থাৎ মডিউলার ইউনিটগুলি তৈরি করে। এই মডিউলার ইউনিটগুলি নিযে নিজের কাজ করতে পারে এবং একে অপরের উপর নির্ভরশীল না থাকতে হয় না। 455 | 456 | **নিচে Encapsulation এর Access Control থেকে ( Public, Private, Protected, ReadOnly ) দ্বারা কিভাবে একটি ডাটা মেইনটেইন করতে হয় তা দেখানো হলোঃ** 457 | 458 | ```js 459 | // public access control 460 | class User { 461 | public name: string; 462 | public age: number; 463 | constructor(name: string, age: number) { 464 | this.name = name; 465 | this.age = age; 466 | } 467 | 468 | Show() { 469 | console.log(`username: ${this.name}, age: ${this.age}`); 470 | } 471 | } 472 | 473 | 474 | // private access control 475 | class User2 { 476 | private name: string; 477 | private age: number; 478 | 479 | constructor(name: string, age: number) { 480 | this.name = name; 481 | this.age = age; 482 | } 483 | 484 | Show() { 485 | console.log(`username: ${this.name}, age: ${this.age}`); 486 | } 487 | 488 | GetAge() { 489 | return this.age; 490 | } 491 | 492 | SetAge(age: number) { 493 | this.age = age; 494 | } 495 | 496 | GetName() { 497 | return this.name; 498 | } 499 | 500 | SetName(name: string) { 501 | this.name = name; 502 | } 503 | } 504 | 505 | 506 | // protected access control 507 | class User3 { 508 | protected name: string; 509 | protected age: number; 510 | 511 | constructor(name: string, age: number) { 512 | this.name = name; 513 | this.age = age; 514 | } 515 | 516 | Show() { 517 | console.log(`username: ${this.name}, age: ${this.age}`); 518 | } 519 | } 520 | 521 | class Employee extends User3 { 522 | private salary: number; 523 | 524 | constructor(name: string, age: number, salary: number) { 525 | super(name, age); 526 | this.salary = salary; 527 | } 528 | 529 | Show() { 530 | console.log( 531 | `username: ${this.name}, age: ${this.age}, salary: ${this.salary}` 532 | ); 533 | } 534 | } 535 | 536 | 537 | // readonly access control 538 | class User4 { 539 | readonly name: string; 540 | readonly age: number; 541 | 542 | constructor(name: string, age: number) { 543 | this.name = name; 544 | this.age = age; 545 | } 546 | 547 | Show() { 548 | console.log(`username: ${this.name}, age: ${this.age}`); 549 | } 550 | } 551 | ``` 552 | 553 | - Public 554 |
555 | আমরা সাধারণত যে কোড করে থাকি সেগুলো হচ্ছে পাবলিক। পাবলিক করা কোডগুলো আমরা read করতে পারি update করতে পারি এবং access করতে পারি। 556 | 557 | - Private 558 |
559 | Private করা কোড আমরা শুধুমাত্র ক্লাসের ভিতর থেকে access, read, update করতে পারবো বাহিরে থেকে পারবো না। সেক্ষেত্রে আমাদের মেথড তৈরি করতে হবে সেটাকে edit or access করার জন্য। 560 | 561 | - Protected 562 |
563 | Protected করা কোড আমরা বাহিরে থেকে access করতে পারবো না কিন্তু আমরা যদি extends করি অর্থাৎ Inheritance করি ওই ক্লাসকে তাহলে সেই Protected কোডকে আমরা access, read, update করতে পারবো। 564 | 565 | - ReadOnly 566 |
567 | ReadOnly করা থাকলে আমরা শুধুমাত্র read করতে পারবো ডাটা কিন্তু কোনো update করতে পারবো না। 568 | 569 |
570 | 571 | # Function Signature 572 | 573 | Function Signature দ্বারা আমরা বলে দিতে পারি যে আমাদের ফাংশনটি কতগুলো প্যারামিটার নিবে, কি রিটার্ন করবে, প্যারামিটারগুলো কোন টাইপের হবে এইগুলো। এতে করে আমাদের কোডগুলো রিডেবল হয় এবং আমরা যখন ফাংশনটি ব্যবহার করতে যাবো তখন অটোমেটিক আমাদের সাজেস্ট করা হয় যে তোমার ফাংশন এই এই জিনিসগুলো চায় তোমাকে এইগুলোই দিতে হবে। এবং এর মাধ্যমে ইরর কমে যায়। নিচে ২টি এক্সাম্পল দেওয়া হলোঃ 574 | 575 | ```js 576 | // Example 1 577 | let greet: (name: string) => void; 578 | 579 | greet = (name: string) => { 580 | console.log(`My name is ${name}`); 581 | }; 582 | greet("John"); 583 | 584 | // Example 2 585 | let calc: (a: number, b: number, c: string) => number; 586 | 587 | calc = (numOne: number, numTwo: number, action: string) => { 588 | if (action === "add") { 589 | return numOne + numTwo; 590 | } else { 591 | return numOne - numTwo; 592 | } 593 | }; 594 | calc(5, 10, "add"); 595 | ``` 596 | 597 | যখন আমরা Function Signature ব্যাবহার করবো কোনো ফাংশনের জন্য তখন আমাদের আগে ফাংশনটি ডিফাইন করে নিতে হয় সে কি কি কাজ করবে ( মানে তার বডি কি হবে ), সে কোন কোন টাইপের প্যারামিটার গ্রহণ করবে এবং কি রিটার্ন করবে এগুলো দিয়ে। তারপর যখন আমরা সেই ফাংশন ব্যবহার করতে যাবো তখন আমাদেরকে সাজেস্ট করা হবে যে এই ফাংশনে আমাদের এই এই জিনিস দিতে হবে আর না দিলে ইরর দেওয়া হবে আমাদের। 598 | 599 |
600 | 601 | # Interface 602 | 603 | Interface এর মাধ্যমে ডেটা টাইপ টেম্পলেট তৈরি করতে পারবো। যেটা আমরা চাই অনেক জায়গায় ব্যবহার করতে। এর মাধ্যমে আমাদের বারবার একই টাইপ লিখার প্রয়োজন হবে না আমরা একটি জায়গায় Interface এর সাহায্যে টেম্পলেট তৈরি করে রেখে দিবো তারপর বার বার ব্যবহার করতে পারবো। নিচে তার কোড দেখানো হলোঃ 604 | 605 | ```js 606 | interface IUser { 607 | id: number; 608 | name: string; 609 | age: number; 610 | } 611 | 612 | let users: IUser[] = []; 613 | 614 | let user1: IUser = { 615 | id: 10, 616 | name: "Rahi Ahmed", 617 | age: 19, 618 | }; 619 | 620 | let user2: IUser = { 621 | id: 15, 622 | name: "Alamin Ahmed", 623 | age: 20, 624 | }; 625 | 626 | users.push(user1); 627 | users.push(user2); 628 | 629 | let printAllUserInfo = (user: IUser) => { 630 | console.log( 631 | `User Id is ${user.id}, User Name is ${user.name} and User Age is ${user.age}` 632 | ); 633 | }; 634 | 635 | users.forEach((user) => printAllUserInfo(user)); 636 | ``` 637 | 638 | উপরে Interface এর সাহায্যে একটি ডেটা টাইপ টেম্পলেট বানানো হয়েছে যেটা অনেক জায়গায় ব্যবহার করা হয়েছে। 639 | 640 |
641 | 642 | # Generic 643 | 644 | Generic ব্যবহার করে আমরা আমাদের ডেটা টাইপ এমন করতে পারবো যে যেকোনো ডেটা দিলেও প্রোগ্রামে কোনো ইরর আসবে না। মানে যখন আমাদের প্রোগ্রামে যেকোনো টাইপের ডেটা আসতে পারে সম্ভাবনা রয়েছে সেক্ষেত্রে আমরা Generic ব্যবহার করতে পারি কারণ এটি আমাদের যেকোনো রকমের ডেটা টাইপ রিসিব করতে সাহায্য করে। নিচে ৩টি example দেওয়া হলোঃ 645 | 646 | ```js 647 | // Generic with a single parameter 648 | function userInfo1(user: x) { 649 | console.log(user); 650 | } 651 | 652 | userInfo1("Rahi"); 653 | 654 | // Generic with nultiple single parameter 655 | function userInfo2(user: x, active: y) { 656 | if (active) { 657 | console.log(user); 658 | } 659 | } 660 | 661 | userInfo2("Alamin", true); 662 | 663 | // user generic with arrow function 664 | const userInfo3 = (user: x, active: y) => { 665 | if (active) { 666 | console.log(user); 667 | } 668 | }; 669 | 670 | userInfo2("Naim", false); 671 | ``` 672 | 673 | Generic ডিফাইন করার জন্য আমাদের `<>` দিতে হবে এবং এর মধ্যে আমাদের যে নাম দেওয়ার সেটা দিবো ( নামটি ডেটা টাইপের জায়গায় ব্যবহার করা হবে )। এবং মাল্টিপলের জন্যও দেখানো হয়েছে। 674 | -------------------------------------------------------------------------------- /Tuple Data Type/index.ts: -------------------------------------------------------------------------------- 1 | // multiple type parameters 2 | // array - key value pair 3 | let data: [number, string]; 4 | 5 | data = [101, "Alamin"]; 6 | 7 | data.push(303, "Alamin"); 8 | 9 | console.log(data); 10 | -------------------------------------------------------------------------------- /User Define Data Types/array-type.ts: -------------------------------------------------------------------------------- 1 | // there is only one type of array in typescript 2 | let info: string[]; 3 | info = ["John", "Doe"]; 4 | 5 | // the multiple data type in array 6 | let info2: (string | number)[]; 7 | 8 | info2 = ["John", 123]; 9 | -------------------------------------------------------------------------------- /User Define Data Types/index.ts: -------------------------------------------------------------------------------- 1 | let person: string | number; 2 | 3 | person = "John"; 4 | person = 123; 5 | 6 | function clientId(id: string | number) { 7 | console.log(id); 8 | } 9 | 10 | clientId("123"); 11 | clientId(123); 12 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript-learning", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "typescript-learning", 9 | "version": "1.0.0", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "typescript": "^5.3.3" 13 | } 14 | }, 15 | "node_modules/typescript": { 16 | "version": "5.3.3", 17 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", 18 | "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", 19 | "dev": true, 20 | "bin": { 21 | "tsc": "bin/tsc", 22 | "tsserver": "bin/tsserver" 23 | }, 24 | "engines": { 25 | "node": ">=14.17" 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript-learning", 3 | "version": "1.0.0", 4 | "description": "- [Introduction](#What-is-TypeScript)\r - [Installation](#TypeScript-Install)\r - [How works TypeScript](#How-works-TypeScript)", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "typescript": "^5.3.3" 14 | } 15 | } 16 | --------------------------------------------------------------------------------