tools / files / cheatsheets / typescript.md
typescript.md
3aee11a4 2025-08-15 Pavel Safronov | 1 | # Typescript cheatsheet |
| 2 | ||
| 3 | ## Starting | |
| 4 | ||
| 5 | - install | |
| 6 | - `npm install TypeScript` | |
| 7 | - initialize, creates `tsconfig.json` | |
| 8 | - `npx tsc --init` | |
| 9 | - build | |
| 10 | - `npx tsc` | |
| 11 | - run | |
| 12 | - `npx ts-node index.ts` | |
| 13 | ||
| 14 | ## Basics | |
| 15 | ||
| 16 | - variable declaration | |
| 17 | - `let`, `const` | |
| 18 | - NOT `var` | |
| 19 | - variable testing | |
| 20 | - `typeof foo` -> `string`, `number`, `bigint`, `boolean`, `symbol`, `undefined`, `object`, `function` | |
| 21 | - `instance of Foo` -> `true` if `foo` is an instance of `Foo` | |
| 22 | - null-ish stuff | |
| 23 | - `??` -> foo ?? 'default' -> returns `foo` it's set, otherwise returns `'default'` | |
| 24 | - `!` -> `getFoo()!` -> asserts that `getFoo()` will not return `null` or `undefined` | |
| 25 | - basic types | |
| 26 | - basics: `string`, `number`, `boolean`, `undefined`, `null`, `void`, `any`, `unknown`, `never` (skipped) | |
| 27 | ```ts | |
| 28 | const typeString: string = "This is a string"; | |
| 29 | const typeNumber: number = 42; | |
| 30 | const typeBoolean: boolean = true; | |
| 31 | const typeUndefined: undefined = undefined; | |
| 32 | const typeNull: null = null; | |
| 33 | const typeVoid: void = undefined; // void is often used for functions that do not return a value | |
| 34 | const typeUnknown: unknown = "This could be anything"; | |
| 35 | ``` | |
| 36 | - arrays: `string[]`, `number[]`, `boolean[]` | |
| 37 | ```ts | |
| 38 | const stringArray: string[] = ["apple", "banana", "cherry"]; | |
| 39 | const numberArray: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; | |
| 40 | const booleanArray: boolean[] = [true, false, true]; | |
| 41 | ||
| 42 | let sub: number[] = numberArray.slice(1, 6); // Get a sub-array from index 1 to 5 (not including index 6) | |
| 43 | sub.push(11); // Add 11 to the end of the array | |
| 44 | sub = sub.filter(num => num % 2 === 0); // Filter even numbers | |
| 45 | sub.splice(2, 1, 12); // Replace the third element with 12 | |
| 46 | sub.shift(); // Remove the first element | |
| 47 | sub = sub.concat([13, 14]); // Concatenate with another array | |
| 48 | const arraySum = sub.reduce((sum, curr) => sum + curr, 0); // Sum of elements | |
| 49 | ``` | |
| 50 | - object | |
| 51 | - `{ id: number; name: string }` | |
| 52 | - function | |
| 53 | - `const len = (param: string): number => { return param.length; }` | |
| 54 | - `const len = (param: string) => param.length;` | |
| 55 | - tuple | |
| 56 | - `[string, number]` | |
| 57 | ```ts | |
| 58 | const tuple: [string, number] = ["apple", 5]; | |
| 59 | const [fruit, count] = tuple; | |
| 60 | ``` | |
| 61 | - Date | |
| 62 | ```ts | |
| 63 | const now = new Date(); | |
| 64 | const yesterdayGD = new Date(now); | |
| 65 | yesterdayGD.setDate(now.getDate() - 1); | |
| 66 | const yesterdayGT = new Date(now.getTime() - 24 * 60 * 60 * 1000); | |
| 67 | const durationMs = now.getTime() - yesterdayGD.getTime(); | |
| 68 | ``` | |
| 69 | - Map | |
| 70 | ```ts | |
| 71 | const map: Map<string, number> = new Map([ | |
| 72 | ["a", 1], | |
| 73 | ["b", 2], | |
| 74 | ["c", 3] | |
| 75 | ]); | |
| 76 | map.get("a"); // returns 1 | |
| 77 | map.set("d", 4); | |
| 78 | map.has("b"); // returns true | |
| 79 | map.delete("c"); // removes key "c" | |
| 80 | map.clear(); // removes all entries | |
| 81 | ``` | |
| 82 | - Set | |
| 83 | ```ts | |
| 84 | const set: Set<number> = new Set([1, 2, 3]); | |
| 85 | set.add(4); | |
| 86 | set.add(2); // Duplicate, will not be added | |
| 87 | set.delete(1); | |
| 88 | ``` | |
| 89 | - Regexp | |
| 90 | ```ts | |
| 91 | const regex = /p=(\d+),(\d+) v=(-?\d+),(-?\d+)/; | |
| 92 | const match = regex.exec("p=1,2 v=-3,4")!; | |
| 93 | const pos = { | |
| 94 | x: parseInt(match[1]!, 10), | |
| 95 | y: parseInt(match[2]!, 10) | |
| 96 | }; | |
| 97 | const vel = { | |
| 98 | x: parseInt(match[3]!, 10), | |
| 99 | y: parseInt(match[4]!, 10) | |
| 100 | }; | |
| 101 | ``` | |
| 102 | - interfaces | |
| 103 | - example, interface | |
| 104 | ```ts | |
| 105 | interface Info { | |
| 106 | id: number; | |
| 107 | name: string; | |
| 108 | coords: { | |
| 109 | x: number; | |
| 110 | y: number; | |
| 111 | }; | |
| 112 | expiration?: Date; | |
| 113 | tags: string[] | null; | |
| 114 | ||
| 115 | getInfo: () => string; | |
| 116 | findTag(tag: string): boolean; | |
| 117 | ||
| 118 | get size(): number; | |
| 119 | set size(value: number | string); | |
| 120 | } | |
| 121 | ``` | |
| 122 | - example, initialization | |
| 123 | ```ts | |
| 124 | const info: Info = { | |
| 125 | id: 1, | |
| 126 | name: "Info Object", | |
| 127 | coords: { x: 10, y: 20 }, | |
| 128 | expiration: new Date(), | |
| 129 | tags: ["tag1", "tag2"], | |
| 130 | ||
| 131 | getInfo() { | |
| 132 | return `ID: ${this.id}, Name: ${this.name}, Coords: (${this.coords.x}, ${this.coords.y})`; | |
| 133 | }, | |
| 134 | ||
| 135 | findTag(tag: string): boolean { | |
| 136 | return this.tags ? this.tags.includes(tag) : false; | |
| 137 | }, | |
| 138 | ||
| 139 | get size(): number { | |
| 140 | return this.tags ? this.tags.length : 0; | |
| 141 | }, | |
| 142 | set size(value: number | string) { | |
| 143 | if (typeof value === "number") { | |
| 144 | this.tags = Array(value).fill("defaultTag"); | |
| 145 | } else if (typeof value === "string") { | |
| 146 | this.tags = [value]; | |
| 147 | } | |
| 148 | } | |
| 149 | }; | |
| 150 | ``` | |
4a4e9c33 2025-08-17 Pavel Safronov | 151 | - generics |
| 152 | - example | |
| 153 | ```ts | |
| 154 | interface DataSource<ResponseType> { | |
| 155 | fetchData(): ResponseType; | |
| 156 | } | |
| 157 | interface DataSource2<ResponseType extends { status: number }> { | |
| 158 | fetchData(): ResponseType; | |
| 159 | } | |
| 160 | ``` |