Merge pull request #424 from Tharun007-TK/master

Created Typescript cheatsheet
2026-04-21 08:40:54 +00:00 · 2026-04-10 11:43:16 +02:00
parent 64d33cf36d a0ef3812d3
commit 81eeb36a07
3 changed files with 1491 additions and 0 deletions
--- a/languages/typescript.md
+++ b/languages/typescript.md
@@ -0,0 +1,815 @@
+# TypeScript
+
+* TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript
+
+* It adds optional static type definitions to JavaScript, enabling better tooling and error detection
+
+* In TypeScript, types are checked at compile-time, not runtime
+
+* A TypeScript file has an extension of .ts (or .tsx for React components)
+
+* TypeScript follows JavaScript syntax but adds type annotations and advanced features
+
+* We can compile and run a TypeScript file by the following commands:
+
+    `$ tsc filename.ts` (compile to JavaScript)
+    `$ node filename.js` (run the compiled JavaScript)
+    
+    Or directly: `$ ts-node filename.ts`
+
+#### TypeScript requires compilation to JavaScript before execution.
+
+## Create and execute a program
+
+1. Install TypeScript globally: `npm install -g typescript`
+1. Create the program: `touch program.ts`
+1. Write the TypeScript code and save it
+1. Compile: `tsc program.ts`
+1. Run: `node program.js`
+
+<br>
+
+### Basic Data Types
+
+| Data Type | Description | Example |
+| --------- | ----------- | ------- |
+| number | Integer and floating point values | `42`, `3.14`, `-7` |
+| string | Text values | `"hello"`, `'world'`, `` `template` `` |
+| boolean | True/false values | `true`, `false` |
+| undefined | Undefined value | `undefined` |
+| null | Null value | `null` |
+| any | Any type (disables type checking) | Can be anything |
+| unknown | Type-safe counterpart of any | Requires type checking |
+| void | Absence of any type | Function return type |
+| never | Type that never occurs | Functions that throw errors |
+| object | Non-primitive types | `{}`, `[]`, functions |
+
+<br>
+
+## Keywords and Reserved Words
+<br>
+
+- TypeScript includes all JavaScript keywords plus additional TypeScript-specific ones
+
+| Keyword | Description  | Category |
+|---------- | ---------- | --------- |
+| let | Declares a block-scoped variable | Variable Declaration |
+| const | Declares a block-scoped constant | Variable Declaration |
+| var | Declares a function-scoped variable | Variable Declaration |
+| function | Declares a function | Function |
+| class | Declares a class | Class |
+| interface | Declares an interface | Type Definition |
+| type | Declares a type alias | Type Definition |
+| enum | Declares an enumeration | Type Definition |
+| namespace | Declares a namespace | Module System |
+| module | Declares a module | Module System |
+| import | Imports from another module | Module System |
+| export | Exports from current module | Module System |
+| extends | Class/interface inheritance | Inheritance |
+| implements | Class implements interface | Inheritance |
+| public | Public access modifier | Access Modifier |
+| private | Private access modifier | Access Modifier |
+| protected | Protected access modifier | Access Modifier |
+| readonly | Read-only property | Access Modifier |
+| static | Static class member | Class Member |
+| abstract | Abstract class/method | Class |
+| async | Asynchronous function | Async Programming |
+| await | Awaits a promise | Async Programming |
+| new | Creates new instance | Object Creation |
+| this | Current object reference | Object Reference |
+| super | Parent class reference | Inheritance |
+| typeof | Gets type of variable | Type Operation |
+| keyof | Gets keys of type | Type Operation |
+| in | Property existence check | Type Guard |
+| instanceof | Instance type check | Type Guard |
+| as | Type assertion | Type Assertion |
+| is | Type predicate | Type Guard |
+| infer | Infers type in conditional types | Advanced Types |
+| declare | Ambient declarations | Declaration |
+| get | Property getter | Accessor |
+| set | Property setter | Accessor |
+| yield | Generator yield | Generator |
+
+<br>
+
+## Operators
+
+<br>
+
+| Operator | Description |
+|-|-|
+|  ( )	|  Grouping, function call, type assertion |
+|  [ ]	|  Array indexing, array/tuple types |
+|  .	|  Property access |
+|  ?.   | 	Optional chaining |
+| !   |	Non-null assertion, logical not |
+|  ~   | 	Bitwise not |
+| \-   |	Unary minus, arithmetic subtraction |
+|  \+   | 	Unary plus, arithmetic addition |
+|  \*   |	Multiplication |
+|  /   	| Division |
+|  %    |	Modulo |
+|  \*\* | Exponentiation |
+| <<   | Left shift |
+| \>>   |	Right shift |
+| \>>>   |	Unsigned right shift |
+ | <    |	Less than |
+| <=   |	Less than or equal |
+| \>    |	Greater than |
+| \>=   |	Greater than or equal |
+|  ==   |	Equality (with coercion) |
+|  ===   |	Strict equality |
+| !=  | 	Inequality (with coercion) |
+| !==  | 	Strict inequality |
+|  & | Bitwise AND |
+| ^ | Bitwise XOR |
+| \| | Bitwise OR, Union types |
+|  && | Logical AND |
+| \|\| | Logical OR |
+| ??   | Nullish coalescing |
+| ? :  | Ternary conditional |
+| =  | Assignment |
+|  += | Add and assign |
+|  -=  | Subtract and assign |
+|  *= | Multiply and assign |
+|  /= | Divide and assign |
+|  %= | Modulo and assign |
+| **= | Exponentiate and assign |
+| <<= | Left shift and assign |
+|  \>>= | Right shift and assign |
+|  &= | Bitwise AND and assign |
+|  ^= | Bitwise XOR and assign |
+|  \|= | Bitwise OR and assign |
+|  , | Comma operator |
+| => | Arrow function |
+| ... | Spread/rest operator |
+
+### Basic Data Structures
+
+### Array
+
+- Array is an ordered collection of elements of the same or different types.
+
+- Arrays are created using square brackets or Array constructor:
+
+```typescript
+let numbers: number[] = [1, 2, 3, 4];
+let fruits: Array<string> = ["apple", "banana", "cherry"];
+let mixed: (string | number)[] = [1, "two", 3];
+```
+
+- Array elements are indexed starting from 0.
+
+- Arrays are mutable - you can change, add, and remove elements.
+
+- Common array methods:
+```typescript
+let arr = [1, 2, 3];
+arr.push(4);        // Add to end: [1, 2, 3, 4]
+arr.pop();          // Remove from end: [1, 2, 3]
+arr.unshift(0);     // Add to start: [0, 1, 2, 3]
+arr.shift();        // Remove from start: [1, 2, 3]
+arr.length;         // Get length: 3
+```
+
+### Tuple
+
+- Tuple is an array with a fixed number of elements of specific types.
+
+- Tuples are created using square brackets with type annotations:
+```typescript
+let person: [string, number] = ["John", 30];
+let coordinate: [number, number] = [10, 20];
+```
+
+- Tuple elements are ordered and have specific types at each position.
+
+- You can access elements by index, but type checking ensures correctness:
+```typescript
+let point: [number, number] = [10, 20];
+console.log(point[0]); // 10 (number)
+console.log(point[1]); // 20 (number)
+```
+
+- Named tuples provide better readability:
+```typescript
+let user: [name: string, age: number] = ["Alice", 25];
+```
+
+- Optional and rest elements in tuples:
+```typescript
+let optional: [string, number?] = ["hello"];
+let rest: [string, ...number[]] = ["coords", 1, 2, 3];
+```
+
+### Set
+
+- Set is a collection of unique values of any type.
+
+- Sets are created using the Set constructor:
+```typescript
+let uniqueNumbers = new Set<number>([1, 2, 3, 2]); // {1, 2, 3}
+let stringSet = new Set<string>();
+```
+
+- Set operations:
+```typescript
+let mySet = new Set<string>();
+mySet.add("apple");     // Add element
+mySet.has("apple");     // Check existence: true
+mySet.delete("apple");  // Remove element
+mySet.clear();          // Remove all elements
+mySet.size;             // Get size
+```
+
+- Iterating over Set:
+```typescript
+let fruits = new Set(["apple", "banana", "cherry"]);
+for (let fruit of fruits) {
+    console.log(fruit);
+}
+```
+
+### Map
+
+- Map is a collection of key-value pairs where keys can be any type.
+
+- Maps are created using the Map constructor:
+```typescript
+let userMap = new Map<string, number>();
+let mixedMap = new Map<string | number, any>();
+```
+
+- Map operations:
+```typescript
+let map = new Map<string, number>();
+map.set("age", 30);         // Add key-value pair
+map.get("age");             // Get value: 30
+map.has("age");             // Check key exists: true
+map.delete("age");          // Remove key-value pair
+map.clear();                // Remove all entries
+map.size;                   // Get size
+```
+
+- Object vs Map:
+```typescript
+// Object - string/symbol keys only
+let obj: { [key: string]: number } = { "age": 30 };
+
+// Map - any type keys
+let map = new Map<any, number>();
+map.set("age", 30);
+map.set(42, 100);
+map.set(true, 1);
+```
+
+### Object Types and Interfaces
+
+- Objects store key-value pairs and are fundamental to TypeScript.
+
+- Object type annotation:
+```typescript
+let person: { name: string; age: number } = {
+    name: "John",
+    age: 30
+};
+```
+
+- Interface definition for better reusability:
+```typescript
+interface User {
+    readonly id: number;    // Read-only property
+    name: string;
+    age?: number;          // Optional property
+    [key: string]: any;    // Index signature
+}
+
+let user: User = {
+    id: 1,
+    name: "Alice"
+};
+```
+
+- Nested objects and complex types:
+```typescript
+interface Address {
+    street: string;
+    city: string;
+    country: string;
+}
+
+interface Person {
+    name: string;
+    address: Address;
+    hobbies: string[];
+}
+```
+
+### Conditional branching
+
+```typescript
+// If-else statements
+if (condition) {
+    // code block
+} else if (anotherCondition) {
+    // code block
+} else {
+    // code block
+}
+
+// Ternary operator
+let result = condition ? valueIfTrue : valueIfFalse;
+
+// Switch statement
+switch (variable) {
+    case value1:
+        // code
+        break;
+    case value2:
+        // code
+        break;
+    default:
+        // code
+        break;
+}
+```
+
+### Loops
+
+TypeScript supports all JavaScript loop constructs:
+
+#### For loop
+```typescript
+// Traditional for loop
+for (let i = 0; i < 5; i++) {
+    console.log(i);
+}
+
+// For-of loop (iterates over values)
+let fruits = ["apple", "banana", "cherry"];
+for (let fruit of fruits) {
+    console.log(fruit);
+}
+
+// For-in loop (iterates over keys/indices)
+for (let index in fruits) {
+    console.log(index, fruits[index]);
+}
+```
+
+#### While loop
+```typescript
+let i = 0;
+while (i < 5) {
+    console.log(i);
+    i++;
+}
+
+// Do-while loop
+let j = 0;
+do {
+    console.log(j);
+    j++;
+} while (j < 5);
+```
+
+#### Loop control
+```typescript
+for (let i = 0; i < 10; i++) {
+    if (i === 3) continue;  // Skip iteration
+    if (i === 7) break;     // Exit loop
+    console.log(i);
+}
+```
+
+### Function definition
+
+```typescript
+// Function declaration
+function functionName(param1: type, param2: type): returnType {
+    return value;
+}
+
+// Function expression
+const functionName = function(param: type): returnType {
+    return value;
+};
+
+// Arrow function
+const functionName = (param: type): returnType => {
+    return value;
+};
+
+// Arrow function (concise)
+const functionName = (param: type): returnType => value;
+```
+
+### Function variations
+
+```typescript
+// Optional parameters
+function greet(name: string, age?: number): string {
+    return age ? `Hello ${name}, you are ${age}` : `Hello ${name}`;
+}
+
+// Default parameters
+function multiply(a: number, b: number = 1): number {
+    return a * b;
+}
+
+// Rest parameters
+function sum(...numbers: number[]): number {
+    return numbers.reduce((total, num) => total + num, 0);
+}
+
+// Function overloads
+function process(input: string): string;
+function process(input: number): number;
+function process(input: string | number): string | number {
+    if (typeof input === 'string') {
+        return input.toUpperCase();
+    }
+    return input * 2;
+}
+
+// Generic functions
+function identity<T>(arg: T): T {
+    return arg;
+}
+
+let result = identity<string>("hello"); // Type is string
+let result2 = identity(42);             // Type inferred as number
+```
+
+### Function call
+
+```typescript
+functionName(argument1, argument2);
+
+// With optional parameters
+greet("John");          // "Hello John"
+greet("John", 25);      // "Hello John, you are 25"
+
+// With rest parameters
+sum(1, 2, 3, 4);        // 10
+
+// Generic function call
+identity<string>("hello");
+identity(42);           // Type inferred
+```
+
+### Classes
+
+```typescript
+class ClassName {
+    // Properties
+    public publicProperty: type;
+    private privateProperty: type;
+    protected protectedProperty: type;
+    readonly readonlyProperty: type;
+    static staticProperty: type;
+
+    // Constructor
+    constructor(param: type) {
+        this.publicProperty = param;
+    }
+
+    // Methods
+    public method(): returnType {
+        return value;
+    }
+
+    // Getters and setters
+    get property(): type {
+        return this.privateProperty;
+    }
+
+    set property(value: type) {
+        this.privateProperty = value;
+    }
+
+    // Static method
+    static staticMethod(): returnType {
+        return value;
+    }
+}
+
+// Inheritance
+class ChildClass extends ParentClass {
+    constructor(param: type) {
+        super(param); // Call parent constructor
+    }
+
+    // Override method
+    method(): returnType {
+        return super.method(); // Call parent method
+    }
+}
+
+// Abstract class
+abstract class AbstractClass {
+    abstract abstractMethod(): void;
+    
+    concreteMethod(): void {
+        console.log("This is implemented");
+    }
+}
+```
+
+### Key TypeScript Features
+
+* **Static Typing**: Types are checked at compile-time
+* **Type Inference**: TypeScript can often infer types automatically
+* **Optional Typing**: You can gradually add types to existing JavaScript
+* **Generics**: Create reusable components that work with multiple types
+* **Interfaces**: Define contracts for objects and classes
+* **Enums**: Create named constants
+* **Union Types**: Variables can be one of several types
+* **Intersection Types**: Combine multiple types
+* **Type Guards**: Runtime type checking
+* **Decorators**: Add metadata to classes and methods
+
+### Compilation
+
+* TypeScript code must be compiled to JavaScript before execution
+* The TypeScript compiler (`tsc`) performs type checking and transpilation
+* Configuration is managed through `tsconfig.json`
+* TypeScript can target different JavaScript versions (ES5, ES6, etc.)
+* Source maps can be generated for debugging compiled code
+
+#### Sample TypeScript Code
+
+**hello.ts**
+```typescript
+// TypeScript source code
+interface User {
+    name: string;
+    age: number;
+    isActive?: boolean;
+}
+
+class UserManager {
+    private users: User[] = [];
+
+    addUser(user: User): void {
+        this.users.push(user);
+        console.log(`Added user: ${user.name}`);
+    }
+
+    getActiveUsers(): User[] {
+        return this.users.filter(user => user.isActive ?? true);
+    }
+
+    getUserCount(): number {
+        return this.users.length;
+    }
+}
+
+// Generic function
+function processData<T>(data: T[], processor: (item: T) => T): T[] {
+    return data.map(processor);
+}
+
+// Usage
+const userManager = new UserManager();
+
+const newUser: User = {
+    name: "John Doe",
+    age: 30,
+    isActive: true
+};
+
+userManager.addUser(newUser);
+
+// Arrow functions with types
+const formatUser = (user: User): string => 
+    `${user.name} (${user.age} years old)`;
+
+// Union types and type guards
+function displayInfo(value: string | number | boolean): string {
+    if (typeof value === "string") {
+        return `Text: ${value.toUpperCase()}`;
+    } else if (typeof value === "number") {
+        return `Number: ${value.toFixed(2)}`;
+    } else {
+        return `Boolean: ${value ? "Yes" : "No"}`;
+    }
+}
+
+console.log(displayInfo("hello"));
+console.log(displayInfo(42.567));
+console.log(displayInfo(true));
+```
+
+#### Compilation Commands
+
+```bash
+# Compile single file
+tsc hello.ts
+
+# Compile with specific target
+tsc hello.ts --target ES2020
+
+# Compile with source maps
+tsc hello.ts --sourceMap
+
+# Watch mode (recompile on changes)
+tsc hello.ts --watch
+
+# Compile all files in project
+tsc
+
+# Check for errors without generating files
+tsc --noEmit
+
+# Compile with strict mode
+tsc hello.ts --strict
+```
+
+#### Compiled JavaScript Output
+
+**hello.js** (compiled from above TypeScript)
+```javascript
+"use strict";
+// JavaScript output (target ES2017)
+class UserManager {
+    constructor() {
+        this.users = [];
+    }
+    addUser(user) {
+        this.users.push(user);
+        console.log(`Added user: ${user.name}`);
+    }
+    getActiveUsers() {
+        return this.users.filter(user => user.isActive ?? true);
+    }
+    getUserCount() {
+        return this.users.length;
+    }
+}
+// Generic function (types removed)
+function processData(data, processor) {
+    return data.map(processor);
+}
+// Usage
+const userManager = new UserManager();
+const newUser = {
+    name: "John Doe",
+    age: 30,
+    isActive: true
+};
+userManager.addUser(newUser);
+// Arrow functions
+const formatUser = (user) => `${user.name} (${user.age} years old)`;
+// Type guards remain as runtime checks
+function displayInfo(value) {
+    if (typeof value === "string") {
+        return `Text: ${value.toUpperCase()}`;
+    }
+    else if (typeof value === "number") {
+        return `Number: ${value.toFixed(2)}`;
+    }
+    else {
+        return `Boolean: ${value ? "Yes" : "No"}`;
+    }
+}
+console.log(displayInfo("hello"));
+console.log(displayInfo(42.567));
+console.log(displayInfo(true));
+```
+
+#### tsconfig.json Configuration
+
+```json
+{
+  "compilerOptions": {
+    // Basic Options
+    "target": "ES2020",                     // Target JavaScript version
+    "module": "commonjs",                   // Module system
+    "lib": ["ES2020", "DOM"],              // Include library files
+    "outDir": "./dist",                     // Output directory
+    "rootDir": "./src",                     // Input directory
+    "strict": true,                         // Enable strict type checking
+    
+    // Additional Checks
+    "noUnusedLocals": true,                // Error on unused variables
+    "noUnusedParameters": true,            // Error on unused parameters
+    "noImplicitReturns": true,             // Error on missing return statements
+    "noFallthroughCasesInSwitch": true,    // Error on fallthrough cases
+    
+    // Module Resolution
+    "moduleResolution": "node",             // Module resolution strategy
+    "baseUrl": "./",                        // Base directory
+    "paths": {                              // Path mapping
+      "@/*": ["src/*"],
+      "@utils/*": ["src/utils/*"]
+    },
+    
+    // Source Maps & Debugging
+    "sourceMap": true,                      // Generate source maps
+    "inlineSourceMap": false,               // Don't inline source maps
+    "declaration": true,                    // Generate .d.ts files
+    "declarationMap": true,                 // Generate .d.ts.map files
+    
+    // Experimental
+    "experimentalDecorators": true,         // Enable decorators
+    "emitDecoratorMetadata": true,          // Emit decorator metadata
+    
+    // JavaScript Support
+    "allowJs": true,                        // Allow JavaScript files
+    "checkJs": false,                       // Type check JavaScript files
+    
+    // Other Options
+    "esModuleInterop": true,               // CommonJS/ES6 interop
+    "skipLibCheck": true,                  // Skip lib.d.ts type checking
+    "forceConsistentCasingInFileNames": true, // Consistent file names
+    "removeComments": true,                // Remove comments from output
+    "noEmitOnError": true                  // Don't emit if there are errors
+  },
+  "include": [
+    "src/**/*",                           // Include all files in src
+    "tests/**/*"                          // Include test files
+  ],
+  "exclude": [
+    "node_modules",                       // Exclude node_modules
+    "dist",                               // Exclude output directory
+    "**/*.test.ts",                       // Exclude test files from compilation
+    "**/*.spec.ts"
+  ],
+  "files": [
+    // Explicitly include specific files (optional)
+    "src/main.ts"
+  ]
+}
+```
+
+#### Package.json Scripts
+
+```json
+{
+  "name": "typescript-project",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/main.js",
+    "dev": "ts-node src/main.ts",
+    "watch": "tsc --watch",
+    "clean": "rm -rf dist",
+    "type-check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.0",
+    "ts-node": "^10.9.0",
+    "@types/node": "^18.0.0"
+  }
+}
+```
+
+#### Compilation Examples with Different Targets
+
+**Original TypeScript:**
+```typescript
+const greet = (name: string = "World"): string => `Hello, ${name}!`;
+const user = { name: "Alice", age: 30 };
+const { name, age } = user;
+```
+
+**Compiled to ES5:**
+```javascript
+var greet = function (name) {
+    if (name === void 0) { name = "World"; }
+    return "Hello, " + name + "!";
+};
+var user = { name: "Alice", age: 30 };
+var name = user.name, age = user.age;
+```
+
+**Compiled to ES2020:**
+```javascript
+const greet = (name = "World") => `Hello, ${name}!`;
+const user = { name: "Alice", age: 30 };
+const { name, age } = user;
+```
+
+#### Error Examples
+
+**TypeScript with errors:**
+```typescript
+// Type errors that prevent compilation
+let message: string = 42;              // Error: Type 'number' is not assignable to type 'string'
+let numbers: number[] = ["a", "b"];    // Error: Type 'string' is not assignable to type 'number'
+
+function add(a: number, b: number): number {
+    return a + b;
+}
+
+add("hello", "world");                 // Error: Argument of type 'string' is not assignable to parameter of type 'number'
+```
+
+**Compiler output:**
+```bash
+$ tsc error-example.ts
+error-example.ts(2,5): error TS2322: Type 'number' is not assignable to type 'string'.
+error-example.ts(3,5): error TS2322: Type 'string[]' is not assignable to type 'number[]'.
+error-example.ts(8,5): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
+```