{"id":24066005,"url":"https://github.com/asfak00/typescript-learning","last_synced_at":"2025-10-30T05:18:16.644Z","repository":{"id":213997644,"uuid":"735196148","full_name":"Asfak00/typescript-learning","owner":"Asfak00","description":"Hello developers, In this repository I am writed my all notes of typescript in bengali language. This repository can be help you to understand any typescript subject.","archived":false,"fork":false,"pushed_at":"2024-01-05T04:29:45.000Z","size":138,"stargazers_count":58,"open_issues_count":0,"forks_count":16,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-23T21:03:58.640Z","etag":null,"topics":["data-types","js","typescript"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/playlist?list=PLgH5QX0i9K3rXq_1OgVmjaEJJ1akJQgPq","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Asfak00.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-24T02:31:30.000Z","updated_at":"2025-02-01T23:22:28.000Z","dependencies_parsed_at":"2023-12-25T02:23:09.936Z","dependency_job_id":"d5ee9bb8-55d4-4207-9fbc-5ded1bf5db3e","html_url":"https://github.com/Asfak00/typescript-learning","commit_stats":null,"previous_names":["asfak00/typescript-learning"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Asfak00/typescript-learning","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asfak00%2Ftypescript-learning","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asfak00%2Ftypescript-learning/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asfak00%2Ftypescript-learning/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asfak00%2Ftypescript-learning/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Asfak00","download_url":"https://codeload.github.com/Asfak00/typescript-learning/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asfak00%2Ftypescript-learning/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281748744,"owners_count":26554835,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-30T02:00:06.501Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-types","js","typescript"],"created_at":"2025-01-09T11:18:44.840Z","updated_at":"2025-10-30T05:18:16.582Z","avatar_url":"https://github.com/Asfak00.png","language":"TypeScript","readme":"# Table of content ( click to navigate )\n\n- [Introduction](#What-is-TypeScript)\n- [Installation](#TypeScript-Install)\n- [How works TypeScript](#How-works-TypeScript)\n- [TypeScript Configuration](#TypeScript-Configuration)\n- [Data Types](#Data-Types)\n- [Class](#Class-Typescript)\n- [Inheritance](#Inheritance)\n- [Abstract Class](#Abstract-Class)\n- [Encapsulation](#Encapsulation)\n- [Function Signature](#Function-Signature)\n- [Interface](#Interface)\n- [Generic Type](#Generic)\n\n\u003c/br\u003e\n\n# What is TypeScript?\n\ntypes / additional features + javascript মিলেই কিন্তু TypeScript গঠিত। TypeScript ব্যাবহার করার মাধ্যমে আমরা টাইপ ফ্রি কোড লিখতে পারি ( মানে কোন variable এর ডেটা টাইপ কেমন হবে )। TypeScript ২০১২ সালে ডেভেলপ করা হয়েছে এবং এটি মাইক্রোসফট তৈরি করেছে এবং মেইনটেইন করছে।\n\n# TypeScript Install\n\n**First Step:**\nCheck node install or not: node --version\n\n\u003c/br\u003e\n\n**Second Step**\n\n```js\n// global\nnpm install -g typescript\n\n// local\nnpm install --save-dev typescript\n```\n\nCheck installed or not: tsc --version\n\n# How works TypeScript\n\n\u003cimg src=\"./Diagram images/how works.png\" alt=\"image\"\u003e\n\n\u003c/br\u003e\n\n**উপরের Diagram লক্ষ করলেই বুঝা যাচ্ছে যে TypeScript program run করার সেটা Compile হয় এবং তারপর সেটি Javascript এ রুপান্তর হয়ে Output দেখায়। আর এটা করার জন্য আমাদের কোড ইডিটরের কমান্ড লাইনে যে কমান্ড দিতে হয় সেটা নিচে দেওয়া হলো...**\n\n```js\ntsc file-name\n\n// আর আপনি যদি চান না যে বার বার এই কমান্ড রান করবেন তাহলে নিচের কমান্ড দিতে পারেন।\ntsc file-name --watch\n```\n\n\u003c/br\u003e\n\n# TypeScript Configuration\n\n- create src, public folder\n- Inside public folder create index.html, style.css and inside src folder create index.ts or other ts files\n- in terminal -\u003e tsc --init\n- edit tsconfig.json as shown in the following example\n\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"commonjs\",\n    \"rootDir\": \"./src\",\n    \"outDir\": \"./public\",\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true\n  },\n  \"include\": [\"./src\"],\n  \"files\": [\"./src/index.ts\", \"./src/app.ts\"]\n}\n```\n\n\u003c/br\u003e\n\n# Data Types\n\nData Types এর মধ্যে **any** হচ্ছে সুপার ডেটা টাইপ এবং এর মধ্যে রয়েছে Built-in data types ও user define data types।\n\n### Built-in data types\n\n\u003cul\u003e\n    \u003cli\u003eNumber\u003c/li\u003e\n    \u003cli\u003eString\u003c/li\u003e\n    \u003cli\u003eBoolean\u003c/li\u003e\n    \u003cli\u003eUndefined\u003c/li\u003e\n    \u003cli\u003eNull\u003c/li\u003e\n    \u003cli\u003eVoid\u003c/li\u003e\n\u003c/ul\u003e\n\n**সব ডেটা টাইপের একটা করে example নিচে দেখানো হলোঃ**\n\n```js\nlet name = \"Rahi Ahmed\"; // String\nlet Number = 123; // Number\nlet isMale = true; // Boolean\nlet hasMoney = null; // Null\nlet houseAddress = undefined; // Undefined\n```\n\n\u003e উপরে যে ডেটা টাইপের সাথে পরিচয় করানো হলো এগুলো হচ্ছে any এর built-in ডেটা টাইপ। এগুলো আমরা ব্যবহার করে অভ্যস্ত।\n\n### User define data types\n\n\u003cul\u003e\n    \u003cli\u003eArrays\u003c/li\u003e\n    \u003cli\u003eEnums\u003c/li\u003e\n    \u003cli\u003eClasses\u003c/li\u003e\n    \u003cli\u003eInterfaces\u003c/li\u003e\n\u003c/ul\u003e\n\n### Union Data Type\n\nকোনো সময় আমাদের একই variable অথবা function এর মধ্যে ১ এর অধিক ডেটা টাইপ আসতে পারে তখন আমরা ইউনিয়ন (Union) ব্যাবহার করবো সেটা হ্যান্ডেল করার জন্য। Union এর মাধ্যমে আমরা কয়েকটি ডেটা টাইপকে একত্রিত করতে পারি। নিচে তার example দেওয়া হলোঃ\n\n```js\nlet person: string | number;\n\nperson = \"John\";\nperson = 123;\n```\n\nউপরে person নামের variable টি ২টি ডেটা টাইপ নিতে পারবে string এবং number এবং ২টি আলাদা ডেটা টাইপ নেওয়ার সময় কোনো error দিবে না কারণ আমরা Union data type এর মাধ্যমে সেটা বলে দিয়েছি যে আমাদের ২টি ডেটা টাইপ লাগবে।\n\nএকইভাবে function এর মধ্যে ও আমরা Union ব্যবহার করতে পারবো। নিচে example দেওয়া হলোঃ\n\n```js\nfunction clientId(id: string | number) {\n  console.log(id);\n}\n\nclientId(\"123\");\nclientId(123);\n```\n\nউপরে clientId নামের function টি id নামে যে পেরামিটার নিবে সেখানে ইনপুট হিসেবে ২টি ডেটা টাইপ দেওয়া যাবে string এবং number এবং ২টি আলাদা ডেটা টাইপ নেওয়ার সময় কোনো error দিবে না কারণ আমরা Union data type এর মাধ্যমে সেটা বলে দিয়েছি যে আমাদের ২টি ডেটা টাইপ লাগবে।\n\n\u003e উদাহরণে ২টি ডেটা টাইপ কম্বাইন করে দেখানো হয়েছে কিন্তু Union এর মাধ্যমে যতগুলো ডেটা টাইপ ইচ্ছা আমরা কম্বাইন করতে পারবো।\n\n### Array Type\n\nArray type তো আমরা ডিফাইন করতে পারি আমরা, কিন্তু typescript এ কিভাবে টাইপের সাথে array ডিফাইন করতে হয় সেটা এখানে দেখানো হচ্ছে।\n\n```js\nlet info = [\"Rahi\", \"Alamin\", \"Naim\"]; // যখন আমরা ভেলু সহ array ডিফাইন করছি তখন typescript ইন্টেলিজেন্স বুঝে যাচ্ছে এটার ডেটা টাইপ এবং এখানে এই array এর ডেটা টাইপ হচ্ছে string।\n\nlet info: string[]; // কিন্তু যখন আমরা ভেলু না দিয়ে শুধু array টি ডিফাইন করে রাখি তখন আমরা typescript এ এভাবে ডেটা টাইপ বলে দেই।\n```\n\n\u003e আমরা চাইলে Union এর মাধ্যমে ডেটা টাইপ কম্বাইন করতে পারি array এর জন্য ও। নিচে example দেওয়া হলো।\n\n```js\nlet info: (string | number)[];\n\ninfo = [\"Rahi\", 23];\n```\n\n### Tuple Data Type\n\nঅনেক সময় আমাদের (key, value) নিয়ে array তে কাজ করার প্রয়োজন হতে পারে মাল্টিপল টাইপের ডাটা নিয়ে তখন আমরা এই **টাপল** ডাটা টাইপ ব্যবহার করে সেটা করতে পারি।\nনিচে উদাহরণ দেওয়া হলোঃ\n\n```js\nlet data: [number, string];\ndata = [101, \"Rahi\"];\ndata.push(303, \"Alamin\");\n\nconsole.log(data);\n```\n\nTuple data type এ আমরা variable define করে নিবো এবং সেই variable এর ডেটা টাইপ বলে দিবো ( [] ) থার্ড ব্র্যাকেট এর মধ্যে ( , ) এর মাধ্যমে ( যদি ১ এর অধিক ডেটা টাইপ দেওয়া হয় তাহলে )। এরপর নরমাল array তে যেভাবে কাজ করা হয় ওইভাবেই যেকোনো অপারেশন চালানো যাবে কিন্তু যেহেতু এটা typescript তাই আমরা variable define করার সময় যে order এ ডেটা টাইপ দিয়েছি সেই order এ কিন্তু আমাদের ডেটা পুশ করতে হবে array তে।\n\n\u003c/br\u003e\n\n### Enum Data Type\n\nঅনেক সময় আমাদের প্রোগ্রামে এমন কিছু 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 থাকবে তত পর্যন্ত ১ -\u003e ১ করে বাড়তে থাকবে ) কিন্তু আমরা চাইলে নিজেদের value দিতে পারবো ( ওইটা ডিফল্ট হিসেবে সেট হয় )।\n\n**Enum Data Type ৩ ধরনের**\n\n- Numeric Enums - ( এটিতে আমরা সংখ্যা এবং মৌলিক সংখ্যা রাখতে পারবো )\n\n- String Enums - ( এটিতে আমরা string রাখতে পারবো )\n\n- Heterogeneous Enums - ( এটিতে আমরা Numeric Enums এবং String Enums সমন্বয় করে রাখতে পারবো )\n\n\u003c/br\u003e\n\n**Enum Data Type Syntax**\n\n\u003c/br\u003e\n\u003cimg src=\"./Diagram images/enum systax.png\" alt=\"image\"\u003e\n\nউপরের কিভাবে আমরা নিজেরা কোনো variable এর value সেট করবো সেটা দেখানো হয় নি! **নিচে সেটা দেখানো হবে**\n\n\u003c/br\u003e\n\n**Set The Value In Enum Variable**\n\n\u003c/br\u003e\n\u003cimg src=\"./Diagram images/set value enum variable.png\" alt=\"image\"\u003e\n\nএভাবে আমরা যেকোনো variable এ value সেট করতে পারি আর যদি কোনো value সেট না করি তাহলে Enum ডিফল্ট ভাবে একটি নাম্বার value সেট করে দেয়।\n\n\u003c/br\u003e\n\n### Any Data Type\n\nAny Data Type তখনই আমাদের প্রয়োজন হয় যখন আমি জানি না যে আমাদের এই ফাংশন এর জন্য কোন ধরণের ডেটা আসতে পারে ( মানে হয়তো আমার string এর ও প্রয়োজন আছে সাথে number, object, array or boolean etc প্রয়োজন রয়েছে ) সেক্ষেত্রে আমরা Data Type হিসেবে Any ব্যবহার করতে পারি তাহলে যেকোনো ধরণের ডেটা আসলেও কোনো error দিবে না।\n\n```js\nlet form: any;\nform = 10;\nform = \"string\";\nform = true;\nform = {};\nform = [];\nform = function () {};\nform = null;\nform = undefined;\n```\n\n\u003c/br\u003e\n\n### Object Data Type\n\nনিচে দেখানো হলো যে typescript এ আমরা কিভাবে object ডিফাইন করতে পারি ডেটা টাইপের সঙ্গে।\n\n```js\nlet names: Object;\nnames = { name: \"John\", age: 30 };\n```\n\nউপরে যেই কোডটি দেখানো হয়েছে সেখানে names নামের variable যে একটা object এটা বলে দেওয়া হচ্ছে টাইপ এর মাধ্যমে এবং আমরা যখন ওই names এর মধ্যে কোনো value রাখতে যাবো তখন আমাদের object রাখতে হবে না হলে আমাদের প্রোগ্রামে error দিবে।\n\n**এখন দেখে নেই কিভাবে আমরা array of object এর ডেটা টাইপ লিখতে ডিফাইন করবো। নিচে তা দেখানো হলোঃ**\n\n```js\nlet users: Object[];\nusers = [\n  { name: \"John\", age: 30 },\n  { name: \"Jane\", age: 30 },\n  { name: \"Mark\", age: 30 },\n];\n```\n\nউপরে যে কোড দেখানো হয়েছে সেটা হচ্ছে array of object মানে এর মধ্যে আমরা অনেক গুলো object রাখতে পারবো এবং সেটা একটি array এর মধ্যে হবে। আর তার জন্য আমাদের ডেটা টাইপ এভাবে লিখতে হবে `Object[]`।\n\n**কিভাবে object ডেটা টাইপ ডিফাইন করতে হয় জেনে নিলাম এবং কিভাবে array of object ডেটা টাইপ ডিফাইন করতে হয় জেনে নিলাম কিন্তু কিভাবে আমরা একটি object এর মধ্যে যে entires গুলো থাকবে সেগুলোর আলাদা আলাদা ডেটা টাইপ দিতে হয় সেটা জানি না সেটা নিচে দেওয়া হলোঃ**\n\n```js\nlet newUser: { name: string, age: number };\n\nnewUser = { name: \"Rahi\", age: 19 };\n```\n\nউপরে আমরা newUser নামে একটি object declear করেছি এবং এর মধ্যে যে entries গুলো থাকবে সেগুলোর আলাদা আলাদা করে ডেটা টাইপ ডিফাইন করে দিলাম এবং নিচে সেই অবজেক্ট এর মধ্যে ২টি value এসাইন করলাম। **কিন্তু আমরা যদি চাই যে উপরে যে অবজেক্ট রয়েছে তার মধ্যের age কে দিলে ও হবে না দিলে ও হবে মানে অপশনাল রাখতে চাইলে `?` এটা ব্যবহার করতে পারি। তার সিনট্যাক্স এইরকম হবে `age?: number`। তাহলে আমাদের এই প্রপার্টি টি অপশনাল হয়ে যাবে এবং এই প্রপার্টি যদি না দেওয়া হয় তাহলে কোনো error দিবে না।**\n\n\u003c/br\u003e\n\n### Custom Data Type\n\nযখন বড় প্রোগ্রাম বানানো হয় তখন একই ডেটা টাইপ নিয়ে অনেক বার লিখতে হয় যার জন্য টাইপস্কিপ্ট আমাদের দিচ্ছে নিজের কাস্টম ডেটা টাইপ বানানোর সুযোগ। কাস্টম ডেটা টাইপ এর সবচেয়ে বড় সুবিধা হচ্ছে এটি আমাদের কোডকে অনেক বেশি রিডেবল বানিয়ে দেয় এবং বাগ ফ্রি বানায় কোডকে। কাস্টম ডেটা টাইপ আমরা সবকিছুর জন্য বানাতে পারবো যেমন - ( function, variable, object, class etc )। নিচে কোডগুলোর সাহায্যে দেখানো হলোঃ\n\n```js\ntype myCustomDataType = {\n  name: string,\n  age: number,\n  isMarried: boolean,\n  kids: string[],\n  job: {\n    title: string,\n    salary: number,\n  },\n};\n```\n\nউপরে একটি custom data type বানানো হয়েছে এবং অবশ্যই আমরা যখন custom data type বানাবো তখন আমাদের `type` keyword লিখতে হবে। উপরে যে ডেটা টাইপ বানানো হয়েছে সেটা একটি অবজেক্ট।\n\n```js\n// এখানে allUsers নামে একটি variable এর ডেটা টাইপ হিসেবে দেওয়া হয়েছে myCustomDataType কে এবং এটিকে একটি array of object বানানো হয়েছে।\nlet allUsers: myCustomDataType[];\n\n// allUsers কে ডিফাইন করা হয়েছে শুধু এখানে।\nallUsers = [];\n\n// এখানে একটি নতুন user বানানোর জন্য newUser variable এর ডেটা টাইপ হিসেবে myCustomDataType কে দেওয়া হয়েছে কারণ myCustomDataType এর মধ্যে যে যে প্রপার্টি রয়েছে আমার সব প্রপার্টি দরকার এর জন্যই।\nlet newUser: myCustomDataType;\n\n// এখানে newUser এর প্রপার্টি গুলোর value দেওয়া হচ্ছে এবং যেহেতু আমরা newUser এর ডেটা টাইপ হিসেবে myCustomDataType দিয়েছি তাই myCustomDataType এর মধ্যে যে যে প্রপার্টি রয়েছে সব এই newUser এর মধ্যে চলে এসেছে এবং এখন যখন আমি newUser এর value দিতে যাচ্ছি তখন আমাদের ওই সব প্রপার্টি এর value দিতে হবে যেগুলো রয়েছে myCustomDataType এর মধ্যে।\nnewUser = {\n  name: \"John\",\n  age: 25,\n  isMarried: false,\n  kids: [\"Jane\", \"Jack\"],\n  job: {\n    title: \"Software Engineer\",\n    salary: 100000,\n  },\n};\n\n// সবার শেষে আমরা এই newUser কে পুশ করে দিচ্ছি allUsers এর মধ্যে। এবং এখন যদি আমরা allUsers কে console.log করি তাহলে একটি object পাবো।\nallUsers.push(newUser);\n```\n\n**উপরে তো আমরা একটি অবজেক্টের জন্য custom data type বানিয়ে দেখেছি কিন্তু আমরা custom data type সব কিছুর জন্য বানাতে পারবো (variable, function, class etc )।**\n\n\u003c/br\u003e\n\n# Class Typescript\n\nTypescript এ জাভাস্কিপ্টের সবকিছুর Syntax সেইম শুধু পরিবর্তন হয় ডেটা টাইপ বলে দেওয়ার ধরনটা। তেমনি ভাবে এখন দেখবো Typescript এ কিভাবে Class ডিফাইন করতে হয় এবং কিভাবে Class এর মধ্যে থাকা Property গুলোর ডেটা টাইপ বলে দেওয়া যায়। নিচে দেখানো হলোঃ\n\n```js\nclass User {\n  name: string;\n  age: number;\n  constructor(name: string, age: number) {\n    this.name = name;\n    this.age = age;\n  }\n\n  Show() {\n    console.log(`username: ${this.name}, age: ${this.age}`);\n  }\n}\n\nlet user = new User(\"John\", 20);\nuser.Show();\n\nlet user2 = new User(\"Jane\", 30);\nuser2.Show();\n```\n\nউপরে একটি Class তৈরি করা হয়েছে। তার মধ্যে name, age ২টি Property দেওয়া হয়েছে এবং সেগুলোর ডেটা টাইপ বলে দেওয়া হয়েছে। তারপর আউটপুট দেখার জন্য Show নামে একটি ফাংশন বানানো হয়েছে এবং তার মধ্যে Console করা হয়েছে।\n\n\u003c/br\u003e\n\n# Inheritance\n\nInheritance হলো একটি অবজেক্ট বা ক্লাস যা অন্য একটি অবজেক্ট বা ক্লাস থেকে একটি বা একাধিক প্রপার্টি ব্যবহার করতে সাহায্য করে। ধরুন, আপনার একটি ক্লাস বানানো রয়েছে এবং ওই ক্লাসের মধ্যে যতগুলো প্রপার্টি দেওয়া আছে সবগুলো প্রপার্টি অন্য আরেকটি কাজের জন্য আপনার প্রয়োজন। তাহলে একটি ক্লাস যখন রয়েছে সেটা ব্যবহার করা গেলে কোড রিডেবল হবে তাই না? আর ওইসময় Inheritance ব্যাবহার করার মাধ্যমে আগের ক্লাস কপি করে আনা যায় নতুন ক্লাস এর মধ্যে। Inheritance করার জন্য আমাদের ক্লাসের নাম দেওয়ার পর `extends` keyword দিতে হবে এবং এর পরে যে ক্লাসকে Inheritance করতে চাচ্ছি তার নাম দিতে হবে। নিচে কোড দেওয়া হলোঃ\n\n```js\nclass User {\n  name: string;\n  age: number;\n  constructor(name: string, age: number) {\n    this.name = name;\n    this.age = age;\n  }\n\n  Show() {\n    console.log(`username: ${this.name}, age: ${this.age}`);\n  }\n}\n\nconst user = new User(\"John\", 20);\nuser.Show();\n\nclass Student extends User {\n  studentId: number;\n  studentGender: string;\n\n  constructor(\n    name: string,\n    age: number,\n    studentId: number,\n    studentGender: string\n  ) {\n    super(name, age);\n    this.studentId = studentId;\n    this.studentGender = studentGender;\n  }\n\n  Show() {\n    console.log(\n      `username: ${this.name}, age: ${this.age} studentId: ${this.studentId}, studentGender: ${this.studentGender}`\n    );\n  }\n}\n\nconst student = new Student(\"rahi\", 19, 502386, \"male\");\nstudent.Show();\n```\n\nউপরের উদাহরণে প্রথমে একটি ক্লাস তৈরি করা হয়েছে User নামে এবং তার মধ্যে ২টি প্রপার্টি এবং আউটপুট দেখার জন্য একটি ফাংশন রয়েছে। আর নিচে আরেকটি ক্লাস তৈরি করা হয়েছে Student নামে যেখানেও একটি Student এর নাম, বয়স এর তথ্য লাগবে যার কারণে উপর থেকে User ক্লাস কে কপি করে নিয়ে আসা হয়েছে Student ক্লাস এর মধ্যে এবং Student ক্লাসে আর নতুন ২টি প্রপার্টি যুক্ত করা হয়েছে User ক্লাসে থাকা প্রপার্টি গুলোর সাথে। Student ক্লাসের মধ্যে যে `super()` দেখতে পাচ্ছেন, এটা হচ্ছে একটি keyword এবং এটি constructor প্যারেন্টের মধ্যে ব্যবহার করা হয় চাইল্ড কে আনার জন্য। এখানে name, age কে আনার জন্য ব্যবহার করা হয়েছে।\n\n\u003c/br\u003e\n\n# Abstract Class\n\nAbstract আমাদের প্রোগ্রাম থেকে কোনো কিছু লুকিয়ে রাখতে সাহায্য করে। যেমনঃ আমরা এমন একটি প্রোগ্রাম তৈরি করেছি যেটার ভিতরে কি হচ্ছে সেটা ইউজারকে জানতে দেওয়া যাবে না এইরকম ক্ষেত্রে Abstract ব্যবহার করা হয়। Abstract ব্যাবহার করার জন্য অবশ্যই আমাদের `bstract` keyowrd দিতে হবে। নিচে দেখে নেই কিভাবে Abstract ক্লাস তৈরি করতে হয়,\n\n```js\nabstract class Person {\n  name: string;\n  age: number;\n  gender: string;\n  constructor(name: string, age: number, gender: string) {\n    this.name = name;\n    this.age = age;\n    this.gender = gender;\n  }\n}\n```\n\nউপরে যেভাবে দেখানো হয়েছে সেভাবে আমরা Abstract ক্লাস তৈরি করতে পারবো কিন্তু আমরা Abstract ক্লাসের মধ্যে object দিতে পারবো না তাহলে error দিবে। আর আমরা চাইলে Abstract ক্লাসের মধ্যে Abstract মেথড তৈরি করতে পারি। কিন্তু Abstract মেথড কোনো কিছু রিটার্ন করে না। নিচে দেখানো হলোঃ\n\n```js\nabstract class Person {\n  name: string;\n  age: number;\n  gender: string;\n  constructor(name: string, age: number, gender: string) {\n    this.name = name;\n    this.age = age;\n    this.gender = gender;\n  }\n\n  // Abstract method\n  abstract show(): void;\n}\n```\n\nএভাবে Abstract তৈরি করা যাবে। কিন্তু একটা জিনিস যে যদি আমরা Abstract ক্লাসের মধ্যে Abstract মেথড তৈরি করি তাহলে আমরা যখন এই Abstract ক্লাস Inheritance করবো তখন অবশ্যই আমাদের Abstract মেথড ব্যবহার করতে হবে না হলে error দিবে। এবং যে এই Abstract ক্লাসকে Inheritance করবে সে তার মতো করে Abstract মেথডগুলোকে বলে দিতে পারবে যে তারা কি কাজ করবে তাদের ফাংশনালিটি কি।\n\n\u003c/br\u003e\n\n# Encapsulation\n\nEncapsulation হচ্ছে Object-Oriented Programming এর ৪টি ফান্ডামেন্টাল এর মধ্যে একটি। এর দ্বারা একটি অব্জেক্টের আসল ফাংশন অথবা মেথডগুলো লুকিয়ে রাখা যায় ( পাবলিক, প্রাইভেট ) ইত্যাদি এর মাধ্যমে। Encapsulation ব্যবহারের মাধ্যমে ডাটার এক্সেস কনট্রোল করা সম্ভব। এর মাধ্যমে ডাটাকে প্রটেক্টেট রাখা সম্ভব। Encapsulation এর ৩টি key principles রয়েছে নিচে দেওয়া হলোঃ\n\n- Data Hiding\n- Access Control\n- Modularity\n\n### Data Hiding\n\nEncapsulation এর মুল উদ্দেশ্য হচ্ছে ডাটাকে সুরক্ষিত রাখা। যার জন্য Data Hiding ব্যবহার করা হয়। এর মাধ্যমে আমাদের যেসব implementation রয়েছে দেগুলোকে বাহিরের থেকে লুকিয়ে রাখা যায়। যেগুলোকে বাহিরে প্রদর্শন করতে চাই না সেগুলোকে প্রাইভেট করে দিতে পারি এবং সেগুলোকে এক্সেস করার জন্য ২টি পাবলিক মেথড তৈরি করতে পারি ( সেট এবং গেট ) নামে। Data Hiding unauthorized আক্সেস গুলো প্রতিরোধে সাহায্য করে।\n\n### Access Control\n\nAccess Control এর মাধ্যমে আমাদের ডাটাগুলোর আক্সেস রাখতে পারি ( পাবলিক, প্রাইভেট, প্রটেক্টেড, রিডঅনলি )। Access Control এর মাধ্যমে এটা নিশ্চিত করা যায় যে ক্লাসে থাকা একটি নির্দিষ্ট প্রপার্টিকে বাহিরে থেকে আক্সেস করা সম্ভব অথবা না।\n\n### Modularity\n\nModularity হলো একটি প্রোগ্রামিং প্যারাডাইম যা প্রোগ্রামকে ছোট একক ভাগে ভাগ করে তাদেরকে আলাদা আলাদা মডিউলে অর্থাৎ মডিউলার ইউনিটগুলি তৈরি করে। এই মডিউলার ইউনিটগুলি নিযে নিজের কাজ করতে পারে এবং একে অপরের উপর নির্ভরশীল না থাকতে হয় না।\n\n**নিচে Encapsulation এর Access Control থেকে ( Public, Private, Protected, ReadOnly ) দ্বারা কিভাবে একটি ডাটা মেইনটেইন করতে হয় তা দেখানো হলোঃ**\n\n```js\n// public access control\nclass User {\n  public name: string;\n  public age: number;\n  constructor(name: string, age: number) {\n    this.name = name;\n    this.age = age;\n  }\n\n  Show() {\n    console.log(`username: ${this.name}, age: ${this.age}`);\n  }\n}\n\n\n// private access control\nclass User2 {\n  private name: string;\n  private age: number;\n\n  constructor(name: string, age: number) {\n    this.name = name;\n    this.age = age;\n  }\n\n  Show() {\n    console.log(`username: ${this.name}, age: ${this.age}`);\n  }\n\n  GetAge() {\n    return this.age;\n  }\n\n  SetAge(age: number) {\n    this.age = age;\n  }\n\n  GetName() {\n    return this.name;\n  }\n\n  SetName(name: string) {\n    this.name = name;\n  }\n}\n\n\n// protected access control\nclass User3 {\n  protected name: string;\n  protected age: number;\n\n  constructor(name: string, age: number) {\n    this.name = name;\n    this.age = age;\n  }\n\n  Show() {\n    console.log(`username: ${this.name}, age: ${this.age}`);\n  }\n}\n\nclass Employee extends User3 {\n  private salary: number;\n\n  constructor(name: string, age: number, salary: number) {\n    super(name, age);\n    this.salary = salary;\n  }\n\n  Show() {\n    console.log(\n      `username: ${this.name}, age: ${this.age}, salary: ${this.salary}`\n    );\n  }\n}\n\n\n// readonly access control\nclass User4 {\n  readonly name: string;\n  readonly age: number;\n\n  constructor(name: string, age: number) {\n    this.name = name;\n    this.age = age;\n  }\n\n  Show() {\n    console.log(`username: ${this.name}, age: ${this.age}`);\n  }\n}\n```\n\n- Public\n  \u003c/br\u003e\n  আমরা সাধারণত যে কোড করে থাকি সেগুলো হচ্ছে পাবলিক। পাবলিক করা কোডগুলো আমরা read করতে পারি update করতে পারি এবং access করতে পারি।\n\n- Private\n  \u003c/br\u003e\n  Private করা কোড আমরা শুধুমাত্র ক্লাসের ভিতর থেকে access, read, update করতে পারবো বাহিরে থেকে পারবো না। সেক্ষেত্রে আমাদের মেথড তৈরি করতে হবে সেটাকে edit or access করার জন্য।\n\n- Protected\n  \u003c/br\u003e\n  Protected করা কোড আমরা বাহিরে থেকে access করতে পারবো না কিন্তু আমরা যদি extends করি অর্থাৎ Inheritance করি ওই ক্লাসকে তাহলে সেই Protected কোডকে আমরা access, read, update করতে পারবো।\n\n- ReadOnly\n  \u003c/br\u003e\n  ReadOnly করা থাকলে আমরা শুধুমাত্র read করতে পারবো ডাটা কিন্তু কোনো update করতে পারবো না।\n\n\u003c/br\u003e\n\n# Function Signature\n\nFunction Signature দ্বারা আমরা বলে দিতে পারি যে আমাদের ফাংশনটি কতগুলো প্যারামিটার নিবে, কি রিটার্ন করবে, প্যারামিটারগুলো কোন টাইপের হবে এইগুলো। এতে করে আমাদের কোডগুলো রিডেবল হয় এবং আমরা যখন ফাংশনটি ব্যবহার করতে যাবো তখন অটোমেটিক আমাদের সাজেস্ট করা হয় যে তোমার ফাংশন এই এই জিনিসগুলো চায় তোমাকে এইগুলোই দিতে হবে। এবং এর মাধ্যমে ইরর কমে যায়। নিচে ২টি এক্সাম্পল দেওয়া হলোঃ\n\n```js\n// Example 1\nlet greet: (name: string) =\u003e void;\n\ngreet = (name: string) =\u003e {\n  console.log(`My name is ${name}`);\n};\ngreet(\"John\");\n\n// Example 2\nlet calc: (a: number, b: number, c: string) =\u003e number;\n\ncalc = (numOne: number, numTwo: number, action: string) =\u003e {\n  if (action === \"add\") {\n    return numOne + numTwo;\n  } else {\n    return numOne - numTwo;\n  }\n};\ncalc(5, 10, \"add\");\n```\n\nযখন আমরা Function Signature ব্যাবহার করবো কোনো ফাংশনের জন্য তখন আমাদের আগে ফাংশনটি ডিফাইন করে নিতে হয় সে কি কি কাজ করবে ( মানে তার বডি কি হবে ), সে কোন কোন টাইপের প্যারামিটার গ্রহণ করবে এবং কি রিটার্ন করবে এগুলো দিয়ে। তারপর যখন আমরা সেই ফাংশন ব্যবহার করতে যাবো তখন আমাদেরকে সাজেস্ট করা হবে যে এই ফাংশনে আমাদের এই এই জিনিস দিতে হবে আর না দিলে ইরর দেওয়া হবে আমাদের।\n\n\u003c/br\u003e\n\n# Interface\n\nInterface এর মাধ্যমে ডেটা টাইপ টেম্পলেট তৈরি করতে পারবো। যেটা আমরা চাই অনেক জায়গায় ব্যবহার করতে। এর মাধ্যমে আমাদের বারবার একই টাইপ লিখার প্রয়োজন হবে না আমরা একটি জায়গায় Interface এর সাহায্যে টেম্পলেট তৈরি করে রেখে দিবো তারপর বার বার ব্যবহার করতে পারবো। নিচে তার কোড দেখানো হলোঃ\n\n```js\ninterface IUser {\n  id: number;\n  name: string;\n  age: number;\n}\n\nlet users: IUser[] = [];\n\nlet user1: IUser = {\n  id: 10,\n  name: \"Rahi Ahmed\",\n  age: 19,\n};\n\nlet user2: IUser = {\n  id: 15,\n  name: \"Alamin Ahmed\",\n  age: 20,\n};\n\nusers.push(user1);\nusers.push(user2);\n\nlet printAllUserInfo = (user: IUser) =\u003e {\n  console.log(\n    `User Id is ${user.id}, User Name is ${user.name} and User Age is ${user.age}`\n  );\n};\n\nusers.forEach((user) =\u003e printAllUserInfo(user));\n```\n\nউপরে Interface এর সাহায্যে একটি ডেটা টাইপ টেম্পলেট বানানো হয়েছে যেটা অনেক জায়গায় ব্যবহার করা হয়েছে।\n\n\u003c/br\u003e\n\n# Generic\n\nGeneric ব্যবহার করে আমরা আমাদের ডেটা টাইপ এমন করতে পারবো যে যেকোনো ডেটা দিলেও প্রোগ্রামে কোনো ইরর আসবে না। মানে যখন আমাদের প্রোগ্রামে যেকোনো টাইপের ডেটা আসতে পারে সম্ভাবনা রয়েছে সেক্ষেত্রে আমরা Generic ব্যবহার করতে পারি কারণ এটি আমাদের যেকোনো রকমের ডেটা টাইপ রিসিব করতে সাহায্য করে। নিচে ৩টি example দেওয়া হলোঃ\n\n```js\n// Generic with a single parameter\nfunction userInfo1\u003cx\u003e(user: x) {\n  console.log(user);\n}\n\nuserInfo1(\"Rahi\");\n\n// Generic with nultiple single parameter\nfunction userInfo2\u003cx, y\u003e(user: x, active: y) {\n  if (active) {\n    console.log(user);\n  }\n}\n\nuserInfo2(\"Alamin\", true);\n\n// user generic with arrow function\nconst userInfo3 = \u003cx, y\u003e(user: x, active: y) =\u003e {\n  if (active) {\n    console.log(user);\n  }\n};\n\nuserInfo2(\"Naim\", false);\n```\n\nGeneric ডিফাইন করার জন্য আমাদের `\u003c\u003e` দিতে হবে এবং এর মধ্যে আমাদের যে নাম দেওয়ার সেটা দিবো ( নামটি ডেটা টাইপের জায়গায় ব্যবহার করা হবে )। এবং মাল্টিপলের জন্যও দেখানো হয়েছে।\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasfak00%2Ftypescript-learning","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasfak00%2Ftypescript-learning","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasfak00%2Ftypescript-learning/lists"}