├── 1. Installation └── important.txt ├── 10. Generics ├── 1. first-generic.ts ├── 2. second-generic.ts ├── 3. Generics-With-Multiple-Types.ts ├── 4. Type-Constraints.ts ├── 5. generic-classes.ts └── README.md ├── 11. Type Narrowing ├── 1. type-guards.ts ├── 2. instanceof-operator.ts └── 3. Intersection types.ts ├── 12. DOM ├── index.html ├── index.ts └── tsconfig.json ├── 13. Axios ├── package-lock.json ├── package.json ├── src │ ├── index.ts │ └── todo.d.ts └── tsconfig.json ├── 14. Express ├── package-lock.json ├── package.json ├── src │ └── index.ts └── tsconfig.json ├── 2. Type Annotation Basics ├── 1. String.ts ├── 2. Numbers.ts ├── 3. Boolean.ts ├── 4. Type-Inference.ts ├── 5. Any-Type.ts └── README.md ├── 3. Functions ├── 1. Parameter-Annotations.ts ├── 2. Default-Parameters.ts ├── 3. Return-Annotations.ts ├── 4. Void.ts ├── 5. Never.ts └── Learn │ ├── 1. Func-Parameter.md │ ├── 2. Default-Params.md │ ├── 3. Return-Annotation.md │ ├── 4. Void.md │ └── 5. Never.md ├── 4. Array Types ├── 1. Array-Types.ts ├── 2. Alternate-Syntax.ts ├── 3. Multidimensional-Arrays.ts └── README.md ├── 5. Object Types ├── 1. Objects-Types.ts ├── 2. Type-Aliases.ts ├── 3. Optional-Properties.ts ├── 4. Readonly.ts ├── 5. Intersection-Types.ts └── Learn │ ├── 1. Object-Types.md │ ├── 2. Type-Aliases.md │ ├── 3. Optional-Prop.md │ ├── 4. Readonly.md │ └── 5. Intersection-Types.md ├── 6. Union Types ├── 1. Union.ts ├── 3. Literal-Types.ts └── Learn │ ├── 1. Unions.md │ ├── 2. Type-Narrowing.md │ └── 3. Litral-types.md ├── 7. Tuples and Enums ├── 1. Tuples.ts ├── 2. Enums.ts └── README.md ├── 8. Classes ├── 1. annotation-classes.ts ├── 2. class-field.ts ├── 3. readonly-properties.ts ├── 4. public-modifier.ts ├── 5. private-modifier.ts ├── 6. parameters-properties-shorthand.ts ├── 7. Getters-n-Setters.ts ├── 8. protected.ts └── Learn │ ├── 1. classes-annotation.md │ ├── 2. Access-modifier.md │ └── 3. Getters-n-Setters.md ├── 9. Interfaces ├── 1. Interface.ts ├── 2. Interface for function.ts ├── 3. Interface with method.ts ├── 4. Extending Interface.ts ├── 5. Interface for classes.ts ├── 6. interface extension.ts └── README.md ├── README.md └── thumb.png /1. Installation/important.txt: -------------------------------------------------------------------------------- 1 | 1. VSC 2 | 2. Node.js 3 | 3. npm i -g typescript 4 | 4. npm install -g ts-node 5 | 5. Install Code Runner 6 | 6. Make a shortcut key for code runner (ctr + enter) -------------------------------------------------------------------------------- /10. Generics/1. first-generic.ts: -------------------------------------------------------------------------------- 1 | // ------------- Without Generics ------------- 2 | // function printNumber(item: number, defaultValue: number): [number, number] { 3 | // return [item, defaultValue]; 4 | // } 5 | 6 | // function printString(item: string, defaultValue: string): [string, string] { 7 | // return [item, defaultValue]; 8 | // } 9 | 10 | // function printBoolean( 11 | // item: boolean, 12 | // defaultValue: boolean 13 | // ): [boolean, boolean] { 14 | // return [item, defaultValue]; 15 | // } 16 | 17 | // // Example usage 18 | // const num = printNumber(42, 0); 19 | // console.log(num); // Outputs: [42, 0] 20 | 21 | // const str = printString("hello", "world"); 22 | // console.log(str); // Outputs: ['hello', 'world'] 23 | 24 | // const bool = printBoolean(true, false); 25 | // console.log(bool); // Outputs: [true, false] 26 | // ----------------------------------- 27 | 28 | // --------------- Using Generics --------------- 29 | function uniqueDataTypeFunc( 30 | item: Type, 31 | defaultValue: Type 32 | ): [Type, Type] { 33 | return [item, defaultValue]; 34 | } 35 | 36 | // Example usage 37 | const num = uniqueDataTypeFunc(42, 0); 38 | console.log(num); // Outputs: [42, 0] 39 | 40 | const str = uniqueDataTypeFunc("hello", "world"); 41 | console.log(str); // Outputs: ['hello', 'world'] 42 | 43 | // Example usage with a custom type 44 | interface Dog { 45 | name: string; 46 | breed: string; 47 | } 48 | 49 | const dogPair = uniqueDataTypeFunc( 50 | { name: "Buddy", breed: "Labrador" }, 51 | { name: "Default", breed: "Unknown" } 52 | ); 53 | 54 | console.log(dogPair); // Outputs: [{ name: 'Buddy', breed: 'Labrador' }, { name: 'Default', breed: 'Unknown' }] 55 | -------------------------------------------------------------------------------- /10. Generics/2. second-generic.ts: -------------------------------------------------------------------------------- 1 | // Function Signature: 2 | 3 | // function getRandomKeyValuePair(obj: { [key: string]: T }): { key: string; value: T } { ... } 4 | // The function is named getRandomKeyValuePair. 5 | // It is a generic function denoted by , meaning it can work with different types specified when calling the function. 6 | // Parameters: 7 | 8 | // obj: { [key: string]: T }: The function takes an object (obj) with keys of type string and values of type T. 9 | // This is a common pattern in TypeScript to represent a dictionary-like object where keys are strings and values can be of any type (T). 10 | // Function Body: 11 | 12 | // const keys = Object.keys(obj);: Gets an array of keys from the input object using Object.keys. 13 | // const randKey = keys[Math.floor(Math.random() * keys.length)];: Randomly selects a key from the array of keys using a random index. 14 | // return { key: randKey, value: obj[randKey] };: Returns an object with two properties — key (the randomly chosen key) and value (the corresponding value from the input object). 15 | // Return Type: 16 | 17 | // : { key: string; value: T }: The function returns an object with a fixed structure — a key property of type string and a value property of type T. 18 | 19 | // Generic function to get a random key-value pair from an object 20 | function getRandomKeyValuePair(obj: { [key: string]: T }): { 21 | key: string; 22 | value: T; 23 | } { 24 | const keys = Object.keys(obj); 25 | const randKey = keys[Math.floor(Math.random() * keys.length)]; 26 | return { key: randKey, value: obj[randKey] }; 27 | } 28 | 29 | // Example usage with strings 30 | const stringObject = { a: "apple", b: "banana", c: "cherry" }; 31 | const randomStringPair = getRandomKeyValuePair(stringObject); 32 | console.log(randomStringPair); // Outputs: { key: 'a', value: 'apple' } (random) 33 | 34 | // Example usage with numbers 35 | const numberObject = { one: 1, two: 2, three: 3, four: 4 }; 36 | const randomNumberPair = getRandomKeyValuePair(numberObject); 37 | console.log(randomNumberPair); // Outputs: { key: 'two', value: 2 } (random) 38 | 39 | // Inferring type 40 | const inferredStringPair = getRandomKeyValuePair(stringObject); 41 | console.log(inferredStringPair); // Outputs: { key: 'b', value: 'banana' } (random) 42 | 43 | const inferredNumberPair = getRandomKeyValuePair(numberObject); 44 | console.log(inferredNumberPair); // Outputs: { key: 'three', value: 3 } (random) 45 | // ------------------------------------------------ 46 | 47 | // ------------------------------------------------ 48 | // Generic function to filter an array based on a condition 49 | function filterArray(array: T[], condition: (item: T) => boolean): T[] { 50 | return array.filter((item) => condition(item)); 51 | } 52 | 53 | // Example usage with an array of numbers 54 | const numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 55 | const evenNumbers = filterArray(numberArray, (num) => num % 2 === 0); 56 | console.log(evenNumbers); // Outputs: [2, 4, 6, 8, 10] 57 | 58 | // Example usage with an array of strings 59 | const stringArray = ["apple", "banana", "cherry", "date"]; 60 | const shortWords = filterArray(stringArray, (word) => word.length < 6); 61 | console.log(shortWords); // Outputs: ["apple", "date"] 62 | 63 | // Example usage with an array of objects 64 | interface Fruit { 65 | name: string; 66 | color: string; 67 | } 68 | 69 | const fruitArray: Fruit[] = [ 70 | { name: "Apple", color: "Red" }, 71 | { name: "Banana", color: "Yellow" }, 72 | { name: "Cherry", color: "Red" }, 73 | ]; 74 | 75 | const redFruits = filterArray( 76 | fruitArray, 77 | (fruit) => fruit.color === "Red" 78 | ); 79 | console.log(redFruits); // Outputs: [{ name: 'Apple', color: 'Red' }, { name: 'Cherry', color: 'Red' }] 80 | // ------------------------------------------------ 81 | -------------------------------------------------------------------------------- /10. Generics/3. Generics-With-Multiple-Types.ts: -------------------------------------------------------------------------------- 1 | // -------------------------- 2 | // Generic function to reverse the order of two values 3 | function reversePair(value1: T, value2: U): [U, T] { 4 | return [value2, value1]; 5 | } 6 | 7 | // Example usage 8 | const reversedPair = reversePair("Hello", 42); 9 | console.log(reversedPair); // Outputs: [42, "Hello"] 10 | // -------------------------- 11 | 12 | // -------------------------- 13 | // Generic function to combine two values into an array 14 | function combineValues(value1: T, value2: U): [T, U] { 15 | return [value1, value2]; 16 | } 17 | 18 | // Example usage 19 | const combinedStringAndNumber = combineValues("Hello", 42); 20 | console.log(combinedStringAndNumber); // Outputs: ["Hello", 42] 21 | 22 | const combinedBooleanAndArray = combineValues(true, [1, 2, 3]); 23 | console.log(combinedBooleanAndArray); // Outputs: [true, [1, 2, 3]] 24 | // -------------------------- 25 | -------------------------------------------------------------------------------- /10. Generics/4. Type-Constraints.ts: -------------------------------------------------------------------------------- 1 | // Type constraint using the 'extends' keyword 2 | interface Identifiable { 3 | id: number; 4 | } 5 | 6 | // Generic function with a type constraint 7 | function mergeObjects>( 8 | obj1: T, 9 | obj2: U 10 | ): T & U { 11 | return { ...obj1, ...obj2 }; 12 | } 13 | 14 | // Example usage 15 | const object1 = { id: 1, name: "Object 1" }; 16 | const object2 = { id: 2, description: "Object 2" }; 17 | 18 | const mergedObject = mergeObjects(object1, object2); 19 | console.log(mergedObject); 20 | // Outputs: { id: 1, name: 'Object 1', description: 'Object 2' } 21 | -------------------------------------------------------------------------------- /10. Generics/5. generic-classes.ts: -------------------------------------------------------------------------------- 1 | // Generic class 2 | class Box { 3 | private content: T; 4 | 5 | constructor(initialContent: T) { 6 | this.content = initialContent; 7 | } 8 | 9 | getContent(): T { 10 | return this.content; 11 | } 12 | 13 | setContent(newContent: T): void { 14 | this.content = newContent; 15 | } 16 | } 17 | 18 | // Example usage 19 | const stringBox = new Box("Hello, TypeScript!"); 20 | console.log(stringBox.getContent()); // Outputs: Hello, TypeScript! 21 | stringBox.setContent("New content"); 22 | console.log(stringBox.getContent()); // Outputs: New content 23 | 24 | const numberBox = new Box(42); 25 | console.log(numberBox.getContent()); // Outputs: 42 26 | numberBox.setContent(99); 27 | console.log(numberBox.getContent()); // Outputs: 99 28 | -------------------------------------------------------------------------------- /10. Generics/README.md: -------------------------------------------------------------------------------- 1 | # Generics 2 | 3 | In TypeScript, generics allow you to create reusable components that can work with a variety of types. Generics make it possible for you to define functions, classes, and interfaces that can work with different data types without having to duplicate code. 4 | 5 | Here's an example of how to define a generic function in TypeScript: 6 | 7 | ```ts 8 | function reverse(items: T[]): T[] { 9 | const reversed = []; 10 | for (let i = items.length - 1; i >= 0; i--) { 11 | reversed.push(items[i]); 12 | } 13 | return reversed; 14 | } 15 | ``` 16 | 17 | In this example, reverse is a generic function that takes an array of type T and returns a new array of the same type T. The syntax in the definition of reverse indicates that T is a generic type parameter. When you call the reverse function, you specify the actual type that T should represent. 18 | 19 | For example, if you wanted to reverse an array of strings, you would call reverse like this: 20 | 21 | ```ts 22 | const names = ["Alice", "Bob", "Charlie"]; 23 | const reversedNames = reverse(names); 24 | ``` 25 | 26 | In this case, string is the actual type that T represents, so the reverse function returns an array of strings. 27 | 28 | Generics can also be used with classes and interfaces in TypeScript. For example, here's how you could define a generic interface for a key-value store: 29 | 30 | ```ts 31 | interface KeyValueStore { 32 | get(key: K): V | undefined; 33 | set(key: K, value: V): void; 34 | } 35 | ``` 36 | 37 | In this example, KeyValueStore is a generic interface that has two type parameters K and V. These type parameters are used to define the types of the keys and values in the key-value store. The methods get and set are defined to get and set values in the store. 38 | 39 | Generics make it possible for you to write code that is more flexible and reusable, since it can work with a wide variety of data types. 40 | -------------------------------------------------------------------------------- /11. Type Narrowing/1. type-guards.ts: -------------------------------------------------------------------------------- 1 | // Define a union type 2 | type MyType = string | number; 3 | 4 | // Example function with type guard 5 | function exampleFunction(value: MyType): void { 6 | // Type guard using typeof 7 | if (typeof value === "string") { 8 | // Within this block, TypeScript knows that 'value' is a string 9 | console.log(value.toUpperCase()); 10 | } else { 11 | // Within this block, TypeScript knows that 'value' is a number 12 | console.log(value.toFixed(2)); 13 | } 14 | } 15 | 16 | // Example usage 17 | exampleFunction("hello"); // Outputs: HELLO 18 | exampleFunction(42); // Outputs: 42.00 19 | -------------------------------------------------------------------------------- /11. Type Narrowing/2. instanceof-operator.ts: -------------------------------------------------------------------------------- 1 | class Dog { 2 | bark(): void { 3 | console.log("Woof!"); 4 | } 5 | } 6 | 7 | class Cat { 8 | meow(): void { 9 | console.log("Meow!"); 10 | } 11 | } 12 | 13 | // Example function with instanceof type guard 14 | function animalSound(animal: Dog | Cat): void { 15 | if (animal instanceof Dog) { 16 | // Within this block, TypeScript knows that 'animal' is an instance of Dog 17 | animal.bark(); 18 | } else { 19 | // Within this block, TypeScript knows that 'animal' is an instance of Cat 20 | animal.meow(); 21 | } 22 | } 23 | 24 | // Example usage 25 | const myDog = new Dog(); 26 | const myCat = new Cat(); 27 | 28 | animalSound(myDog); // Outputs: Woof! 29 | animalSound(myCat); // Outputs: Meow! 30 | -------------------------------------------------------------------------------- /11. Type Narrowing/3. Intersection types.ts: -------------------------------------------------------------------------------- 1 | // Define two types 2 | type Employee = { 3 | id: number; 4 | name: string; 5 | }; 6 | 7 | type Manager = { 8 | department: string; 9 | role: string; 10 | }; 11 | 12 | // Create an intersection type 13 | type ManagerWithEmployeeInfo = Employee & Manager; 14 | 15 | // Example usage 16 | const manager: ManagerWithEmployeeInfo = { 17 | id: 123, 18 | name: "John Doe", 19 | department: "Engineering", 20 | role: "Team Lead", 21 | }; 22 | 23 | console.log(manager.id); // Outputs: 123 24 | console.log(manager.name); // Outputs: John Doe 25 | console.log(manager.department); // Outputs: Engineering 26 | console.log(manager.role); // Outputs: Team Lead 27 | -------------------------------------------------------------------------------- /12. DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TS DOM 6 | 7 | 8 |

