{"id":19645086,"url":"https://github.com/abdulhaseebimran/learning-advanced-typescript","last_synced_at":"2026-01-04T12:02:44.219Z","repository":{"id":247905565,"uuid":"827190755","full_name":"Abdulhaseebimran/Learning-Advanced-Typescript","owner":"Abdulhaseebimran","description":"In this repository, I am learning Advanced TypeScript.","archived":false,"fork":false,"pushed_at":"2024-07-20T05:50:09.000Z","size":44,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-24T10:51:10.684Z","etag":null,"topics":["challenge","coding","development","javascript","learning","nodejs","typescript","web"],"latest_commit_sha":null,"homepage":"","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/Abdulhaseebimran.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":"2024-07-11T07:13:46.000Z","updated_at":"2024-09-06T11:46:47.000Z","dependencies_parsed_at":"2024-11-11T14:35:08.727Z","dependency_job_id":"42d4eeb0-dadc-45a8-9e16-8f16dc249ab8","html_url":"https://github.com/Abdulhaseebimran/Learning-Advanced-Typescript","commit_stats":null,"previous_names":["abdulhaseebimran/learning-advanced-typescript"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdulhaseebimran%2FLearning-Advanced-Typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdulhaseebimran%2FLearning-Advanced-Typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdulhaseebimran%2FLearning-Advanced-Typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdulhaseebimran%2FLearning-Advanced-Typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Abdulhaseebimran","download_url":"https://codeload.github.com/Abdulhaseebimran/Learning-Advanced-Typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244153308,"owners_count":20406995,"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":["challenge","coding","development","javascript","learning","nodejs","typescript","web"],"created_at":"2024-11-11T14:32:01.839Z","updated_at":"2026-01-04T12:02:44.163Z","avatar_url":"https://github.com/Abdulhaseebimran.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Learning Advanced TypeScript Concepts with Examples\n\n### Compile TypeScript to JavaScript\n\nTo compile TypeScript code to JavaScript, you can use the TypeScript compiler (tsc) from the command line. Here's how you can install the TypeScript compiler using npm:\n\n```bash\nnpm install -g typescript\n\ntsc --version\n\ntsc filename.ts // Compile TypeScript file to JavaScript\n\nnode filename.js // Run JavaScript file\n\ntsc filename.ts --watch // Watch mode\n\ntsc --init // Generate tsconfig.json file\n\nnpm init -y // Initialize npm project\n\nnpm install typescript --save-dev // Install TypeScript as a dev dependency\n\nnpm install @types/node --save-dev // Install TypeScript types for Node.js\n\nnpm install ts-node --save-dev // Install ts-node to run TypeScript files directly\n```\n\n### 1. Introduction\n\nTypeScript is a superset of JavaScript that provides optional static typing, interfaces, and classes. It is a powerful tool that helps developers write more reliable and maintainable code. In this article, we will explore some advanced TypeScript concepts with examples to help you take your TypeScript skills to the next level.\n\n### 2. Variables and Types\n\nTypeScript provides several built-in types such as number, string, boolean, object, array, tuple, enum, any, void, and null. Let's take a look at some examples of using these types in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\nvar num: number = 10;\nvar str: string = \"Hello, TypeScript!\";\nvar bool: boolean = true;\nvar obj: object = { name: \"John\", age: 30 };\nvar arr: number[] = [1, 2, 3, 4, 5];\nvar tuple: [string, number] = [\"John\", 30];\nenum Color { Red, Green, Blue };\nvar color: Color = Color.Red;\nvar anyType: any = \"Hello, TypeScript!\";\nvar voidType: void = undefined;\nvar nullType: null = null;\n\n```\n\nIn the above example, we have declared variables of different types in TypeScript. The number type is used for numeric values, the string type is used for text values, the boolean type is used for true/false values, the object type is used for objects, the array type is used for arrays, the tuple type is used for fixed-length arrays with specific types, the enum type is used for a set of named constants, the any type is used for any type of value, the void type is used for functions that do not return a value, and the null type is used for null values.\n\n### 3. Operators and Expressions\n\nTypeScript supports various operators such as arithmetic operators, comparison operators, logical operators, bitwise operators, assignment operators, and conditional operators. Let's take a look at some examples of using these operators in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\nvar num1: number = 10;\nvar num2: number = 20;\n\nvar sum: number = num1 + num2;  // 30\nvar difference: number = num1 - num2; // -10\nvar product: number = num1 * num2; // 200\nvar quotient: number = num1 / num2; // 0.5\nvar remainder: number = num1 % num2; // 10\n\nvar isEqual: boolean = num1 == num2; // false\nvar isNotEqual: boolean = num1 != num2; // true\nvar isGreater: boolean = num1 \u003e num2; // false\nvar isLess: boolean = num1 \u003c num2; // true\nvar isGreaterOrEqual: boolean = num1 \u003e= num2; // false\nvar isLessOrEqual: boolean = num1 \u003c= num2; // true\nvar isLogicalAnd: boolean = true \u0026\u0026 false; // false\nvar isLogicalOr: boolean = true || false; // true\nvar isLogicalNot: boolean = !true; // false\nvar bitwiseAnd: number = num1 \u0026 num2; // 0\nvar bitwiseOr: number = num1 | num2; // 30\nvar bitwiseXor: number = num1 ^ num2; // 30\nvar bitwiseNot: number = ~num1; // -11 or -num1-1\nvar leftShift: number = num1 \u003c\u003c 1;   // 20\nvar rightShift: number = num1 \u003e\u003e 1; // 5\nvar unsignedRightShift: number = num1 \u003e\u003e\u003e 1; // 5\n\nvar assignment: number = 10; \nassignment += 5; // 15\nassignment -= 5; // 10\nassignment *= 5; // 50\nassignment /= 5; // 10\nassignment %= 5; // 0\nassignment \u0026= 5; // 0\nassignment |= 5; // 5\n \nvar condition: number = num1 \u003e num2 ? num1 : num2; // 20 ternary operator or conditional operator\n```\n\n### 4. String Manipulation and Template Literals\n\nTypeScript provides various methods for manipulating strings such as concatenation, substring, length, indexOf, lastIndexOf, charAt, charCodeAt, toUpperCase, toLowerCase, trim, split, replace, and match. Let's take a look at some examples of using these methods in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\nvar str1: string = \"Hello\";\nvar str2: string = \"TypeScript\";\n\nvar concat: string = str1 + \" \" + str2;  // \"Hello TypeScript\"\nvar substring: string = str1.substring(1, 3);  // \"el\"\nvar length: number = str1.length;  // 5\nvar indexOf: number = str1.indexOf(\"l\"); // 2\nvar lastIndexOf: number = str1.lastIndexOf(\"l\"); // 3\nvar charAt: string = str1.charAt(1);  // \"e\"\nvar charCodeAt: number = str1.charCodeAt(1); // 101\nvar toUpperCase: string = str1.toUpperCase(); // \"HELLO\"\nvar toLowerCase: string = str1.toLowerCase(); // \"hello\"\nvar trim: string = \"  Hello  \".trim(); // \"Hello\"\nvar split: string[] = \"Hello,TypeScript\".split(\",\"); // [\"Hello\", \"TypeScript\"]\nvar replace: string = \"Hello, TypeScript\".replace(\"Hello\", \"Hi\"); // \"Hi, TypeScript\"\nvar match: RegExpMatchArray | null = \"Hello, TypeScript\".match(/Hello/); // [\"Hello\"]\n```\n\n### 5. IF-ELSE-IF Statements and Nested IF Statements\n\nTypeScript provides if-else-if statements and nested if statements for conditional execution of code blocks. Let's take a look at some examples of using if-else-if statements and nested if statements in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\nvar num: number = 10;\n\nif (num \u003e 0) {\n    console.log(\"Positive number\");\n} else if (num \u003c 0) {\n    console.log(\"Negative number\");\n} else {\n    console.log(\"Zero\");\n}\n\nvar num1: number = 10;\nvar num2: number = 20;\n\nif (num1 \u003e num2) {\n    console.log(\"num1 is greater than num2\");\n} else {\n    if (num1 \u003c num2) {\n        console.log(\"num1 is less than num2\");\n    } else {\n        console.log(\"num1 is equal to num2\");\n    }\n}\n``` \n\n### 6. Functions and Arrow Functions\n\nTypeScript provides functions and arrow functions for defining reusable blocks of code. Functions can have parameters and return values. Arrow functions are a shorthand syntax for defining functions. Let's take a look at some examples of using functions and arrow functions in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\nfunction add(num1: number, num2: number): number {\n    return num1 + num2;\n}\n\nvar sum: number = add(10, 20); // 30\n\nvar subtract = function (num1: number, num2: number): number {\n    return num1 - num2;\n}\n\nvar difference: number = subtract(20, 10); // 10\n\nsingle line arrow function\n\nvar multiply = (num1: number, num2: number): number =\u003e num1 * num2;\n\n```\n\n### 7. Var vs Let vs Const\n\nTypeScript provides var, let, and const keywords for declaring variables. The var keyword is function-scoped, the let keyword is block-scoped, and the const keyword is block-scoped and cannot be reassigned. Let's take a look at some examples of using var, let, and const in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\nfunction varExample() {\n    if (true) {\n        var num: number = 10;\n    }\n    console.log(num); // 10\n}\n\nfunction letExample() {\n    if (true) {\n        let num: number = 10;\n    }\n    console.log(num); // Error: Cannot find name 'num'\n}\n\nfunction constExample() {\n    const num: number = 10;\n    num = 20; // Error: Cannot assign to 'num' because it is a constant\n}\n```\n\n### 8. Arrays and Array Methods\n\nTypeScript provides arrays and array methods for working with collections of elements. Arrays can be created using square brackets [] or the Array constructor. Let's take a look at some examples of using arrays and array methods in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\nvar numbers: number[] = [1, 2, 3, 4, 5];\nvar colors: Array\u003cstring\u003e = [\"Red\", \"Green\", \"Blue\"];\n\nvar firstNumber: number = numbers[0]; // 1\nvar lastColor: string = colors[colors.length - 1]; // \"Blue\"\n\nnumbers.push(6); // [1, 2, 3, 4, 5, 6]\ncolors.pop(); // [\"Red\", \"Green\"]\n\nnumbers.unshift(0); // [0, 1, 2, 3, 4, 5, 6]\ncolors.shift(); // [\"Green\", \"Blue\"]\n\nvar slicedNumbers: number[] = numbers.slice(1, 4); // [1, 2, 3] start index, end index (end index not included)\nvar splicedNumbers: number[] = numbers.splice(1, 2); // [1, 2] start index, number of elements to remove\n\nvar sortedNumbers: number[] = numbers.sort((a, b) =\u003e a - b); // [0, 3, 4, 5, 6]\nvar reversedNumbers: number[] = numbers.reverse(); // [6, 5, 4, 3, 0]\n\nvar filteredNumbers: number[] = numbers.filter(num =\u003e num \u003e 3); // [4, 5, 6]\nvar mappedNumbers: number[] = numbers.map(num =\u003e num * 2); // [12, 10, 8, 6, 0]\n\nvar sumOfNumbers: number = numbers.reduce((acc, num) =\u003e acc + num, 0); // 18\nvar maxNumber: number = numbers.reduce((max, num) =\u003e Math.max(max, num), numbers[0]); // 6\n\nvar hasNumber: boolean = numbers.includes(3); // true\nvar indexOfNumber: number = numbers.indexOf(3); // 3\n\nvar joinedNumbers: string = numbers.join(\", \"); // \"6, 5, 4, 3, 0\"\n```\n\n### 9. Loops and Iterators\n\nTypeScript provides for loops, while loops, do-while loops, and iterators for iterating over arrays and objects. Let's take a look at some examples of using loops and iterators in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\nvar numbers: number[] = [1, 2, 3, 4, 5];\n\nfor (var i = 0; i \u003c numbers.length; i++) {\n    console.log(numbers[i]);\n}\n\nvar index: number = 0;\nwhile (index \u003c numbers.length) {\n    console.log(numbers[index]);\n    index++;\n}\n\nvar index: number = 0;\n\ndo {\n    console.log(numbers[index]);\n    index++;\n} while (index \u003c numbers.length);\n\nfor (var num of numbers) {\n    console.log(num);\n}\n\nfor (var index in numbers) {\n    console.log(numbers[index]);\n}\n```\n\n### 10. Prefix and Postfix Operators\n\nTypeScript provides prefix and postfix operators such as ++ and -- for incrementing and decrementing variables. Let's take a look at some examples of using prefix and postfix operators in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\nvar num: number = 10;\n\nvar prefixIncrement: number = ++num; // 11\nvar postfixIncrement: number = num++; // 11\n\nvar prefixDecrement: number = --num; // 10\nvar postfixDecrement: number = num--; // 10\n```\n\n### 11. Objects and Object Methods\n\nTypeScript provides objects and object methods for working with key-value pairs. Objects can be created using curly braces {} or the Object constructor. Let's take a look at some examples of using objects and object methods in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\nvar person: { name: string, age: number } = { name: \"John\", age: 30 };\n\nvar name: string = person.name; // \"John\"\n\nperson.age = 40;\n\nvar keys: string[] = Object.keys(person); // [\"name\", \"age\"]\n\nvar values: any[] = Object.values(person); // [\"John\", 40]\n\nvar entries: [string, any][] = Object.entries(person); // [[\"name\", \"John\"], [\"age\", 40]]\n\nvar hasName: boolean = person.hasOwnProperty(\"name\"); // true\n\nvar isEnumerable: boolean = person.propertyIsEnumerable(\"name\"); // true\n\nvar personCopy: { name: string, age: number } = { ...person }; // { name: \"John\", age: 40 }\n```\n\n### 12. Asynchronous and Synchronous Code \n\nTypeScript provides asynchronous and synchronous code execution using callbacks, promises, async/await, and generators. Asynchronous code allows you to perform tasks concurrently without blocking the main thread. Let's take a look at some examples of using asynchronous and synchronous code in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\n// Callbacks\n\nfunction fetchData(callback: (data: any) =\u003e void) {\n    setTimeout(() =\u003e {\n        callback({ name: \"John\", age: 30 });\n    }, 1000);\n}\n\nfetchData((data) =\u003e {\n    console.log(data);\n});\n\n// Promises\n\nfunction fetchData(): Promise\u003cany\u003e {\n    return new Promise((resolve, reject) =\u003e {\n        setTimeout(() =\u003e {\n            resolve({ name: \"John\", age: 30 });\n        }, 1000);\n    });\n}\n\nfetchData().then((data) =\u003e {\n    console.log(data);\n});\n\n// Async/Await\n\nasync function fetchData() {\n    return new Promise((resolve, reject) =\u003e {\n        setTimeout(() =\u003e {\n            resolve({ name: \"John\", age: 30 });\n        }, 1000);\n    });\n}\n\nasync function getData() {\n    const data = await fetchData();\n    console.log(data);\n}\n\ngetData();\n\n// Generators\n\nfunction* generateNumbers() {\n    yield 1;\n    yield 2;\n    yield 3;\n}\n\nconst numbers = generateNumbers();\n\nconsole.log(numbers.next().value); // 1\n\nconsole.log(numbers.next().value); // 2\n\nconsole.log(numbers.next().value); // 3\n```\n\n### 13. Import and Export Modules\n\nTypeScript provides import and export statements for modularizing code into separate files. Modules allow you to organize code into reusable components and share code between files. Let's take a look at some examples of using import and export statements in TypeScript.\n\n```typescript\n\n--Example code goes here--\n\n// math.ts\n\nexport function add(num1: number, num2: number): number {\n    return num1 + num2;\n}\n\nexport function subtract(num1: number, num2: number): number {\n    return num1 - num2;\n}\n\n// app.ts\n\nimport { add, subtract } from \"./math\";\n\nvar sum: number = add(10, 20); // 30\n\nvar difference: number = subtract(20, 10); // 10\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdulhaseebimran%2Flearning-advanced-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdulhaseebimran%2Flearning-advanced-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdulhaseebimran%2Flearning-advanced-typescript/lists"}