{"id":21445854,"url":"https://github.com/developer-sujon/typescript-101","last_synced_at":"2025-03-17T01:23:27.861Z","repository":{"id":128002938,"uuid":"570940966","full_name":"developer-sujon/typescript-101","owner":"developer-sujon","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-06T20:23:14.000Z","size":37,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T11:20:05.886Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/developer-sujon.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}},"created_at":"2022-11-26T16:21:11.000Z","updated_at":"2024-03-29T11:25:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"39c48034-1214-443c-ba6c-5034f78fafde","html_url":"https://github.com/developer-sujon/typescript-101","commit_stats":null,"previous_names":["developer-sujon/typescript-101"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-sujon%2Ftypescript-101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-sujon%2Ftypescript-101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-sujon%2Ftypescript-101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-sujon%2Ftypescript-101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developer-sujon","download_url":"https://codeload.github.com/developer-sujon/typescript-101/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243955729,"owners_count":20374374,"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","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":[],"created_at":"2024-11-23T02:39:26.447Z","updated_at":"2025-03-17T01:23:27.843Z","avatar_url":"https://github.com/developer-sujon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TypeScript Documentation\n\n- prerequisities: Javascript\n\n## 1. Introduction\n\n### 1.1 What is TypeScript?\n\n- In a simple words, Types + JavaScript = TypeScript\n- It is a superset of JS\n- developed and maintained by Microsoft\n\n### 1.2 Why TypeScript?\n\n- JS Check types in run time while typescript add static typing to JS so we can handle errors before running the program.\n- increase readability and code quality\n- popular JS libraray Angular use TypeScript.\n- It can be used in both: client and server side.\n- Intellisense IDE Support while coding: code completion, content assist and code hinting\n\n### 1.3 TS Versions\n\n- earlier versions\n- TypeScript 1.0 October 2014\n- TypeScript 2.0 September 2016\n- TypeScript 3.0 July 2018\n- TypeScript 4.0 - latest release August 2020\n\n### 1.4 Example:\n\n```js\n// index.js\n// without typescript\nfunction addNumbers(num1, num2) {\n  console.log(num1 + num2);\n}\n\naddNumbers(20, 30);\naddNumbers(20, \"30\");\n\n// with typescript\n// without typescript\nfunction addNumbers(num1: number, num2: number) {\n  console.log(num1 + num2);\n}\n\naddNumbers(20, 30); // no error\naddNumbers(20, \"30\"); // error\n\n// without typescript\nlet x;\nx = 20; // correct\nx = \"Mohammad\"; // correct\nx = true; // correct\nx = [10, 20]; // correct\n\n// with typescript\nlet x: number;\nx = 20; // correct\nx = \"20\"; // Not correct\nx = true; // Not correct\nx = [10, 20]; // Not correct\n```\n\n## 2. Environment setup\n\n### 2.1 Install and use typescript\n\n- Text Editor: VS Code\n- Install node \u0026 typescript\n\n```js\n     local installation: npm intsall typescript --save-dev\n     Or\n     global installation: npm install -g typescript\n```\n\n- check various versions:\n\n  ```js\n    node --version\n    npm --version\n    tsc --version\n  ```\n\n### 2.2 How does it work?\n\n- index.ts -\u003e tsc index.ts -\u003e index.js\n\n## 3. First typescript program\n\n### 3.1 Example\n\n- typescript file extension is .ts\n- Run the following program using `tsc index.ts` command and then `node index.js`\n\n  ```js\n  // index.ts\n\n  // without ts\n  function addNumbers(num1, num2) {\n    console.log(num1 + num2);\n  }\n\n  addNumbers(20, 30);\n  addNumbers(20, \"30\");\n\n  // correct one using ts\n  function addNumbers(num1: number, num2:number) {\n    console.log(num1 + num2);\n  }\n\n  addNumbers(20, 30);\n  addNumbers(20, \"30\");\n\n\n  let num1 = 20;\n  console.log(num1);\n\n  let name= \"Mohammad Sujon\";\n  name. //intellisense support will be here\n  ```\n\n- some compiler flag\n  - tsc index.js --watch\n\n## 4. Built-in data types\n\n- Any (super type)\n  - built in types: number, string, boolean, void, null, undefined etc.\n  - user-defined types: Arrays, Enums, Classes, interfaces etc.\n  - for avoiding typescript in entire file:\n    `// @ts-nocheck`\n- example of built-in types\n\n  ```js\n  // string TYPE EXAMPLE\n  let firstName: string;\n  let lastName: string;\n  let fullName: string;\n  let occupation: string;\n\n  firstName = \"Mohammad\";\n  lastName = \" Sujon\";\n  occupation = \"student\";\n\n  console.log(firstName);\n  console.log(lastName);\n  console.log(occupation);\n\n  // toUpperCase()\n  console.log(firstName.toUpperCase());\n\n  // toLowerCase()\n  console.log(firstName.toLowerCase());\n\n  // split([separator[,limit]])\n  console.log(fullName.split(\" \"));\n\n  // concat()\n  fullName = firstName.concat(lastName);\n\n  console.log(`User ${fullName} is a ${occupation}`);\n\n  let userName: string;\n  let id: number;\n  let isLoggedIn: boolean;\n\n  console.log(userId.toLowerCase()); // error here\n\n  function display(): void {\n    console.log(\"Hi I am display\");\n  }\n  display();\n\n  // optional properties and undefined type\n  const printFullName = (firstName: string, lastName?: string) =\u003e {\n    const fullName = firstName + lastName;\n    if (lastName !== undefined) {\n      console.log(fullName);\n    }\n  };\n\n  printFullName(\"Mohammad\", \" Sujon\");\n  printFullName(\"Mohammad\");\n  ```\n\n- inferred Typing\n\n```js\nlet userName = \"Sujon\"; // data type inferred as string\n```\n\n## 5. User-defined data types\n\n### 5.1 Union Type\n\n- Union Type - more than one type for variable or function parameter\n\n  ```js\n  let userId: string | number;\n\n  // userId = 101; // no error\n  // userId = \"101\"; // no error\n  // userId = true; // error\n\n  function userIdDataType(userId: string | number) {\n    console.log(typeof userId);\n  }\n\n  userIdDataType(\"123\"); // no error\n  userIdDataType(123); // no error\n  // userIdDataType(true); // error\n  ```\n\n### 5.2 Array\n\n- Array Type- similar data\n\n  ```js\n  // let users = [\"Sujon\", \"rabu\", \"pinky\"];\n\n  // let users: string[];\n  // users = [\"Sujon\", \"rabu\", \"pinky\"];\n\n  let users: Array\u003cstring\u003e;\n  users = [\"Sujon\", \"rabu\", \"pinky\"];\n\n  // for (let index = 0; index \u003c users.length; index++) {\n  //   const element = users[index];\n  //   console.log(element);\n  // }\n\n  // users.forEach((element) =\u003e {\n  //   console.log(element);\n  // });\n\n  users.sort();\n  console.log(users);\n\n  users.push(\"limon\");\n  console.log(users);\n\n  users.pop();\n  console.log(users);\n\n  users.unshift(\"milton\");\n  console.log(users);\n\n  users.shift();\n  console.log(users);\n\n  // multi-types array\n  // let users: (number | string)[];\n  // users = [10, \"Sujon\", 25, 35, \"Sujon\"];\n  ```\n\n### 5.3 Tuple Type\n\n- Tuple Type - Mixed data type\n\n  ```js\n  let users: [number, String];\n  users = [101, \"Sujon\"];\n\n  console.log(users);\n  console.log(users[0]);\n  console.log(users[1]);\n\n  users.push(102, \"sakib\");\n  console.log(users);\n  ```\n\n### 5.4 Enum Type\n\n- Enum Type: no duplicate data, helps to store constants\n\n  ```js\n  // enum example\n  // helps us to store constants\n\n  // numeric enum\n  enum UserRequest {\n    ReadData,\n    // ReadData = 2,\n    SaveData,\n    UpdateData,\n  }\n\n  console.log(UserRequest);\n  console.log(UserRequest.ReadData);\n  console.log(UserRequest.SaveData);\n\n  // string enum\n  enum UserRequest {\n    ReadData = \"READ_DATA\",\n    // ReadData = 2,\n    SaveData = \"SAVE_DATA\",\n    UpdateData = \"UPDATE_DATA\",\n  }\n\n  console.log(UserRequest);\n  console.log(UserRequest.ReadData);\n  console.log(UserRequest.SaveData);\n  console.log(UserRequest[\"UpdateData\"]);\n\n  // Heterogeneous enum\n    enum User {\n    id = 101,\n    name = \"Mohammad\",\n    }\n\n  ```\n\n### 5.5 any Type\n\n- any Type: if you have no knowledge about the variable type use any type: user input values\n\n  ```js\n  let password: any;\n  let passwords: any[];\n  ```\n\n### 5.6 object Type\n\n- object Type: can store value as key value pair\n\n  ```js\n  let names: object;\n  names = { name1: \"Sujon\" };\n  console.log(names);\n\n  let users: object[];\n  users = [];\n\n  let user1: { userName: string, userId: number };\n  user1 = { userName: \"Sujon\", userId: 101 };\n  users.push(user1);\n\n  let user2: { userName: string, userId: number };\n  user2 = { userName: \"rabu\", userId: 102 };\n\n  users.push(user2);\n\n  for (const key in users) {\n    console.log(users[key][\"userName\"]);\n  }\n  ```\n\n### 5.7 Custom Type\n\n- custom Type: you can create your own type\n\n  ```js\n  type User = { userName: string, userId: number };\n\n  let users: User[];\n  users = [];\n\n  let user1: User;\n  user1 = { userName: \"Sujon\", userId: 101 };\n  users.push(user1);\n\n  let user2: User;\n  user2 = { userName: \"rabu\", userId: 102 };\n  users.push(user2);\n\n  let user3: User;\n  user3 = { userName: \"lucky\", userId: 103 };\n  users.push(user3);\n\n  // console.log(users);\n\n  type RequestType = \"GET\" | \"POST\";\n  let getRequest: RequestType;\n  getRequest = \"GET\";\n\n  function requestHandler(requestType: RequestType) {\n    console.log(requestType);\n  }\n  requestHandler(\"GET\");\n  ```\n\n## 6. class\n\n### 6.1 class basics and objects\n\n- class can have constructor, properties, methods\n- create object - let objectName = new className();\n- Example\n\n  ```js\n  class User {\n    // properties, methods, constructor\n    userName: string;\n    age: number;\n\n    constructor(userName: string, age: number) {\n      this.userName = userName;\n      this.age = age;\n    }\n\n    display(): void {\n      console.log(`username: ${this.userName}, age: ${this.age}`);\n    }\n  }\n\n  let user1 = new User(\"Mohammad Sujon\", 25);\n  user1.display();\n\n  let user2 = new User(\"Rabeya Sujon\", 31);\n  user2.display();\n  ```\n\n### 6.2 Inheritance\n\n- inheritance helps us to acquire properties of one class to another\n\n```js\nclass User {\n  userName: string;\n  age: number;\n\n  constructor(userName: string, age: number) {\n    this.userName = userName;\n    this.age = age;\n  }\n\n  display(): void {\n    console.log(`username: ${this.userName}, age: ${this.age}`);\n  }\n}\n\nclass Student extends User {\n  studentId: number;\n\n  constructor(userName: string, age: number, studentId: number) {\n    super(userName, age);\n    this.studentId = studentId;\n  }\n  display(): void {\n    console.log(\n      `username: ${this.userName}, age: ${this.age}, id: ${this.studentId}`\n    );\n  }\n}\n\nlet student1 = new Student(\"keya\", 31, 1302020015);\nstudent1.display();\n\nlet user1 = new User(\"Mohammad Sujon\", 25);\nuser1.display();\n\n// let user2 = new User(\"Rabeya Sujon\", 31);\n// user2.display();\n```\n\n### 6.3 Abstract class\n\n- abstraction helps us to hide the implementation of something\n- class declared with abstract keyword\n- object can not be created from abstract class\n- if a class extends abstract class; it must inherit all the abstract methods\n- example\n\n  ```js\n  abstract class User {\n    userName: string;\n    age: number;\n\n    constructor(userName: string, age: number) {\n      this.userName = userName;\n      this.age = age;\n    }\n\n    abstract display(): void;\n  }\n\n  class Student extends User {\n    studentId: number;\n\n    constructor(userName: string, age: number, studentId: number) {\n      super(userName, age);\n      this.studentId = studentId;\n    }\n    display(): void {\n      console.log(\n        `username: ${this.userName}, age: ${this.age}, id: ${this.studentId}`\n      );\n    }\n  }\n\n  let student1 = new Student(\"keya\", 31, 1302020015);\n  student1.display();\n\n  ```\n\n### 6.4 Encapsulation and access modifiers\n\n- 4 key principles of Object Oriented Programming (OOP): Inheritance, Abstraction, Encapsulation, Polymorphism.\n- Encapsulation helps us to manage the visibility of class members.\n- Access modifiers: public, private, protected, readonly\n- example\n\n  ```js\n    // public, private, protected, readonly\n    class User {\n      readonly userName: string;\n      public age: number;\n\n      constructor(userName: string, age: number) {\n        this.userName = userName;\n        this.age = age;\n      }\n\n      display(): void {\n        console.log(`username: ${this.userName}, age: ${this.age}`);\n      }\n    }\n\n    class Student extends User {\n      private studentId: number;\n\n      constructor(userName: string, age: number, studentId: number) {\n        super(userName, age);\n        this.studentId = studentId;\n      }\n      display(): void {\n        console.log(\n          `username: ${this.userName}, age: ${this.age}, id: ${this.studentId}`\n        );\n      }\n\n      setStudentId(studentId: number): void {\n        this.studentId = studentId;\n      }\n\n      getStudentId(): number {\n        return this.studentId;\n      }\n    }\n\n    let student1 = new Student(\"keya\", 31, 1302020015);\n    student1.setStudentId(1302020017);\n    console.log(student1.getStudentId());\n    // student1.display();\n\n    let user1 = new User(\"robi\", 23);\n    console.log(user1.userName);\n    // user1.display();\n\n  ```\n\n## 7. Interface\n\n- interface\n\n### Example 1\n\n```js\n// without interface\nlet users: {\n  id: number,\n  name: string,\n  age: number,\n}[] = [];\n\nlet user1: {\n  id: number,\n  name: string,\n  age: number,\n} = {\n  id: 1,\n  name: \"Mr. Potato\",\n  age: 32,\n};\n\nlet user2: {\n  id: number,\n  name: string,\n  age: number,\n} = { id: 2, name: \"Ms. Tomato\", age: 21 };\n\nusers.push(user1);\nusers.push(user2);\n\nconst printUserInfo = (user: { id: number, name: string, age: number }) =\u003e {\n  console.log(`userid = ${user.id}, name = ${user.name}, age = ${user.age}`);\n};\n\nusers.forEach((user) =\u003e printUserInfo(user));\n\n// with interface\ninterface User {\n  id: number;\n  name: string;\n  age: number;\n}\n\nlet users: User[] = [];\n\nlet user1: User = { id: 1, name: \"Mr. Potato\", age: 32 };\nlet user2: User = { id: 2, name: \"Ms. Tomato\", age: 21 };\n\nusers.push(user1);\nusers.push(user2);\n\nconst printUserInfo = (user: User) =\u003e {\n  console.log(`userid = ${user.id}, name = ${user.name}, age = ${user.age}`);\n};\n\nusers.forEach((user) =\u003e printUserInfo(user));\n```\n\n### Example 2\n\n````js\n  // class implements interface\n  interface UserFormatter {\n    formatUser: () =\u003e string;\n  }\n\n    export class User implements UserFormatter {\n      constructor(private fullName: string, private age: number) {}\n\n      formatUser = () =\u003e {\n        return `name: ${this.fullName}, age: ${this.age}`;\n      };\n    }\n\n    let user = new User(\"Mr. Potato\", 32);\n    console.log(user);\n    console.log(user.formatUser());\n  ```\n\n## 8. Interface vs type\n\n- both are nearly similar in most cases.\n- However, Adding new filed after creation is possible for an interface but not possible for a type.\n\n### Example 1\n\n```\n    interface Color {\n      title: string;\n    }\n    interface Color {\n      text: string;\n    }\n    // now class A has access to title and string\n    class A implements Color {\n      title: string;\n      text: string;\n    }\n```\n- both can be extended\n### Example 2\n\n```\ninterface IFUser {\n  name: string;\n}\n\ninterface IFStudent extends IFUser {\n  student_id: string;\n}\n\n// Extending a type via intersections\ntype User = {\n  name: string;\n};\n\ntype Student = User \u0026 {\n  student_id: string;\n};\n\nlet s1: Student;\ns1 = {\n  name: \"Mohammad Sujon\",\n  student_id: \"1302\",\n};\n```\n\n### Example 3\n\n```\ninterface IFUser {\n  name: string;\n}\n\ninterface IFStudent extends IFUser {\n  student_id: string;\n}\n\nclass Student implements IFStudent {\n  name: string;\n  student_id: string;\n\n  constructor(name, student_id) {\n    this.name = name;\n    this.student_id = student_id;\n  }\n\n  printDetails = () =\u003e {\n    return `${this.name}, ${this.student_id}`;\n  };\n}\n\nconst s1 = new Student(\"Mohammad Sujon\", \"1302020017\");\nconsole.log(s1.printDetails());\n\n```\n\n## 9. tsconfig\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```\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## 10. function signature\n\n- example\n\n  ```js\n  // function signature\n  let userInfo1: () =\u003e void;\n  let userInfo2: (name: string) =\u003e void;\n  let userInfo3: (name: string) =\u003e string;\n\n  userInfo1 = () =\u003e {\n    console.log(\"Mohammad Sujon is 32 years old\");\n  };\n\n  userInfo2 = (name: string) =\u003e {\n    console.log(`${name} is 32 years old`);\n  };\n\n  userInfo3 = (name: string): string =\u003e {\n    return `${name} is 32 years old`;\n  };\n\n  userInfo1();\n  userInfo2(\"Mohammad Sujon\");\n  console.log(userInfo3(\"Mohammad Sujon\"));\n  ```\n\n## 11. Creating types from types\n\n### Generics Example -\n\n```js\n// make components reusable\n// make components flexible\n// C# and java have this generic feature\n// generic allows us to create own types\n\nconst displayValue1 = (x) =\u003e {\n  return x;\n};\n// no auto suggestion for any type\n// displayValue1(20).;\n\nconst displayValue2 = \u003cT\u003e(x: T): T =\u003e {\n  return x;\n};\n// now we will have auto suggestion\n// displayValue2(20).\n\nconst addBefore = \u003cT1\u003e(numbers: T1[], x: T1) =\u003e {\n  return [x, ...numbers];\n};\n\nlet numbers = [20, 30, 40];\nconsole.log(addBefore(numbers, 10));\n\nlet countries = [\"bangladesh\", \"pakistan\", \"India\"];\nconsole.log(addBefore(countries, \"Australia\"));\n```\n\n### keyof type Example -\n\n### typeof type Example -\n\n```js\nlet firstName: string;\nlet lastName: typeof firstName;\n```\n\n### Conditional type Example -\n\n```js\ninterface Animal {\n  live(): void;\n}\ninterface Dog extends Animal {\n  woof(): void;\n}\n\ntype Example1 = Dog extends Animal ? number : string;\n\ntype Example1 = number\n\ntype Example2 = RegExp extends Animal ? number : string;\n\ntype Example2 = string\n```\n\n## 12. Narrowing\n\n### Type guards Example\n\n```js\n// type guards with typeof\n// typeof variable === string/number/boolean/symbol/undefined/object/function\nconst printAllTodos = (todos: string[] | null) =\u003e {\n  if (typeof todos === \"object\") {\n    todos.map((todo) =\u003e console.log(todo));\n  } else {\n    console.log(\"todos are empty\");\n  }\n};\n```\n\n### Truthiness narrowing Example\n\n```js\n// false -\u003e 0,NaN,\"\" (the empty string), 0n (the bigint version of zero), null, undefined\nconst printAllTodos = (todos: string[] | null) =\u003e {\n  if (todos) {\n    todos.map((todo) =\u003e console.log(todo));\n  } else {\n    console.log(\"todos are empty\");\n  }\n};\n\nconst todos1 = null;\nconst todos2 = [\"todo1\", \"todo2\", \"todo3\"];\nprintAllTodos(todos1);\nprintAllTodos(todos2);\n```\n\n### Equality narrowing Example\n\n```js\n// == , ===, !=, !=== helps to narrow types\n```\n\n## 13. DOM Manipulation with typescript\n\n### Example1\n\n```html\n\u003cbody\u003e\n  \u003cinput type=\"number\" class=\"input1\" placeholder=\"Enter any number\" /\u003e\n  \u003cinput type=\"number\" class=\"input2\" placeholder=\"Enter any number\" /\u003e\n  \u003cbutton\u003eAdd\u003c/button\u003e\n  \u003cp\u003e\u003c/p\u003e\n  \u003cscript src=\"./index.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n```js\nconst number1 = document.querySelector(\".input1\") as HTMLInputElement;\nconst number2 = document.querySelector(\".input2\") as HTMLInputElement;\nconst addButton = document.querySelector(\"button\")!;\nconst result = document.querySelector(\"p\")!;\n\naddButton?.addEventListener(\"click\", () =\u003e {\n  const sum = Number(number1.value) + Number(number2.value);\n  result.textContent = `The result is ${sum}`;\n});\n```\n\n### Example2\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003ewelcome\u003c/h1\u003e\n    \u003cform class=\"user-form\"\u003e\n      \u003cdiv\u003e\n        \u003clabel for=\"username\"\u003eUsername: \u003c/label\u003e\n        \u003cinput type=\"text\" id=\"username\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003clabel for=\"useremail\"\u003eemail: \u003c/label\u003e\n        \u003cinput type=\"email\" id=\"useremail\" /\u003e\n      \u003c/div\u003e\n\n      \u003cdiv\u003e\n        \u003clabel for=\"country\"\u003eCountry: \u003c/label\u003e\n        \u003cselect name=\"country\" id=\"country\"\u003e\n          \u003coption value=\"bangladesh\"\u003ebangladesh\u003c/option\u003e\n          \u003coption value=\"india\"\u003eindia\u003c/option\u003e\n        \u003c/select\u003e\n      \u003c/div\u003e\n\n      \u003cdiv\u003e\n        \u003clabel for=\"feedback\"\u003efeedback: \u003c/label\u003e\n        \u003ctextarea name=\"feedback\" id=\"feedback\" cols=\"30\" rows=\"5\"\u003e\u003c/textarea\u003e\n      \u003c/div\u003e\n      \u003cbutton type=\"submit\"\u003esave\u003c/button\u003e\n    \u003c/form\u003e\n    \u003cscript src=\"../dist/index.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```ts\nconst form = document.querySelector(\".user-form\") as HTMLFormElement;\nconsole.log(form);\n\nconst userNameInput = document.querySelector(\"#username\") as HTMLInputElement;\nconsole.log(userNameInput);\n\nconst userEmailInput = document.querySelector(\"#useremail\") as HTMLInputElement;\nconsole.log(userEmailInput);\n\nconst userCountrySelect = document.querySelector(\n  \"#country\"\n) as HTMLSelectElement;\nconsole.log(userCountrySelect);\n\nconst userFeedback = document.querySelector(\"#feedback\") as HTMLTextAreaElement;\nconsole.log(userFeedback);\n\nform.addEventListener(\"submit\", (e: Event) =\u003e {\n  e.preventDefault();\n  let userData = {\n    userName: userNameInput.value,\n    userEmail: userEmailInput.value,\n    userCountry: userCountrySelect.value,\n    userFeedback: userFeedback.value,\n  };\n  console.log(userData);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeveloper-sujon%2Ftypescript-101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeveloper-sujon%2Ftypescript-101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeveloper-sujon%2Ftypescript-101/lists"}