This is HTML Element

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /12. DOM/index.ts: -------------------------------------------------------------------------------- 1 | console.log(document); 2 | -------------------------------------------------------------------------------- /12. DOM/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, 15 | // "lib": [] /* Specify a set of bundled library declaration files that describe the target runtime environment. */, 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs" /* Specify what module code is generated. */, 29 | // "rootDir": "./", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */, 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, 83 | 84 | /* Type Checking */ 85 | "strict": true /* Enable all strict type-checking options. */, 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /13. Axios/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "axios", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "axios", 9 | "version": "1.0.0", 10 | "license": "ISC", 11 | "dependencies": { 12 | "axios": "^1.6.2" 13 | } 14 | }, 15 | "node_modules/asynckit": { 16 | "version": "0.4.0", 17 | "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", 18 | "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" 19 | }, 20 | "node_modules/axios": { 21 | "version": "1.6.2", 22 | "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz", 23 | "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==", 24 | "dependencies": { 25 | "follow-redirects": "^1.15.0", 26 | "form-data": "^4.0.0", 27 | "proxy-from-env": "^1.1.0" 28 | } 29 | }, 30 | "node_modules/combined-stream": { 31 | "version": "1.0.8", 32 | "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", 33 | "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", 34 | "dependencies": { 35 | "delayed-stream": "~1.0.0" 36 | }, 37 | "engines": { 38 | "node": ">= 0.8" 39 | } 40 | }, 41 | "node_modules/delayed-stream": { 42 | "version": "1.0.0", 43 | "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", 44 | "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", 45 | "engines": { 46 | "node": ">=0.4.0" 47 | } 48 | }, 49 | "node_modules/follow-redirects": { 50 | "version": "1.15.3", 51 | "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", 52 | "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", 53 | "funding": [ 54 | { 55 | "type": "individual", 56 | "url": "https://github.com/sponsors/RubenVerborgh" 57 | } 58 | ], 59 | "engines": { 60 | "node": ">=4.0" 61 | }, 62 | "peerDependenciesMeta": { 63 | "debug": { 64 | "optional": true 65 | } 66 | } 67 | }, 68 | "node_modules/form-data": { 69 | "version": "4.0.0", 70 | "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", 71 | "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", 72 | "dependencies": { 73 | "asynckit": "^0.4.0", 74 | "combined-stream": "^1.0.8", 75 | "mime-types": "^2.1.12" 76 | }, 77 | "engines": { 78 | "node": ">= 6" 79 | } 80 | }, 81 | "node_modules/mime-db": { 82 | "version": "1.52.0", 83 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", 84 | "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", 85 | "engines": { 86 | "node": ">= 0.6" 87 | } 88 | }, 89 | "node_modules/mime-types": { 90 | "version": "2.1.35", 91 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", 92 | "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", 93 | "dependencies": { 94 | "mime-db": "1.52.0" 95 | }, 96 | "engines": { 97 | "node": ">= 0.6" 98 | } 99 | }, 100 | "node_modules/proxy-from-env": { 101 | "version": "1.1.0", 102 | "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", 103 | "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /13. Axios/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "axios", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "axios": "^1.6.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /13. Axios/src/index.ts: -------------------------------------------------------------------------------- 1 | import axios, { AxiosResponse } from "axios"; 2 | import { Todo } from "./todo"; 3 | 4 | // interface Todo { 5 | // userId: number; 6 | // id: number; 7 | // title: string; 8 | // completed: boolean; 9 | // } 10 | 11 | const fetchData = async () => { 12 | try { 13 | const response: AxiosResponse = await axios.get( 14 | "https://jsonplaceholder.typicode.com/todos/1" 15 | ); 16 | console.log("Todo:", response.data); 17 | } catch (error: any) { 18 | if (axios.isAxiosError(error)) { 19 | // Handle Axios errors 20 | console.error("Axios Error:", error.message); 21 | if (error.response) { 22 | // The request was made, but the server responded with a status code outside the range of 2xx 23 | console.error("Status:", error.response.status); 24 | console.error("Data:", error.response.data); 25 | } 26 | } else { 27 | // Handle other errors 28 | console.error("Error:", error.message); 29 | } 30 | } 31 | }; 32 | 33 | fetchData(); 34 | -------------------------------------------------------------------------------- /13. Axios/src/todo.d.ts: -------------------------------------------------------------------------------- 1 | export interface Todo { 2 | userId: number; 3 | id: number; 4 | title: string; 5 | completed: boolean; 6 | } 7 | -------------------------------------------------------------------------------- /13. Axios/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs" /* Specify what module code is generated. */, 29 | // "rootDir": "./", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */, 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, 83 | 84 | /* Type Checking */ 85 | "strict": true /* Enable all strict type-checking options. */, 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | }, 109 | "include": ["src/**/*.ts"], 110 | "exclude": ["node_modules"] 111 | } 112 | -------------------------------------------------------------------------------- /14. Express/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "new", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "new", 9 | "version": "1.0.0", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.18.2" 13 | }, 14 | "devDependencies": { 15 | "@types/express": "^4.17.21" 16 | } 17 | }, 18 | "node_modules/@types/body-parser": { 19 | "version": "1.19.5", 20 | "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz", 21 | "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==", 22 | "dev": true, 23 | "dependencies": { 24 | "@types/connect": "*", 25 | "@types/node": "*" 26 | } 27 | }, 28 | "node_modules/@types/connect": { 29 | "version": "3.4.38", 30 | "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz", 31 | "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==", 32 | "dev": true, 33 | "dependencies": { 34 | "@types/node": "*" 35 | } 36 | }, 37 | "node_modules/@types/express": { 38 | "version": "4.17.21", 39 | "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz", 40 | "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==", 41 | "dev": true, 42 | "dependencies": { 43 | "@types/body-parser": "*", 44 | "@types/express-serve-static-core": "^4.17.33", 45 | "@types/qs": "*", 46 | "@types/serve-static": "*" 47 | } 48 | }, 49 | "node_modules/@types/express-serve-static-core": { 50 | "version": "4.17.41", 51 | "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.41.tgz", 52 | "integrity": "sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==", 53 | "dev": true, 54 | "dependencies": { 55 | "@types/node": "*", 56 | "@types/qs": "*", 57 | "@types/range-parser": "*", 58 | "@types/send": "*" 59 | } 60 | }, 61 | "node_modules/@types/http-errors": { 62 | "version": "2.0.4", 63 | "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz", 64 | "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==", 65 | "dev": true 66 | }, 67 | "node_modules/@types/mime": { 68 | "version": "1.3.5", 69 | "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz", 70 | "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==", 71 | "dev": true 72 | }, 73 | "node_modules/@types/node": { 74 | "version": "20.9.2", 75 | "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.2.tgz", 76 | "integrity": "sha512-WHZXKFCEyIUJzAwh3NyyTHYSR35SevJ6mZ1nWwJafKtiQbqRTIKSRcw3Ma3acqgsent3RRDqeVwpHntMk+9irg==", 77 | "dev": true, 78 | "dependencies": { 79 | "undici-types": "~5.26.4" 80 | } 81 | }, 82 | "node_modules/@types/qs": { 83 | "version": "6.9.10", 84 | "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.10.tgz", 85 | "integrity": "sha512-3Gnx08Ns1sEoCrWssEgTSJs/rsT2vhGP+Ja9cnnk9k4ALxinORlQneLXFeFKOTJMOeZUFD1s7w+w2AphTpvzZw==", 86 | "dev": true 87 | }, 88 | "node_modules/@types/range-parser": { 89 | "version": "1.2.7", 90 | "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz", 91 | "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==", 92 | "dev": true 93 | }, 94 | "node_modules/@types/send": { 95 | "version": "0.17.4", 96 | "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz", 97 | "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==", 98 | "dev": true, 99 | "dependencies": { 100 | "@types/mime": "^1", 101 | "@types/node": "*" 102 | } 103 | }, 104 | "node_modules/@types/serve-static": { 105 | "version": "1.15.5", 106 | "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.5.tgz", 107 | "integrity": "sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==", 108 | "dev": true, 109 | "dependencies": { 110 | "@types/http-errors": "*", 111 | "@types/mime": "*", 112 | "@types/node": "*" 113 | } 114 | }, 115 | "node_modules/accepts": { 116 | "version": "1.3.8", 117 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", 118 | "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", 119 | "dependencies": { 120 | "mime-types": "~2.1.34", 121 | "negotiator": "0.6.3" 122 | }, 123 | "engines": { 124 | "node": ">= 0.6" 125 | } 126 | }, 127 | "node_modules/array-flatten": { 128 | "version": "1.1.1", 129 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 130 | "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" 131 | }, 132 | "node_modules/body-parser": { 133 | "version": "1.20.1", 134 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", 135 | "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==", 136 | "dependencies": { 137 | "bytes": "3.1.2", 138 | "content-type": "~1.0.4", 139 | "debug": "2.6.9", 140 | "depd": "2.0.0", 141 | "destroy": "1.2.0", 142 | "http-errors": "2.0.0", 143 | "iconv-lite": "0.4.24", 144 | "on-finished": "2.4.1", 145 | "qs": "6.11.0", 146 | "raw-body": "2.5.1", 147 | "type-is": "~1.6.18", 148 | "unpipe": "1.0.0" 149 | }, 150 | "engines": { 151 | "node": ">= 0.8", 152 | "npm": "1.2.8000 || >= 1.4.16" 153 | } 154 | }, 155 | "node_modules/bytes": { 156 | "version": "3.1.2", 157 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", 158 | "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", 159 | "engines": { 160 | "node": ">= 0.8" 161 | } 162 | }, 163 | "node_modules/call-bind": { 164 | "version": "1.0.5", 165 | "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz", 166 | "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==", 167 | "dependencies": { 168 | "function-bind": "^1.1.2", 169 | "get-intrinsic": "^1.2.1", 170 | "set-function-length": "^1.1.1" 171 | }, 172 | "funding": { 173 | "url": "https://github.com/sponsors/ljharb" 174 | } 175 | }, 176 | "node_modules/content-disposition": { 177 | "version": "0.5.4", 178 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", 179 | "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", 180 | "dependencies": { 181 | "safe-buffer": "5.2.1" 182 | }, 183 | "engines": { 184 | "node": ">= 0.6" 185 | } 186 | }, 187 | "node_modules/content-type": { 188 | "version": "1.0.5", 189 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", 190 | "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", 191 | "engines": { 192 | "node": ">= 0.6" 193 | } 194 | }, 195 | "node_modules/cookie": { 196 | "version": "0.5.0", 197 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", 198 | "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", 199 | "engines": { 200 | "node": ">= 0.6" 201 | } 202 | }, 203 | "node_modules/cookie-signature": { 204 | "version": "1.0.6", 205 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 206 | "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" 207 | }, 208 | "node_modules/debug": { 209 | "version": "2.6.9", 210 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 211 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 212 | "dependencies": { 213 | "ms": "2.0.0" 214 | } 215 | }, 216 | "node_modules/define-data-property": { 217 | "version": "1.1.1", 218 | "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz", 219 | "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==", 220 | "dependencies": { 221 | "get-intrinsic": "^1.2.1", 222 | "gopd": "^1.0.1", 223 | "has-property-descriptors": "^1.0.0" 224 | }, 225 | "engines": { 226 | "node": ">= 0.4" 227 | } 228 | }, 229 | "node_modules/depd": { 230 | "version": "2.0.0", 231 | "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", 232 | "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", 233 | "engines": { 234 | "node": ">= 0.8" 235 | } 236 | }, 237 | "node_modules/destroy": { 238 | "version": "1.2.0", 239 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", 240 | "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==", 241 | "engines": { 242 | "node": ">= 0.8", 243 | "npm": "1.2.8000 || >= 1.4.16" 244 | } 245 | }, 246 | "node_modules/ee-first": { 247 | "version": "1.1.1", 248 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 249 | "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" 250 | }, 251 | "node_modules/encodeurl": { 252 | "version": "1.0.2", 253 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 254 | "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", 255 | "engines": { 256 | "node": ">= 0.8" 257 | } 258 | }, 259 | "node_modules/escape-html": { 260 | "version": "1.0.3", 261 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 262 | "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==" 263 | }, 264 | "node_modules/etag": { 265 | "version": "1.8.1", 266 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 267 | "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", 268 | "engines": { 269 | "node": ">= 0.6" 270 | } 271 | }, 272 | "node_modules/express": { 273 | "version": "4.18.2", 274 | "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", 275 | "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==", 276 | "dependencies": { 277 | "accepts": "~1.3.8", 278 | "array-flatten": "1.1.1", 279 | "body-parser": "1.20.1", 280 | "content-disposition": "0.5.4", 281 | "content-type": "~1.0.4", 282 | "cookie": "0.5.0", 283 | "cookie-signature": "1.0.6", 284 | "debug": "2.6.9", 285 | "depd": "2.0.0", 286 | "encodeurl": "~1.0.2", 287 | "escape-html": "~1.0.3", 288 | "etag": "~1.8.1", 289 | "finalhandler": "1.2.0", 290 | "fresh": "0.5.2", 291 | "http-errors": "2.0.0", 292 | "merge-descriptors": "1.0.1", 293 | "methods": "~1.1.2", 294 | "on-finished": "2.4.1", 295 | "parseurl": "~1.3.3", 296 | "path-to-regexp": "0.1.7", 297 | "proxy-addr": "~2.0.7", 298 | "qs": "6.11.0", 299 | "range-parser": "~1.2.1", 300 | "safe-buffer": "5.2.1", 301 | "send": "0.18.0", 302 | "serve-static": "1.15.0", 303 | "setprototypeof": "1.2.0", 304 | "statuses": "2.0.1", 305 | "type-is": "~1.6.18", 306 | "utils-merge": "1.0.1", 307 | "vary": "~1.1.2" 308 | }, 309 | "engines": { 310 | "node": ">= 0.10.0" 311 | } 312 | }, 313 | "node_modules/finalhandler": { 314 | "version": "1.2.0", 315 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", 316 | "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", 317 | "dependencies": { 318 | "debug": "2.6.9", 319 | "encodeurl": "~1.0.2", 320 | "escape-html": "~1.0.3", 321 | "on-finished": "2.4.1", 322 | "parseurl": "~1.3.3", 323 | "statuses": "2.0.1", 324 | "unpipe": "~1.0.0" 325 | }, 326 | "engines": { 327 | "node": ">= 0.8" 328 | } 329 | }, 330 | "node_modules/forwarded": { 331 | "version": "0.2.0", 332 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", 333 | "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", 334 | "engines": { 335 | "node": ">= 0.6" 336 | } 337 | }, 338 | "node_modules/fresh": { 339 | "version": "0.5.2", 340 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 341 | "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", 342 | "engines": { 343 | "node": ">= 0.6" 344 | } 345 | }, 346 | "node_modules/function-bind": { 347 | "version": "1.1.2", 348 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", 349 | "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", 350 | "funding": { 351 | "url": "https://github.com/sponsors/ljharb" 352 | } 353 | }, 354 | "node_modules/get-intrinsic": { 355 | "version": "1.2.2", 356 | "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz", 357 | "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==", 358 | "dependencies": { 359 | "function-bind": "^1.1.2", 360 | "has-proto": "^1.0.1", 361 | "has-symbols": "^1.0.3", 362 | "hasown": "^2.0.0" 363 | }, 364 | "funding": { 365 | "url": "https://github.com/sponsors/ljharb" 366 | } 367 | }, 368 | "node_modules/gopd": { 369 | "version": "1.0.1", 370 | "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", 371 | "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", 372 | "dependencies": { 373 | "get-intrinsic": "^1.1.3" 374 | }, 375 | "funding": { 376 | "url": "https://github.com/sponsors/ljharb" 377 | } 378 | }, 379 | "node_modules/has-property-descriptors": { 380 | "version": "1.0.1", 381 | "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz", 382 | "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==", 383 | "dependencies": { 384 | "get-intrinsic": "^1.2.2" 385 | }, 386 | "funding": { 387 | "url": "https://github.com/sponsors/ljharb" 388 | } 389 | }, 390 | "node_modules/has-proto": { 391 | "version": "1.0.1", 392 | "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz", 393 | "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==", 394 | "engines": { 395 | "node": ">= 0.4" 396 | }, 397 | "funding": { 398 | "url": "https://github.com/sponsors/ljharb" 399 | } 400 | }, 401 | "node_modules/has-symbols": { 402 | "version": "1.0.3", 403 | "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", 404 | "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", 405 | "engines": { 406 | "node": ">= 0.4" 407 | }, 408 | "funding": { 409 | "url": "https://github.com/sponsors/ljharb" 410 | } 411 | }, 412 | "node_modules/hasown": { 413 | "version": "2.0.0", 414 | "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", 415 | "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", 416 | "dependencies": { 417 | "function-bind": "^1.1.2" 418 | }, 419 | "engines": { 420 | "node": ">= 0.4" 421 | } 422 | }, 423 | "node_modules/http-errors": { 424 | "version": "2.0.0", 425 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", 426 | "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", 427 | "dependencies": { 428 | "depd": "2.0.0", 429 | "inherits": "2.0.4", 430 | "setprototypeof": "1.2.0", 431 | "statuses": "2.0.1", 432 | "toidentifier": "1.0.1" 433 | }, 434 | "engines": { 435 | "node": ">= 0.8" 436 | } 437 | }, 438 | "node_modules/iconv-lite": { 439 | "version": "0.4.24", 440 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", 441 | "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", 442 | "dependencies": { 443 | "safer-buffer": ">= 2.1.2 < 3" 444 | }, 445 | "engines": { 446 | "node": ">=0.10.0" 447 | } 448 | }, 449 | "node_modules/inherits": { 450 | "version": "2.0.4", 451 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", 452 | "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" 453 | }, 454 | "node_modules/ipaddr.js": { 455 | "version": "1.9.1", 456 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", 457 | "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", 458 | "engines": { 459 | "node": ">= 0.10" 460 | } 461 | }, 462 | "node_modules/media-typer": { 463 | "version": "0.3.0", 464 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 465 | "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", 466 | "engines": { 467 | "node": ">= 0.6" 468 | } 469 | }, 470 | "node_modules/merge-descriptors": { 471 | "version": "1.0.1", 472 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 473 | "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==" 474 | }, 475 | "node_modules/methods": { 476 | "version": "1.1.2", 477 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 478 | "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==", 479 | "engines": { 480 | "node": ">= 0.6" 481 | } 482 | }, 483 | "node_modules/mime": { 484 | "version": "1.6.0", 485 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", 486 | "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", 487 | "bin": { 488 | "mime": "cli.js" 489 | }, 490 | "engines": { 491 | "node": ">=4" 492 | } 493 | }, 494 | "node_modules/mime-db": { 495 | "version": "1.52.0", 496 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", 497 | "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", 498 | "engines": { 499 | "node": ">= 0.6" 500 | } 501 | }, 502 | "node_modules/mime-types": { 503 | "version": "2.1.35", 504 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", 505 | "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", 506 | "dependencies": { 507 | "mime-db": "1.52.0" 508 | }, 509 | "engines": { 510 | "node": ">= 0.6" 511 | } 512 | }, 513 | "node_modules/ms": { 514 | "version": "2.0.0", 515 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 516 | "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" 517 | }, 518 | "node_modules/negotiator": { 519 | "version": "0.6.3", 520 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", 521 | "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", 522 | "engines": { 523 | "node": ">= 0.6" 524 | } 525 | }, 526 | "node_modules/object-inspect": { 527 | "version": "1.13.1", 528 | "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", 529 | "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==", 530 | "funding": { 531 | "url": "https://github.com/sponsors/ljharb" 532 | } 533 | }, 534 | "node_modules/on-finished": { 535 | "version": "2.4.1", 536 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", 537 | "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", 538 | "dependencies": { 539 | "ee-first": "1.1.1" 540 | }, 541 | "engines": { 542 | "node": ">= 0.8" 543 | } 544 | }, 545 | "node_modules/parseurl": { 546 | "version": "1.3.3", 547 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", 548 | "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", 549 | "engines": { 550 | "node": ">= 0.8" 551 | } 552 | }, 553 | "node_modules/path-to-regexp": { 554 | "version": "0.1.7", 555 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 556 | "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==" 557 | }, 558 | "node_modules/proxy-addr": { 559 | "version": "2.0.7", 560 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", 561 | "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", 562 | "dependencies": { 563 | "forwarded": "0.2.0", 564 | "ipaddr.js": "1.9.1" 565 | }, 566 | "engines": { 567 | "node": ">= 0.10" 568 | } 569 | }, 570 | "node_modules/qs": { 571 | "version": "6.11.0", 572 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", 573 | "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", 574 | "dependencies": { 575 | "side-channel": "^1.0.4" 576 | }, 577 | "engines": { 578 | "node": ">=0.6" 579 | }, 580 | "funding": { 581 | "url": "https://github.com/sponsors/ljharb" 582 | } 583 | }, 584 | "node_modules/range-parser": { 585 | "version": "1.2.1", 586 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", 587 | "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", 588 | "engines": { 589 | "node": ">= 0.6" 590 | } 591 | }, 592 | "node_modules/raw-body": { 593 | "version": "2.5.1", 594 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", 595 | "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", 596 | "dependencies": { 597 | "bytes": "3.1.2", 598 | "http-errors": "2.0.0", 599 | "iconv-lite": "0.4.24", 600 | "unpipe": "1.0.0" 601 | }, 602 | "engines": { 603 | "node": ">= 0.8" 604 | } 605 | }, 606 | "node_modules/safe-buffer": { 607 | "version": "5.2.1", 608 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", 609 | "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", 610 | "funding": [ 611 | { 612 | "type": "github", 613 | "url": "https://github.com/sponsors/feross" 614 | }, 615 | { 616 | "type": "patreon", 617 | "url": "https://www.patreon.com/feross" 618 | }, 619 | { 620 | "type": "consulting", 621 | "url": "https://feross.org/support" 622 | } 623 | ] 624 | }, 625 | "node_modules/safer-buffer": { 626 | "version": "2.1.2", 627 | "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", 628 | "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" 629 | }, 630 | "node_modules/send": { 631 | "version": "0.18.0", 632 | "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", 633 | "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", 634 | "dependencies": { 635 | "debug": "2.6.9", 636 | "depd": "2.0.0", 637 | "destroy": "1.2.0", 638 | "encodeurl": "~1.0.2", 639 | "escape-html": "~1.0.3", 640 | "etag": "~1.8.1", 641 | "fresh": "0.5.2", 642 | "http-errors": "2.0.0", 643 | "mime": "1.6.0", 644 | "ms": "2.1.3", 645 | "on-finished": "2.4.1", 646 | "range-parser": "~1.2.1", 647 | "statuses": "2.0.1" 648 | }, 649 | "engines": { 650 | "node": ">= 0.8.0" 651 | } 652 | }, 653 | "node_modules/send/node_modules/ms": { 654 | "version": "2.1.3", 655 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", 656 | "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" 657 | }, 658 | "node_modules/serve-static": { 659 | "version": "1.15.0", 660 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", 661 | "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", 662 | "dependencies": { 663 | "encodeurl": "~1.0.2", 664 | "escape-html": "~1.0.3", 665 | "parseurl": "~1.3.3", 666 | "send": "0.18.0" 667 | }, 668 | "engines": { 669 | "node": ">= 0.8.0" 670 | } 671 | }, 672 | "node_modules/set-function-length": { 673 | "version": "1.1.1", 674 | "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz", 675 | "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==", 676 | "dependencies": { 677 | "define-data-property": "^1.1.1", 678 | "get-intrinsic": "^1.2.1", 679 | "gopd": "^1.0.1", 680 | "has-property-descriptors": "^1.0.0" 681 | }, 682 | "engines": { 683 | "node": ">= 0.4" 684 | } 685 | }, 686 | "node_modules/setprototypeof": { 687 | "version": "1.2.0", 688 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", 689 | "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" 690 | }, 691 | "node_modules/side-channel": { 692 | "version": "1.0.4", 693 | "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", 694 | "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", 695 | "dependencies": { 696 | "call-bind": "^1.0.0", 697 | "get-intrinsic": "^1.0.2", 698 | "object-inspect": "^1.9.0" 699 | }, 700 | "funding": { 701 | "url": "https://github.com/sponsors/ljharb" 702 | } 703 | }, 704 | "node_modules/statuses": { 705 | "version": "2.0.1", 706 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", 707 | "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", 708 | "engines": { 709 | "node": ">= 0.8" 710 | } 711 | }, 712 | "node_modules/toidentifier": { 713 | "version": "1.0.1", 714 | "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", 715 | "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", 716 | "engines": { 717 | "node": ">=0.6" 718 | } 719 | }, 720 | "node_modules/type-is": { 721 | "version": "1.6.18", 722 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", 723 | "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", 724 | "dependencies": { 725 | "media-typer": "0.3.0", 726 | "mime-types": "~2.1.24" 727 | }, 728 | "engines": { 729 | "node": ">= 0.6" 730 | } 731 | }, 732 | "node_modules/undici-types": { 733 | "version": "5.26.5", 734 | "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", 735 | "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", 736 | "dev": true 737 | }, 738 | "node_modules/unpipe": { 739 | "version": "1.0.0", 740 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 741 | "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", 742 | "engines": { 743 | "node": ">= 0.8" 744 | } 745 | }, 746 | "node_modules/utils-merge": { 747 | "version": "1.0.1", 748 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 749 | "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==", 750 | "engines": { 751 | "node": ">= 0.4.0" 752 | } 753 | }, 754 | "node_modules/vary": { 755 | "version": "1.1.2", 756 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 757 | "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", 758 | "engines": { 759 | "node": ">= 0.8" 760 | } 761 | } 762 | } 763 | } 764 | -------------------------------------------------------------------------------- /14. Express/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "new", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "ts-node src/index.ts", 8 | "build": "tsc" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "express": "^4.18.2" 15 | }, 16 | "devDependencies": { 17 | "@types/express": "^4.17.21" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /14. Express/src/index.ts: -------------------------------------------------------------------------------- 1 | import express, { Request, Response } from "express"; 2 | 3 | const app = express(); 4 | const port = 3000; 5 | 6 | app.get("/", (_, res: Response) => { 7 | res.send("Hello, TypeScript with Express!"); 8 | }); 9 | 10 | app.listen(port, () => { 11 | console.log(`Server is running at http://localhost:${port}`); 12 | }); 13 | -------------------------------------------------------------------------------- /14. Express/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ 22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs" /* Specify what module code is generated. */, 29 | // "rootDir": "./", /* Specify the root folder within your source files. */ 30 | // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ 35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ 38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ 39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ 40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ 41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ 42 | // "resolveJsonModule": true, /* Enable importing .json files. */ 43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ 44 | // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ 45 | 46 | /* JavaScript Support */ 47 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ 48 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 49 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ 50 | 51 | /* Emit */ 52 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 53 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 54 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 55 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 56 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 57 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ 58 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 59 | // "removeComments": true, /* Disable emitting comments. */ 60 | // "noEmit": true, /* Disable emitting files from a compilation. */ 61 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 62 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ 63 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 64 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 67 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 68 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 69 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ 70 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ 71 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 72 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ 73 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 74 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 75 | 76 | /* Interop Constraints */ 77 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 78 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ 79 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 80 | "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */, 81 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 82 | "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, 83 | 84 | /* Type Checking */ 85 | "strict": true /* Enable all strict type-checking options. */, 86 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ 87 | // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ 88 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 89 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ 90 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 91 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ 92 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ 93 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 94 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ 95 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ 96 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 97 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 98 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 99 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ 100 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 101 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ 102 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 103 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 104 | 105 | /* Completeness */ 106 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 107 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 108 | }, 109 | "include": ["src/**/*.ts"], 110 | "exclude": ["node_modules"] 111 | } 112 | -------------------------------------------------------------------------------- /2. Type Annotation Basics/1. String.ts: -------------------------------------------------------------------------------- 1 | // let myVar: type = value 2 | 3 | let myName: string = "HuXn WebDev"; 4 | myName = "Another Name"; 5 | console.log(myName); 6 | 7 | // ERROR 8 | // myName = 12; 9 | -------------------------------------------------------------------------------- /2. Type Annotation Basics/2. Numbers.ts: -------------------------------------------------------------------------------- 1 | let favNumber: number = 7; 2 | favNumber += 2; 3 | 4 | console.log(favNumber); 5 | 6 | // ERROR 7 | // favNumber = "eleven"; 8 | -------------------------------------------------------------------------------- /2. Type Annotation Basics/3. Boolean.ts: -------------------------------------------------------------------------------- 1 | let tsHard: boolean = false; 2 | console.log(tsHard); 3 | 4 | // ERROR 5 | // tsHard = 100; 6 | // tsHard = "HuXn"; 7 | -------------------------------------------------------------------------------- /2. Type Annotation Basics/4. Type-Inference.ts: -------------------------------------------------------------------------------- 1 | // Here we're inferring the types! 2 | let tech = "TypeScript"; 3 | let favNumber = 8; 4 | let tsHard = true; 5 | 6 | console.log(tech, favNumber, tsHard); 7 | 8 | // ERROR 9 | // tech = false 10 | // favNumber = "Hello" 11 | // tsHard = 20 12 | -------------------------------------------------------------------------------- /2. Type Annotation Basics/5. Any-Type.ts: -------------------------------------------------------------------------------- 1 | let color: any = "crimson"; 2 | color = 20; 3 | color = true; 4 | color(); 5 | color.toUpperCase(); 6 | console.log(color); 7 | -------------------------------------------------------------------------------- /2. Type Annotation Basics/README.md: -------------------------------------------------------------------------------- 1 | # Annotations 2 | 3 | In TypeScript, annotations are used to specify the data type of a variable, parameter, function return value, and other types of values. Annotations help developers catch errors early in development by allowing them to specify what types of values can be assigned to a given variable or passed as an argument to a function. 4 | 5 | Annotations are specified using a syntax that involves placing a colon : followed by the data type after the variable name or argument name. For example, the following code declares a variable named name with a type of string: 6 | 7 | ```ts 8 | let name: string = "John"; 9 | ``` 10 | 11 | # String Annotations 12 | 13 | ```ts 14 | let message: string = "Hello, world!"; 15 | ``` 16 | 17 | In this example, we're declaring a variable message and assigning it a value of type string. The colon : is used to annotate the type of the variable. 18 | 19 | This tells TypeScript that the variable message can only hold a value that is a string. If we were to try to assign a value of a different type to this variable, TypeScript would throw an error. 20 | 21 | # Number Annotations 22 | 23 | ```ts 24 | let myNumber: number = 42; 25 | ``` 26 | 27 | In this example, we're declaring a variable myNumber with the type annotation number. This means that the value assigned to myNumber must be a numeric value. 28 | 29 | If we try to assign a non-numeric value to myNumber, TypeScript will show an error: 30 | 31 | ```ts 32 | let myNumber: number = "Hello, world!"; // Error: Type '"Hello, world!"' is not assignable to type 'number'. 33 | ``` 34 | 35 | # Boolean Annotations 36 | 37 | ```ts 38 | let isCompleted: boolean = false; 39 | ``` 40 | 41 | In this example, we're declaring a variable isCompleted with the type annotation boolean. This means that the value assigned to isCompleted must be either true or false. 42 | 43 | If we try to assign a non-boolean value to isCompleted, TypeScript will show an error: 44 | 45 | ```ts 46 | let isCompleted: boolean = "not yet"; // Error: Type 'string' is not assignable to type 'boolean'. 47 | ``` 48 | 49 | # Type Inference 50 | 51 | Type inference is a feature in TypeScript that allows the compiler to automatically determine the type of a variable based on its value. In other words, if you declare a variable without explicitly specifying its type, TypeScript will try to infer the type based on the value you assign to it. 52 | 53 | Here's an example: 54 | 55 | ```ts 56 | let myString = "Hello, world!"; 57 | ``` 58 | 59 | In this example, we're declaring a variable myString without specifying its type. However, since we're assigning a string value to it, TypeScript will infer that myString has a type of string. 60 | 61 | Type inference can help reduce boilerplate code and make your code more concise, but it's important to remember that it's not always perfect and sometimes you may need to explicitly annotate variables to avoid unexpected behavior. 62 | 63 | # Any Type 64 | 65 | TypeScript has a special any type that can be used to represent any type. When a variable is annotated with the any type, TypeScript will allow it to have any value and disable all type checking for that variable and its properties. 66 | 67 | ```ts 68 | let myVariable: any = "Hello, world!"; 69 | ``` 70 | 71 | In this example, we're declaring a variable myVariable with the type annotation any. This means that myVariable can have any value, including values of different types. For example, we could assign a number value to myVariable later on without TypeScript raising an error. 72 | 73 | While the any type can be useful in certain situations, it should be used sparingly. Overuse of any can lead to untyped code and make it harder to catch type-related bugs during development. It's generally better to use more specific types whenever possible to get the benefits of TypeScript's type checking. 74 | -------------------------------------------------------------------------------- /3. Functions/1. Parameter-Annotations.ts: -------------------------------------------------------------------------------- 1 | // Regular Func 2 | function addOne(num: number) { 3 | return num + 1; 4 | } 5 | 6 | const result = addOne(3); 7 | console.log(result); 8 | 9 | // Arrow Func Annotations 10 | const double = (x: number, y: number) => x * y; 11 | const res = double(2, 10); 12 | console.log(res); 13 | 14 | // Also notice, TypeScript will gives you warning if you provide more or less arguments then you specifiy in your parameters area. 15 | 16 | // double(2, 10, 20); // 👈 Warning 17 | -------------------------------------------------------------------------------- /3. Functions/2. Default-Parameters.ts: -------------------------------------------------------------------------------- 1 | function greet(person: string = "Anonymous") { 2 | return `Hello ${person}`; 3 | } 4 | 5 | const res = greet(); 6 | console.log(res); 7 | -------------------------------------------------------------------------------- /3. Functions/3. Return-Annotations.ts: -------------------------------------------------------------------------------- 1 | // Regular Function 2 | function double1(x: number): number { 3 | return x * x; 4 | } 5 | 6 | const res = double1(2); 7 | console.log(res); 8 | 9 | // Using Arrow Functions 10 | const double2 = (x: number): number => x * x; 11 | const res2 = double2(2); 12 | console.log(res2); 13 | -------------------------------------------------------------------------------- /3. Functions/4. Void.ts: -------------------------------------------------------------------------------- 1 | function printMessage(message: string): void { 2 | console.log(`This is my message: ${message}`); 3 | // ERROR 👇 4 | // return message; 5 | } 6 | 7 | printMessage("Hello How Are You?"); 8 | -------------------------------------------------------------------------------- /3. Functions/5. Never.ts: -------------------------------------------------------------------------------- 1 | // 1. 2 | function throwError(msg: string): never { 3 | throw new Error(msg); 4 | } 5 | 6 | // 2. 7 | function infiniteLoop(): never { 8 | while (true) {} 9 | } 10 | 11 | // 3. 12 | let x: never; 13 | 14 | function neverReturns(): never { 15 | while (true) {} 16 | } 17 | 18 | x = neverReturns(); // This line will cause a compile-time error because the function never returns 19 | -------------------------------------------------------------------------------- /3. Functions/Learn/1. Func-Parameter.md: -------------------------------------------------------------------------------- 1 | # Function Parameter Annotations 2 | 3 | Function parameter annotations in TypeScript are used to specify the expected types of the parameters that a function takes. 4 | 5 | Here's an example: 6 | 7 | ```ts 8 | function greet(name: string) { 9 | console.log(`Hello, ${name}!`); 10 | } 11 | ``` 12 | 13 | In this example, we're declaring a function greet with a single parameter name. The name parameter is annotated with the type string, which means that it can only accept string values. 14 | 15 | ```ts 16 | greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'. 17 | ``` 18 | 19 | If we call the greet function with a non-string value, TypeScript will show an error: 20 | -------------------------------------------------------------------------------- /3. Functions/Learn/2. Default-Params.md: -------------------------------------------------------------------------------- 1 | # Default Parameters 2 | 3 | Default parameters in TypeScript allow you to specify a default value for a function parameter if one is not provided when the function is called. 4 | 5 | Here's an example: 6 | 7 | ```ts 8 | function greet(name: string = "world") { 9 | console.log(`Hello, ${name}!`); 10 | } 11 | 12 | greet(); // Output: "Hello, world!" 13 | greet("HuXn"); // Output: "Hello, HuXn!" 14 | ``` 15 | 16 | In this example, we declare a function greet that takes a single parameter name, which has a default value of 'world'. If the name parameter is not provided when the function is called, it will default to 'world'. 17 | 18 | When we call greet() without any arguments, it outputs "Hello, world!". When we call greet('HuXn'), it outputs "Hello, HuXn!". 19 | -------------------------------------------------------------------------------- /3. Functions/Learn/3. Return-Annotation.md: -------------------------------------------------------------------------------- 1 | # Function Return Annotations 2 | 3 | Function return type annotations in TypeScript are used to specify the expected return type of a function. 4 | 5 | Here's an example: 6 | 7 | ```ts 8 | function add(a: number, b: number): number { 9 | return a + b; 10 | } 11 | ``` 12 | 13 | In this example, we're declaring a function add that takes two number parameters a and b. The function is annotated with a return type of number, which means that it must return a numeric value. 14 | 15 | If the function doesn't return a value that matches the specified return type, TypeScript will show an error: 16 | 17 | ```ts 18 | function add(a: number, b: number): number { 19 | return "hello"; // Error: Type 'string' is not assignable to type 'number'. 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /3. Functions/Learn/4. Void.md: -------------------------------------------------------------------------------- 1 | # Void In TypeScript 2 | 3 | In TypeScript, void is a type that represents the absence of any value. It is often used as the return type for functions that do not return a value. 4 | 5 | Here's an example: 6 | 7 | ```ts 8 | function logMessage(message: string): void { 9 | console.log(`Message: ${message}`); 10 | } 11 | ``` 12 | 13 | In this example, the function logMessage takes in a message parameter of type string, logs it to the console, but does not return any value. Therefore, its return type is void. 14 | -------------------------------------------------------------------------------- /3. Functions/Learn/5. Never.md: -------------------------------------------------------------------------------- 1 | # Never 2 | 3 | The never keyword is used to indicate that a function will not return anything, or that a variable can never have a value. 4 | 5 | Here are some common use cases for the never type: 6 | 7 | 1. A function that always throws an error: 8 | 9 | ```ts 10 | function throwError(msg: string): never { 11 | throw new Error(msg); 12 | } 13 | ``` 14 | 15 | The above function takes in a message of type string, throws an error with that message, and never returns anything. The return type of this function is never. 16 | 17 | 2. A function that has an infinite loop: 18 | 19 | ```ts 20 | function infiniteLoop(): never { 21 | while (true) {} 22 | } 23 | ``` 24 | 25 | The above function has an infinite loop, so it will never return anything. Its return type is also never. 26 | 27 | 3. A variable that can never have a value: 28 | 29 | ```ts 30 | let x: never; 31 | 32 | function neverReturns(): never { 33 | while (true) {} 34 | } 35 | 36 | x = neverReturns(); // This line will cause a compile-time error because the function never returns 37 | ``` 38 | 39 | In this example, the variable x is declared as type never. Since it is not assigned any value, it cannot have a value. If we try to assign it a value using a function that never returns (like neverReturns()), TypeScript will raise a compile-time error. 40 | 41 | The never type is useful for indicating that certain code paths should never be reached, or that certain values are impossible. It can help catch errors at compile-time instead of runtime. 42 | -------------------------------------------------------------------------------- /4. Array Types/1. Array-Types.ts: -------------------------------------------------------------------------------- 1 | // ------------------------- 2 | const nums: number[] = [1, 2, 3, 4, 5]; 3 | console.log(nums); 4 | 5 | const str: string[] = ["one", "two", "three"]; 6 | console.log(str); 7 | // ------------------------- 8 | 9 | // ------------------------- 10 | const items: string[] = []; 11 | items.push("Remote"); 12 | items.push("Keyboard"); 13 | // items.push(21); // NO nO 14 | console.log(items); 15 | 16 | const numList: number[] = []; 17 | numList.push(20); 18 | numList.push(2000); 19 | numList.push(-1); 20 | // numList.push("Hello") // ERROR 21 | console.log(numList); 22 | // ------------------------- 23 | -------------------------------------------------------------------------------- /4. Array Types/2. Alternate-Syntax.ts: -------------------------------------------------------------------------------- 1 | const items: Array = []; 2 | // const items: string[] = []; 3 | 4 | const items2: Array = []; 5 | // const items2: numbers[] = [] 6 | -------------------------------------------------------------------------------- /4. Array Types/3. Multidimensional-Arrays.ts: -------------------------------------------------------------------------------- 1 | const singleDi: number[] = [1, 2, 3, 4, 5]; 2 | const multiDi: number[][] = [[1, 2, 3, 4, 5]]; 3 | const triple: number[][][] = [[[1, 2, 3, 4, 5]]]; 4 | 5 | console.log(singleDi); 6 | console.log(multiDi); 7 | console.log(triple); 8 | -------------------------------------------------------------------------------- /4. Array Types/README.md: -------------------------------------------------------------------------------- 1 | # Arrays Types 2 | 3 | In TypeScript, arrays are a type of object that can store multiple values of the same data type. Arrays in TypeScript are typed, which means you can specify the type of values that an array can hold. 4 | 5 | There are two ways to define an array type in TypeScript: 6 | 7 | 1. Using the square bracket notation [] to indicate an array of a specific type: 8 | 9 | ```ts 10 | const numbers: number[] = [1, 2, 3, 4]; 11 | ``` 12 | 13 | In this example, numbers is an array of number type, and it contains four elements. 14 | 15 | 2. Using the generic Array notation to indicate an array of a specific type: 16 | 17 | ```ts 18 | const names: Array = ["Alice", "Bob", "Charlie"]; 19 | ``` 20 | 21 | In this example, names is an array of string type, and it contains three elements. 22 | 23 | # Multi Dimensional 24 | 25 | A multi-dimensional array is an array that contains other arrays as its elements. Multi-dimensional arrays can be defined using the same notation as one-dimensional arrays, but with nested square brackets. 26 | 27 | ```ts 28 | const matrix: number[][] = [ 29 | [1, 2], 30 | [3, 4], 31 | ]; 32 | ``` 33 | 34 | In this example, matrix is a two-dimensional array that contains two rows and two columns. The first row contains the values 1 and 2, and the second row contains the values 3 and 4. Each row is itself an array of numbers. 35 | 36 | You can access elements within a multi-dimensional array using multiple bracket notations. For example, to access the value 1 in the above matrix array, you would use the following syntax: 37 | 38 | ```ts 39 | const value = matrix[0][0]; 40 | ``` 41 | -------------------------------------------------------------------------------- /5. Object Types/1. Objects-Types.ts: -------------------------------------------------------------------------------- 1 | // type variableName (annotations/types) = {property:value} 2 | 3 | // ------------------------- 4 | // Define a person object 5 | const person: { firstName: string; lastName: string; age: number } = { 6 | firstName: "John", 7 | lastName: "Doe", 8 | age: 30, 9 | }; 10 | 11 | // Access and log properties 12 | console.log(`Name: ${person.firstName} ${person.lastName}, Age: ${person.age}`); 13 | // ------------------------- 14 | 15 | // ------------------------- 16 | // Using objects as function return value 17 | function printUser(): { name: string; age: number; location: string } { 18 | return { 19 | name: "Alex", 20 | age: 19, 21 | location: "USA", 22 | }; 23 | } 24 | 25 | const res = printUser(); 26 | console.log(res); 27 | 28 | function printUserName(person: { firstName: string; lastName: string }) { 29 | console.log(`${person.firstName} ${person.lastName}`); 30 | } 31 | 32 | printUserName({ firstName: "HuXn", lastName: "WebDev" }); 33 | // ------------------------- 34 | -------------------------------------------------------------------------------- /5. Object Types/2. Type-Aliases.ts: -------------------------------------------------------------------------------- 1 | type User = { 2 | name: string; 3 | age: number; 4 | location: string; 5 | }; 6 | 7 | const printUserInfo = (user: User) => { 8 | return `Name: (${user.name}) Age: (${user.age}) Location: (${user.location})`; 9 | }; 10 | 11 | const result = printUserInfo({ name: "Alex", age: 20, location: "USA" }); 12 | console.log(result); 13 | -------------------------------------------------------------------------------- /5. Object Types/3. Optional-Properties.ts: -------------------------------------------------------------------------------- 1 | type User = { 2 | name: string; 3 | age?: number; 4 | location: string; 5 | }; 6 | 7 | const user: User = { 8 | name: "HuXn", 9 | age: 20, 10 | location: "Arabic", 11 | }; 12 | 13 | console.log(`Name: ${user.name}, Age: ${user.age}, Location: ${user.location}`); 14 | -------------------------------------------------------------------------------- /5. Object Types/4. Readonly.ts: -------------------------------------------------------------------------------- 1 | type Person = { 2 | name: string; 3 | age: number; 4 | readonly email: string; 5 | }; 6 | 7 | const user: Person = { 8 | name: "John", 9 | age: 20, 10 | email: "test@gmail.com", 11 | }; 12 | 13 | console.log(user.email); // Valid 14 | // user.email = "john@gmail.com" // 🚫 Not Valid 15 | -------------------------------------------------------------------------------- /5. Object Types/5. Intersection-Types.ts: -------------------------------------------------------------------------------- 1 | type UserInfo = { 2 | first: string; 3 | last: string; 4 | age: number; 5 | }; 6 | 7 | type AccountDetails = { 8 | email: string; 9 | password: string; 10 | }; 11 | 12 | type User = UserInfo & AccountDetails; 13 | 14 | const huxn: User = { 15 | first: "HuXn", 16 | last: "WebDev", 17 | age: 18, 18 | email: "test@gmail.com", 19 | password: "strongpassword123", 20 | }; 21 | 22 | console.log( 23 | `Name: (${huxn.first} ${huxn.last}) Age: (${huxn.age}) Email: (${huxn.email}) Password: (${huxn.password})` 24 | ); 25 | -------------------------------------------------------------------------------- /5. Object Types/Learn/1. Object-Types.md: -------------------------------------------------------------------------------- 1 | # Function with Object Params 2 | 3 | ```ts 4 | function printPerson(person: { 5 | name: string; 6 | age: number; 7 | isStudent: boolean; 8 | }) { 9 | console.log( 10 | `Name: ${person.name}, Age: ${person.age}, Student: ${person.isStudent}` 11 | ); 12 | } 13 | 14 | const john = { name: "John", age: 27, isStudent: false }; 15 | printPerson(john); 16 | ``` 17 | 18 | In this example, the printPerson() function takes an object as a parameter, and we annotate the object inline by specifying its properties and types within curly braces. 19 | 20 | We define a john object with three properties that conform to the expected shape of the argument that printPerson() expects, and pass it as an argument to the function. 21 | 22 | This approach can be useful for annotating objects inline when defining function parameters, but it can become repetitive to specify the same shape in multiple places in your code. In such cases, it may be more convenient to use a type alias or interface to reduce duplication and make your code more readable. 23 | (Which we'll learn next) 24 | -------------------------------------------------------------------------------- /5. Object Types/Learn/2. Type-Aliases.md: -------------------------------------------------------------------------------- 1 | # Type Aliases 2 | 3 | A type alias is a way to create a new name for an existing type. It allows you to define a custom type that refers to another type and give it a more meaningful or descriptive name. 4 | 5 | Type aliases are defined using the type keyword, followed by the name of the alias, an equal sign (=), and the type it refers to. 6 | 7 | For example: 8 | 9 | ```ts 10 | type MyString = string; 11 | ``` 12 | 13 | This defines a type alias called MyString that refers to the built-in string type. 14 | 15 | Type aliases can also be used to define more complex types, such as object types, function types, union types, and intersection types. 16 | 17 | ```ts 18 | type Person = { 19 | name: string; 20 | age: number; 21 | }; 22 | 23 | function printPerson(person: Person) { 24 | console.log(`Name: ${person.name}, Age: ${person.age}`); 25 | } 26 | 27 | const myPerson: Person = { name: "Alice", age: 25 }; 28 | printPerson(myPerson); 29 | ``` 30 | 31 | In this example, we've defined a Person type using an object type that has name and age properties. We've then defined a printPerson function that takes a parameter of type Person and logs out their name and age. 32 | 33 | Finally, we've created a myPerson variable of type Person, initialized it with an object that has a name of "Alice" and an age of 25, and passed it to the printPerson function. 34 | 35 | Note that we're using TypeScript annotations to explicitly specify the types of the variables and function parameters. This is not strictly necessary in this case because TypeScript can infer the types from the context, but it's generally a good practice to include explicit type annotations for readability and maintainability. 36 | -------------------------------------------------------------------------------- /5. Object Types/Learn/3. Optional-Prop.md: -------------------------------------------------------------------------------- 1 | # Optional Properties 2 | 3 | You can make a certain property optional in an object type by adding a question mark (?) after the property name. 4 | 5 | For example, let's say you have an object type for a person with name, age, and email properties, but you want to make the email property optional. You can do this by adding a question mark after the email property: 6 | 7 | ```ts 8 | type Person = { 9 | name: string; 10 | age: number; 11 | email?: string; 12 | }; 13 | ``` 14 | 15 | Now, when you create an object of type Person, you can choose whether or not to include the email property. 16 | 17 | For example: 18 | 19 | ```ts 20 | const alice: Person = { name: "Alice", age: 30 }; 21 | const bob: Person = { name: "Bob", age: 25, email: "bob@example.com" }; 22 | ``` 23 | 24 | In this example, the alice object does not include the email property, while the bob object does. Because the email property is marked as optional in the Person type definition, it is valid to create objects with or without it. 25 | 26 | Note that optional properties must come after any required properties in the object type definition. If you try to define an optional property before a required property, TypeScript will give you a compile-time error. 27 | -------------------------------------------------------------------------------- /5. Object Types/Learn/4. Readonly.md: -------------------------------------------------------------------------------- 1 | You can make a certain property readonly in an object type by using the readonly keyword before the property name. 2 | 3 | For example, let's say you have an object type for a person with name, age, and email properties, but you want to make the email property readonly. You can do this by adding the readonly keyword before the email property: 4 | 5 | ```ts 6 | typescript; 7 | type Person = { 8 | name: string; 9 | age: number; 10 | readonly email: string; 11 | }; 12 | ``` 13 | 14 | Now, when you create an object of type Person, you can set the name and age properties as usual, but you cannot change the email property after it has been created: 15 | 16 | ```ts 17 | const alice: Person = { name: "Alice", age: 30, email: "alice@example.com" }; 18 | console.log(alice.email); // "alice@example.com" 19 | // This will give a compile-time error: 20 | alice.email = "new-email@example.com"; 21 | ``` 22 | 23 | In this example, the alice object includes a readonly email property that is set to "alice@example.com" when the object is created. We are able to read the value of the email property using dot notation (alice.email), but we cannot change its value once it has been created. 24 | 25 | Note that any attempt to change the value of a readonly property will result in a compile-time error. Also note that readonly applies only to the property itself, not to the object that contains it. In other words, the alice object itself is not readonly, so you can still change its name and age properties if needed. 26 | -------------------------------------------------------------------------------- /5. Object Types/Learn/5. Intersection-Types.md: -------------------------------------------------------------------------------- 1 | # Intersection Types 2 | 3 | In TypeScript, an intersection type is a way to combine multiple types into a single type that includes all the properties and methods of each constituent type. An intersection type is denoted by the & symbol. 4 | 5 | For example, let's say you have two object types: Person and Employee. The Person type has name and age properties, and the Employee type has id and title properties: 6 | 7 | ```ts 8 | type Person = { 9 | name: string; 10 | age: number; 11 | }; 12 | 13 | type Employee = { 14 | id: number; 15 | title: string; 16 | }; 17 | ``` 18 | 19 | You can create an intersection type called PersonAndEmployee by combining the Person and Employee types using the & symbol: 20 | 21 | ```ts 22 | type PersonAndEmployee = Person & Employee; 23 | ``` 24 | 25 | Now, objects of type PersonAndEmployee will include all the properties and methods of both the Person and Employee types: 26 | 27 | ```ts 28 | const alice: PersonAndEmployee = { 29 | name: "Alice", 30 | age: 30, 31 | id: 123, 32 | title: "Manager", 33 | }; 34 | ``` 35 | 36 | In this example, the alice object is of type PersonAndEmployee, which includes all the properties (name, age, id, and title) from both the Person and Employee types. 37 | 38 | Intersection types can be useful when you need to define a type that has the properties and methods of multiple other types. They can also be used with other type constructs, such as unions and type aliases. 39 | -------------------------------------------------------------------------------- /6. Union Types/1. Union.ts: -------------------------------------------------------------------------------- 1 | let password: string | number = 20; 2 | 3 | type UserInfo = { 4 | first: string; 5 | last: string; 6 | age: number; 7 | }; 8 | 9 | type AccountDetails = { 10 | email: string; 11 | password: string; 12 | }; 13 | 14 | let user: UserInfo | AccountDetails = { 15 | first: "HuXn", 16 | last: "WebDev", 17 | age: 29, 18 | }; 19 | 20 | console.log(user); 21 | 22 | const items: (number | string)[] = [1, 3, "hello"]; 23 | console.log(items); 24 | -------------------------------------------------------------------------------- /6. Union Types/3. Literal-Types.ts: -------------------------------------------------------------------------------- 1 | // ---------------------------- 2 | let color: "red" | "blue" | "green"; 3 | color = "green"; 4 | console.log(color); 5 | // ---------------------------- 6 | 7 | // ---------------------------- 8 | let isTrue: true | false; 9 | isTrue = true; 10 | console.log(isTrue); 11 | // ---------------------------- 12 | 13 | // ---------------------------- 14 | let number = 1 | 2 | 3; 15 | number = 1; 16 | console.log(number); 17 | // ---------------------------- 18 | 19 | // ---------------------------- 20 | let password: "secretpassword" = "secretpassword"; 21 | // password = "tryinganotherpassword"; // Warning ⚠️ 22 | console.log(password); 23 | // ---------------------------- 24 | -------------------------------------------------------------------------------- /6. Union Types/Learn/1. Unions.md: -------------------------------------------------------------------------------- 1 | # Unions 2 | 3 | In TypeScript, unions are used to declare a type that can have one of several possible types. Unions are useful when we want to allow a variable or parameter to accept multiple types. 4 | 5 | The syntax for defining a union type in TypeScript uses the pipe symbol (|). For example, if we want to define a variable that can be either a number or a string, we would write: 6 | 7 | ```ts 8 | let myVar: number | string; 9 | ``` 10 | 11 | This means that myVar can hold a value of type number or string. 12 | 13 | We can also use unions with function parameters. For example, if we have a function that accepts either a string or an array of strings, we could define its parameter like this: 14 | 15 | ```ts 16 | function foo(param: string | string[]) { 17 | // function body 18 | } 19 | ``` 20 | 21 | Here, param can hold a value of type string or string[]. 22 | 23 | Unions can also be combined with other types in TypeScript, such as interfaces and classes. For example, we could define an interface that has a property that can be either a string or a number: 24 | 25 | ```ts 26 | interface MyInterface { 27 | myProp: string | number; 28 | } 29 | ``` 30 | 31 | Overall, unions in TypeScript provide a flexible way to work with variables and parameters that can have different types. 32 | -------------------------------------------------------------------------------- /6. Union Types/Learn/2. Type-Narrowing.md: -------------------------------------------------------------------------------- 1 | # Type Narrowing 2 | 3 | In TypeScript, type narrowing is the process of refining a variable's type within a conditional block of code. This allows you to write more precise and type-safe code. 4 | 5 | TypeScript provides several mechanisms for narrowing types, including: 6 | 7 | 1. Type guards: These are functions that return a boolean value indicating whether a value is of a certain type. For example, typeof can be used as a type guard to check if a value is a string or not. 8 | 9 | 2. The instanceof operator: This checks if an object is an instance of a particular class. 10 | 11 | 3. Discriminated unions: This is a pattern where a property is used to determine the specific subtype of an object. 12 | 13 | 4. Intersection types: If two types have overlapping properties, TypeScript will create a new type that includes only those properties that are common to both types. 14 | 15 | Here's an example of using type narrowing with a type guard: 16 | 17 | ```ts 18 | function printLength(strOrArray: string | string[]) { 19 | if (typeof strOrArray === "string") { 20 | console.log(strOrArray.length); // OK 21 | } else { 22 | console.log(strOrArray.length); // OK 23 | } 24 | } 25 | ``` 26 | 27 | In this example, we use the typeof operator as a type guard to narrow the type of strOrArray. Inside the if block, TypeScript knows that strOrArray is a string, so we can safely call the length property. Similarly, inside the else block, TypeScript knows that strOrArray is an array of strings, so we can also safely call the length property. 28 | 29 | Type narrowing helps prevent runtime errors by ensuring that our code is always working with variables of the correct type. 30 | -------------------------------------------------------------------------------- /6. Union Types/Learn/3. Litral-types.md: -------------------------------------------------------------------------------- 1 | # Literal Types 2 | 3 | In TypeScript, literal types allow you to specify a value that can only be one specific literal value. This means that a variable with a literal type can only have one specific value and no other. 4 | 5 | There are several types of literal types in TypeScript: 6 | 7 | 1. String Literal Types - This allows you to specify the exact value of a string that a variable can contain. For example: 8 | 9 | ```ts 10 | let color: "red" | "blue" | "green"; 11 | color = "red"; // valid 12 | color = "yellow"; // invalid 13 | ``` 14 | 15 | 2. Numeric Literal Types - This allows you to specify the exact value of a number that a variable can contain. For example: 16 | 17 | ```ts 18 | let number: 1 | 2 | 3; 19 | number = 1; // valid 20 | number = 4; // invalid 21 | ``` 22 | 23 | 3. Boolean Literal Types - This allows you to specify the exact value of a boolean that a variable can contain. For example: 24 | 25 | ```ts 26 | let isTrue: true; 27 | isTrue = true; // valid 28 | isTrue = false; // invalid 29 | ``` 30 | -------------------------------------------------------------------------------- /7. Tuples and Enums/1. Tuples.ts: -------------------------------------------------------------------------------- 1 | // ---------------------- 2 | let myTuple: [number, string]; 3 | myTuple = [2, "Hello World"]; // Valid🥂 4 | // myTuple = ["Hello World", 2]; // Not Valid ⚠️ 5 | console.log(myTuple); 6 | // ---------------------- 7 | 8 | // ---------------------- 9 | const products: (number | string)[] = ["Item 1", 23]; 10 | console.log(products); 11 | // ---------------------- 12 | 13 | // ---------------------- 14 | const games: [string, string, string] = ["Game 1", "Game 2", "Game 3"]; 15 | console.log(games); 16 | // ---------------------- 17 | -------------------------------------------------------------------------------- /7. Tuples and Enums/2. Enums.ts: -------------------------------------------------------------------------------- 1 | enum WeatherConditions { 2 | Sunny = "sunny", 3 | Cloudy = "cloudy", 4 | Rainy = "rainy", 5 | Snowy = "snowy", 6 | } 7 | 8 | const currentWeather = WeatherConditions.Sunny; 9 | console.log(`The current weather is ${currentWeather}`); 10 | -------------------------------------------------------------------------------- /7. Tuples and Enums/README.md: -------------------------------------------------------------------------------- 1 | # Tuples 2 | 3 | In TypeScript, a tuple is a type that represents an array with a fixed number of elements, where each element can have a different type. The order of the types in the tuple definition corresponds to the order of the values in the actual array. Tuples are similar to arrays, but they have a specific structure and can be used to model finite sequences with known lengths. 4 | 5 | You can define a tuple type by specifying the types of its elements enclosed in square brackets, separated by commas: 6 | 7 | ```ts 8 | let myTuple: [string, number] = ["hello", 42]; 9 | ``` 10 | 11 | This declares a variable myTuple of type [string, number], which means it's an array with two elements: the first element must be a string, and the second element must be a number. You can access individual elements of a tuple using indexing syntax: 12 | 13 | ```ts 14 | let myTuple: [string, number] = ["hello", 42]; 15 | console.log(myTuple[0]); // "hello" 16 | console.log(myTuple[1]); // 42 17 | ``` 18 | 19 | Note that you can also use destructuring syntax to extract individual elements from a tuple: 20 | 21 | ```ts 22 | let myTuple: [string, number] = ["hello", 42]; 23 | let [first, second] = myTuple; 24 | console.log(first); // "hello" 25 | console.log(second); // 42 26 | ``` 27 | 28 | Tuples are useful when you need to represent a fixed set of values where each value has a different type. For example, you might use a tuple to represent a 2D point with x and y coordinates: 29 | 30 | ```ts 31 | let point: [number, number] = [10, 20]; 32 | ``` 33 | 34 | Or you might use a tuple to represent a person's name and age: 35 | 36 | ```ts 37 | let person: [string, number] = ["John Smith", 30]; 38 | ``` 39 | 40 | # Enums 41 | 42 | In TypeScript, an enum is a way to define a set of named constants. Enums allow you to define a collection of related values that can be used interchangeably in your code. 43 | 44 | For example, let's say you're building a weather app and you want to define a set of possible weather conditions like "sunny", "cloudy", "rainy", and "snowy". You could define an enum like this: 45 | 46 | ```ts 47 | enum WeatherConditions { 48 | Sunny, 49 | Cloudy, 50 | Rainy, 51 | Snowy, 52 | } 53 | ``` 54 | 55 | In this example, WeatherConditions is the name of the enum, and each of the values (e.g. Sunny, Cloudy, etc.) is assigned an automatic numerical value starting from 0. You can also assign specific values to each enum member like this: 56 | 57 | ```ts 58 | enum WeatherConditions { 59 | Sunny = "sunny", 60 | Cloudy = "cloudy", 61 | Rainy = "rainy", 62 | Snowy = "snowy", 63 | } 64 | ``` 65 | 66 | In this case, each enum member is explicitly given a string value. 67 | 68 | You can use enums in your code by referring to them by their name, for example: 69 | 70 | ```ts 71 | const currentWeather = WeatherConditions.Sunny; 72 | console.log(`The current weather is ${currentWeather}`); 73 | // Output: The current weather is Sunny 74 | ``` 75 | 76 | Enums are a useful tool for creating more readable and maintainable code by providing a way to define a set of related values with clear, meaningful names. 77 | -------------------------------------------------------------------------------- /8. Classes/1. annotation-classes.ts: -------------------------------------------------------------------------------- 1 | // class #1 (properties annotations) 2 | // class Person { 3 | // name: string; 4 | // age: number; 5 | 6 | // constructor(name: string, age: number) { 7 | // this.name = name; 8 | // this.age = age; 9 | // } 10 | // } 11 | 12 | // const person = new Person("John", 30); 13 | // console.log(person); 14 | 15 | // class #2 (class fields) 16 | // class Person { 17 | // name: string; 18 | // age: number; 19 | // location: string = "USA"; // 👈 class field 20 | 21 | // constructor(name: string, age: number) { 22 | // this.name = name; 23 | // this.age = age; 24 | // } 25 | // } 26 | 27 | // const person = new Person("John", 30); 28 | // console.log(person); 29 | 30 | // class #3 (readonly props) 31 | // class Person { 32 | // readonly name: string; 33 | // readonly age: number; 34 | // location: string = "USA"; 35 | 36 | // constructor(name: string, age: number) { 37 | // this.name = name; 38 | // this.age = age; 39 | // } 40 | // } 41 | 42 | // const person = new Person("John", 30); 43 | // console.log(person.age); 44 | // person.age = 20; // ERROR ⚠️ 45 | 46 | // class #4 (public modifier) 47 | // class Person { 48 | // public name: string; 49 | // public age: number; 50 | // location: string = "USA"; 51 | 52 | // constructor(name: string, age: number) { 53 | // this.name = name; 54 | // this.age = age; 55 | // } 56 | // } 57 | 58 | // const person = new Person("John", 30); 59 | // person.age = 20; 60 | // console.log(person.age); 61 | -------------------------------------------------------------------------------- /8. Classes/2. class-field.ts: -------------------------------------------------------------------------------- 1 | class Player { 2 | first: string; 3 | last: string; 4 | // 👇 5 | score: number = 0; 6 | 7 | constructor(first: string, last: string) { 8 | this.first = first; 9 | this.last = last; 10 | } 11 | } 12 | 13 | const dog1 = new Player("Elton", "Steele"); 14 | console.log(dog1.score); 15 | -------------------------------------------------------------------------------- /8. Classes/3. readonly-properties.ts: -------------------------------------------------------------------------------- 1 | class Player { 2 | readonly first: string; 3 | readonly last: string; 4 | score: number = 0; 5 | 6 | constructor(first: string, last: string) { 7 | this.first = first; 8 | this.last = last; 9 | } 10 | } 11 | 12 | const dog1 = new Player("Elton", "Steele"); 13 | console.log(dog1.score); 14 | -------------------------------------------------------------------------------- /8. Classes/4. public-modifier.ts: -------------------------------------------------------------------------------- 1 | class Player { 2 | public readonly first: string; 3 | public readonly last: string; 4 | public score: number = 0; 5 | 6 | constructor(first: string, last: string) { 7 | this.first = first; 8 | this.last = last; 9 | } 10 | } 11 | 12 | const dog1 = new Player("Elton", "Steele"); 13 | console.log(dog1.score); 14 | -------------------------------------------------------------------------------- /8. Classes/5. private-modifier.ts: -------------------------------------------------------------------------------- 1 | class Player { 2 | public readonly first: string; 3 | public readonly last: string; 4 | private score: number = 0; 5 | 6 | constructor(first: string, last: string) { 7 | this.first = first; 8 | this.last = last; 9 | } 10 | 11 | private secretMethod(): void { 12 | console.log("Secret Method"); 13 | } 14 | } 15 | 16 | const dog1 = new Player("Elton", "Steele"); 17 | // console.log(dog1.score); 18 | // dog1.secretMethod(); 19 | -------------------------------------------------------------------------------- /8. Classes/6. parameters-properties-shorthand.ts: -------------------------------------------------------------------------------- 1 | class Player { 2 | // public readonly first: string; 3 | // public readonly last: string; 4 | // private score: number = 0; 5 | 6 | constructor( 7 | public first: string, 8 | public last: string, 9 | private score: number 10 | ) {} 11 | 12 | private secretMethod(): void { 13 | console.log("Secret Method"); 14 | } 15 | } 16 | 17 | const dog1 = new Player("Elton", "Steele", 10); 18 | console.log(dog1.first); 19 | console.log(dog1.last); 20 | -------------------------------------------------------------------------------- /8. Classes/7. Getters-n-Setters.ts: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------- 2 | class MyClass { 3 | private _myProperty: number = 0; 4 | 5 | get myProperty(): number { 6 | return this._myProperty; 7 | } 8 | 9 | set myProperty(value: number) { 10 | if (value < 0) { 11 | throw new Error("Value cannot be negative"); 12 | } 13 | this._myProperty = value; 14 | } 15 | } 16 | 17 | // Create an instance of MyClass 18 | const myInstance = new MyClass(); 19 | 20 | // Use the getter 21 | console.log("Current value:", myInstance.myProperty); 22 | 23 | // Use the setter 24 | myInstance.myProperty = 42; 25 | console.log("New value:", myInstance.myProperty); 26 | 27 | // Attempt to set a negative value (will throw an error) 28 | // myInstance.myProperty = -10; 29 | 30 | // -------------------------------------------------- 31 | 32 | // -------------------------------------------------- 33 | // class Player { 34 | // constructor( 35 | // public first: string, 36 | // public last: string, 37 | // private _score: number 38 | // ) {} 39 | 40 | // private secretMethod(): void { 41 | // console.log("Secret Method"); 42 | // } 43 | 44 | // get fullName() { 45 | // return `${this.first} ${this.last}`; 46 | // } 47 | 48 | // get score(): number { 49 | // return this._score; 50 | // } 51 | 52 | // set score(newScore: number) { 53 | // if (newScore < 0) { 54 | // throw new Error("Score cannot be negative"); 55 | // } 56 | // this._score = newScore; 57 | // } 58 | // } 59 | 60 | // const dog1 = new Player("Elton", "Steele", 10); 61 | // console.log(dog1.score); 62 | // -------------------------------------------------- 63 | -------------------------------------------------------------------------------- /8. Classes/8. protected.ts: -------------------------------------------------------------------------------- 1 | class Player { 2 | constructor( 3 | public first: string, 4 | public last: string, 5 | protected _score: number 6 | ) {} 7 | 8 | get score(): number { 9 | return this._score; 10 | } 11 | } 12 | 13 | class SuperPlayer extends Player { 14 | public isAdmin: boolean = true; 15 | maxScore() { 16 | this._score = 99999; 17 | } 18 | } 19 | 20 | const dog1 = new Player("Elton", "Steele", 10); 21 | -------------------------------------------------------------------------------- /8. Classes/Learn/1. classes-annotation.md: -------------------------------------------------------------------------------- 1 | # Class Properties Annotations 2 | 3 | You can annotate class properties with a type. This allows you to define the data type of the property and ensure that it is always consistent. 4 | 5 | ```ts 6 | class Person { 7 | name: string; 8 | age: number; 9 | 10 | constructor(name: string, age: number) { 11 | this.name = name; 12 | this.age = age; 13 | } 14 | } 15 | ``` 16 | 17 | In this example, we define a Person class with two properties: name and age. We annotate these properties with a type, string for name and number for age. 18 | 19 | When you create an instance of this class, you need to provide values for both the name and age properties: 20 | 21 | ```ts 22 | const person = new Person("John", 30); 23 | ``` 24 | 25 | This ensures that the name property will always be a string and the age property will always be a number, which makes the code more predictable and easier to maintain. 26 | -------------------------------------------------------------------------------- /8. Classes/Learn/2. Access-modifier.md: -------------------------------------------------------------------------------- 1 | # Access Modifiers 2 | 3 | In TypeScript, you can use access modifiers to control the visibility of class members (properties and methods). Access modifiers determine the ways in which class members can be accessed from within and outside the class. 4 | 5 | There are three types of access modifiers in TypeScript: 6 | 7 | public: Members marked as public can be accessed from anywhere, both inside and outside the class. 8 | 9 | private: Members marked as private can only be accessed from within the class they are defined in. 10 | 11 | protected: Members marked as protected can be accessed from within the class they are defined in, as well as any subclasses that extend the class. 12 | 13 | Here's an example: 14 | 15 | ```ts 16 | class Animal { 17 | public name: string; 18 | private age: number; 19 | protected species: string; 20 | 21 | constructor(name: string, age: number, species: string) { 22 | this.name = name; 23 | this.age = age; 24 | this.species = species; 25 | } 26 | 27 | public getName(): string { 28 | return this.name; 29 | } 30 | 31 | private getAge(): number { 32 | return this.age; 33 | } 34 | 35 | protected getSpecies(): string { 36 | return this.species; 37 | } 38 | } 39 | 40 | class Dog extends Animal { 41 | constructor(name: string, age: number) { 42 | super(name, age, "Canine"); 43 | } 44 | 45 | public getInfo(): string { 46 | return `${this.getName()} is a ${this.getSpecies()} and is ${ 47 | this.age 48 | } years old.`; 49 | } 50 | } 51 | ``` 52 | 53 | In this example, we define an Animal class with three properties: name, age, and species. We annotate these properties with different access modifiers (public, private, and protected) to control their visibility. 54 | 55 | We also define three methods (getName, getAge, and getSpecies) that correspond to the three properties. Again, we annotate these methods with different access modifiers to control their visibility. 56 | 57 | We then define a Dog class that extends the Animal class. Since species is marked as protected, it can be accessed from within the Dog class. We define a method (getInfo) that uses the getName and getSpecies methods to return a string with information about the dog. 58 | 59 | Note that when you create an instance of the Dog class, you need to provide values for the name and age properties defined in the Animal class, but not for the species property since it's already defined in the Dog class constructor. Also note that the getAge method is marked as private, so it can only be called from within the Animal class and cannot be accessed from outside the class or its subclasses. 60 | -------------------------------------------------------------------------------- /8. Classes/Learn/3. Getters-n-Setters.md: -------------------------------------------------------------------------------- 1 | # Getters & Setters 2 | 3 | In TypeScript, getters and setters are used to access and modify class properties. Getters and setters allow you to define a property in a class that looks like a simple variable from the outside but internally has additional logic for getting and setting the value. 4 | 5 | Here's an example of how to define a getter and setter in TypeScript: 6 | 7 | ```ts 8 | class MyClass { 9 | private _myProperty: number = 0; 10 | 11 | get myProperty(): number { 12 | return this._myProperty; 13 | } 14 | 15 | set myProperty(value: number) { 16 | if (value < 0) { 17 | throw new Error("Value cannot be negative"); 18 | } 19 | this._myProperty = value; 20 | } 21 | } 22 | ``` 23 | 24 | In this example, myProperty is defined as a private property with an initial value of 0. The get and set keywords are used to define the getter and setter methods respectively. 25 | 26 | The get method is responsible for returning the value of \_myProperty, while the set method is responsible for validating the input value and setting the value of \_myProperty. In this case, we are checking to see if the input value is negative and throwing an error if it is. 27 | 28 | To access the myProperty property from outside the class, you can simply use instance.myProperty, where instance is an instance of the MyClass class. When you access myProperty, the get method is called and returns the current value of \_myProperty. To set the value of myProperty, you can use instance.myProperty = newValue, where newValue is the new value you want to assign to the property. When you assign a value to myProperty, the set method is called with the new value as its input. 29 | -------------------------------------------------------------------------------- /9. Interfaces/1. Interface.ts: -------------------------------------------------------------------------------- 1 | // Interface definition 2 | interface Computer { 3 | name: string; 4 | ram: number; 5 | hdd: number; 6 | } 7 | 8 | // Usage 9 | const computerExample: Computer = { 10 | name: "i7", 11 | ram: 16, 12 | hdd: 23000, 13 | }; 14 | 15 | console.log(computerExample.name); 16 | console.log(computerExample.ram); 17 | console.log(computerExample.hdd); 18 | // --------------------------- 19 | 20 | // ---------------------------------- 21 | // Interface #1 (Simple Interface) 22 | interface Movie { 23 | readonly name: string; // 👈 Readonly Property 24 | ratings: number; 25 | genra?: string; // 👈 Optional Property 26 | } 27 | 28 | const movie1: Movie = { 29 | name: "John Wick", 30 | ratings: 7, 31 | genra: "Action", 32 | }; 33 | 34 | // movie1.name = "Another Movie" // 👈 ERROR 35 | console.log(movie1); 36 | // ---------------------------------- 37 | -------------------------------------------------------------------------------- /9. Interfaces/2. Interface for function.ts: -------------------------------------------------------------------------------- 1 | // --------------------------- 2 | // Example 1 3 | 4 | // Interface for a function 5 | interface MathOperation { 6 | (x: number, y: number): number; 7 | } 8 | 9 | // Usage 10 | const add: MathOperation = (a, b) => a + b; 11 | const subtract: MathOperation = (a, b) => a - b; 12 | 13 | console.log(add(5, 3)); 14 | console.log(subtract(7, 2)); 15 | // --------------------------- 16 | 17 | // --------------------------- 18 | // Example 2 19 | 20 | // Define an interface for a Car 21 | interface Car { 22 | brand: string; 23 | model: string; 24 | year: number; 25 | } 26 | 27 | // Function that accepts an object adhering to the Car interface 28 | function displayCarInfo(car: Car): void { 29 | console.log(`Brand: ${car.brand}, Model: ${car.model}, Year: ${car.year}`); 30 | } 31 | 32 | // Create an object that adheres to the Car interface 33 | const myCar: Car = { 34 | brand: "Toyota", 35 | model: "Camry", 36 | year: 2022, 37 | }; 38 | 39 | // Call the function with the object 40 | displayCarInfo(myCar); 41 | // --------------------------- 42 | -------------------------------------------------------------------------------- /9. Interfaces/3. Interface with method.ts: -------------------------------------------------------------------------------- 1 | // Interface with method 2 | interface Person { 3 | firstName: string; 4 | lastName: string; 5 | age: number; 6 | sayHello(): void; 7 | } 8 | 9 | function greet(person: Person) { 10 | console.log(`Hello, ${person.firstName} ${person.lastName}!`); 11 | person.sayHello(); 12 | } 13 | 14 | const john: Person = { 15 | firstName: "John", 16 | lastName: "Doe", 17 | age: 30, 18 | sayHello() { 19 | console.log("Hi there!"); 20 | }, 21 | }; 22 | 23 | const huxn: Person = { 24 | firstName: "HuXn", 25 | lastName: "WebDev", 26 | age: 18, 27 | sayHello() { 28 | console.log("What's good"); 29 | }, 30 | }; 31 | 32 | greet(john); 33 | greet(huxn); 34 | 35 | // ---------------------------------- 36 | // Interface #3 (Interface with method properties) 37 | interface Song { 38 | songName: string; 39 | singerName?: string; 40 | printSongInfo(songName: string, singerName: string): string; 41 | } 42 | 43 | const song1: Song = { 44 | songName: "Natural", 45 | singerName: "Imagin Drigon", 46 | printSongInfo: (songName, singerName) => { 47 | return `Song: (${songName}) Singer: (${singerName})`; 48 | }, 49 | }; 50 | 51 | console.log(song1.printSongInfo("Natural", "Imagin Drigon")); 52 | // --------------------------- 53 | -------------------------------------------------------------------------------- /9. Interfaces/4. Extending Interface.ts: -------------------------------------------------------------------------------- 1 | // Interface #5 (Extending Interface) 2 | interface MovieDetails { 3 | readonly name: string; 4 | ratings: number; 5 | printMovieInfo(name: string, price: number, ratings: number): string | number; 6 | } 7 | 8 | interface MovieGenra extends MovieDetails { 9 | genra: string; 10 | } 11 | 12 | const movie1: MovieGenra = { 13 | name: "John Wick", 14 | ratings: 7, 15 | printMovieInfo(name: string, price: number, ratings: number) { 16 | return `Name: ${name}, Price: ${price}, Ratings: ${ratings}`; 17 | }, 18 | genra: "Action", 19 | }; 20 | 21 | const res = movie1.printMovieInfo("John Wick", 100, 8); 22 | console.log(res); 23 | -------------------------------------------------------------------------------- /9. Interfaces/5. Interface for classes.ts: -------------------------------------------------------------------------------- 1 | // Interface for a class 2 | interface Vehicle { 3 | start(): void; 4 | stop(): void; 5 | } 6 | 7 | // Class implementing the interface 8 | class Car implements Vehicle { 9 | start() { 10 | console.log("Car started"); 11 | } 12 | 13 | stop() { 14 | console.log("Car stopped"); 15 | } 16 | } 17 | 18 | // Usage 19 | const myCar = new Car(); 20 | myCar.start(); 21 | myCar.stop(); 22 | -------------------------------------------------------------------------------- /9. Interfaces/6. interface extension.ts: -------------------------------------------------------------------------------- 1 | // Original interface 2 | interface Car { 3 | brand: string; 4 | start(): void; 5 | } 6 | 7 | // Declaration merging (interface extension) 8 | interface Car { 9 | model: string; 10 | stop(): void; 11 | } 12 | 13 | // Usage of the extended interface 14 | const myCar: Car = { 15 | brand: "Toyota", 16 | model: "Camry", 17 | start() { 18 | console.log("Car started"); 19 | }, 20 | stop() { 21 | console.log("Car stopped"); 22 | }, 23 | }; 24 | 25 | // ------------------------------------ 26 | interface User { 27 | firstName: string; 28 | lastName: string; 29 | age: number; 30 | } 31 | 32 | interface User { 33 | printUserInfo( 34 | firstName: string, 35 | lastName: string, 36 | age: number 37 | ): string | number; 38 | } 39 | 40 | const huxn: User = { 41 | firstName: "HuXn", 42 | lastName: "WebDev", 43 | age: 18, 44 | printUserInfo(firstName, lastName, age) { 45 | return `Name: (${firstName} ${lastName}) Age: (${age})`; 46 | }, 47 | }; 48 | 49 | console.log(huxn.printUserInfo("HuXn", "WebDev", 18)); 50 | -------------------------------------------------------------------------------- /9. Interfaces/README.md: -------------------------------------------------------------------------------- 1 | # Interface 2 | 3 | In TypeScript, an interface is a way to define a contract for a specific shape of an object. It defines the properties and methods that an object should have in order to be considered compatible with that interface. 4 | 5 | To create an interface, you use the interface keyword followed by the name of the interface and the properties and methods it should contain, like this: 6 | 7 | ```ts 8 | interface Person { 9 | firstName: string; 10 | lastName: string; 11 | age: number; 12 | sayHello(): void; 13 | } 14 | ``` 15 | 16 | In this example, we're defining an interface called Person that requires any object implementing it to have firstName, lastName, and age properties that are of type string, string, and number, respectively. It also requires an object implementing the Person interface to have a method called sayHello that takes no arguments and returns nothing (void). 17 | 18 | You can then use this interface to check if an object matches its shape, like this: 19 | 20 | ```ts 21 | function greet(person: Person) { 22 | console.log(`Hello, ${person.firstName} ${person.lastName}!`); 23 | person.sayHello(); 24 | } 25 | 26 | const john: Person = { 27 | firstName: "John", 28 | lastName: "Doe", 29 | age: 30, 30 | sayHello() { 31 | console.log("Hi there!"); 32 | }, 33 | }; 34 | 35 | greet(john); 36 | ``` 37 | 38 | In this example, we're defining a function called greet that takes a Person object as its argument and logs a greeting message using its firstName and lastName properties. We're also calling the sayHello method on the Person object. 39 | 40 | Then, we're creating a john object that implements the Person interface and passing it to the greet function. Since john matches the shape of the Person interface, the code runs without any errors. 41 | 42 | Interfaces are a powerful tool in TypeScript that allow you to enforce type safety and make your code more maintainable and readable. 43 | 44 | # Extending Interfaces 45 | 46 | You can use the extends keyword to extend an interface. Here's an example: 47 | 48 | ```ts 49 | interface Animal { 50 | name: string; 51 | } 52 | 53 | interface Dog extends Animal { 54 | breed: string; 55 | } 56 | ``` 57 | 58 | In this example, we have an Animal interface with a name property. We then create a new Dog interface that extends the Animal interface using the extends keyword. The Dog interface adds a breed property to the base Animal interface. 59 | 60 | When you extend an interface, the new interface inherits all the properties and methods of the base interface, and you can also add new properties or methods to the new interface. 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/TypeScript-Complete-Course/63b93a5c80c5987b208954c920d4f71c1c782b79/README.md -------------------------------------------------------------------------------- /thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/TypeScript-Complete-Course/63b93a5c80c5987b208954c920d4f71c1c782b79/thumb.png --------------------------------------------------------------------------------