TypeScript Cheat Sheet 📖 Checking Catch bug since compile episode

TypeScript Cheat Sheet

📖 Introduction - What to understand before you start?

1.What is TypeScript? - JavaScript + Static Type Checking Catch bug since compile episode

2.Install / run where? - npm install -g typescript compile with tsc file.ts to get .js file

3.Basic Syntax - JS-like Everything + Add: type straight behind variable / parameter

4.Naming Convention - variable / function camelCase, type / interface / class PascalCase, type no longer have to start I

5.Recommended Tools - IDE: VS Code (fully supported), Linter: ESLint + @ typescript-eslint, Build: tsc → modern: Vite / esbuild / SWC

📊 50 Codes to Know

🔹 Basics (1-5)

1.Hello World: console.log ("Hello"); - Like JS Everything

2.Typed Variable: let name: string = "John"; - specify type straight

3.Type Inference: let age = 30; - TS guess type automatic number

4.Const: const PI = 3.14; - constant type = literal

5.Compile: tsc app.ts - Create app.js

🔹 Basic Types (6-10)

6.Primitives: string, number, boolean, null, undefined - basic type

7.Array: let arr: number [] = [1, 2, 3]; - or Array < number >

8.Tuple: let pair: [string, number] = ["a," 1]; - an array that knows each type position.

9. Any / unknown: let x: any; let y: unknown; - any = closed type check, unknown = must be checked before using

10. Void / never: log () function: void {} - void does not return, never does not end

🔹 Union & Literal (11-15)

11.Union: let id: string | number; - get multiple types

12.Literal: let dir: "left" | "right"; - limitable

13. Optional: let name?: string; - may not be (undefined)

14.Nullable: let x: string | null = null; - allowed to be null

15.Type Alias: type ID = string | number; - name the type itself

🔹 Interface & Type (16-20)

16.Interface: User interface {name: string; age: number;} - Define object figure

17. Optional Prop: User interface {name: string; age?: number;} - property may not have

18.Readonly: User interface {readonly id: number;} - do not modify

19.Extended: Admin extends User interface {role: string;} - Extend interface

20.Intersection: Both type = A & B; - Total type

🔹 Functions (21-25)

21. Function Type: function add (a: number, b: number): number {...} - Specifies type param + return.

22.Arrow + Type: const add = (a: number, b: number): number = > a + b; - Arrow specifies type.

23. Optional Param: greet function (name?: string) {...} - Parameters do not need to send

24. Default Param: greet function (name: string = "World") {...} - default

25.Function Type Alias: type Callback = (data: string) = > void; - define signature

🔹 Generics (26-30)

26.Generic Function: function identity < T > (x: T): T {return x;} - GET type flex

27. Generic Interface: Interface Box < T > {value: T;} - object receive type generic

28. Generic Constraint: function get < T extends {id: number} > (x: T) {...} - Limited type

29. Multiple Generics: function pair < K, V > (k: K, v: V): [K, V] {...} - multiple type param

30.Default Generic: Interface Box < T = string > {value: T;} - default type

🔹 Classes & OOP (31-35)

31. Class: Dog class {constructor (public name: string) {}} - shorthand property

32.Access Modifiers: public, private, protected - access control

33. Implements: Dog class implements Animals {...} - Implement interface

34.Abstract: abstract class Shape {abstract area (): number;} - class does not create straight

35.Static: Math class {static PI = 3.14;} - No need for new

🔹 Type Operations (36-40)

36. Typeof: type T = typeof user; - pull type from variable

37. Keyof: type Keys = keyof User; - pull keys into union

38. Partial: Partial < User > - All properties are optional.

39. Pick / Omit: Pick < User, "name" > Omit < User, "id" > - Pick / Cut property

40. Record: Record < string, number > - object where key = string value = number

🔹 Type Guards (41-45)

41. Typeof Guard: if (typeof x = = = "string") {...} - check type

42. Instanceof: if (x instanceof Date) {...} - class check

43. In Operator: if ("name" in user) {...} - Is there a key?

44. User-Defined Guard: isUser (x: any) function: x is User {return... } - customs guard

45. Non-null Assertion: user! .name - Tell TS not to be null (be careful!)

🔹 Advanced & Config (46-50)

460.Enum: Enum Color {Red, Green, Blue} - Constant Set

47. As const: const colors = ["red," "blue"] as const; - readonly tuple

48.Type Assertion: let str = x as string; - tell type (not actually cast)

49. Import Type: import type {User} from. "/ type"; - import only type

50. tsconfig.json: {"compilerOptions": {"strict": true}} - set compiler

💡 Tips & Common Mistakes

- ⚠️ Don't use any - Destroy the purpose of TS. Use unknown + type guard instead.

- ⚠️ as not a real cast. - Just tell the compiler didn't change the runtime data.

- ⚠️! (non-null) - If runtime is null crash! Use optional chain?. Better

- ⚠️ enum beware - many teams bypass - use as const or union literal instead.

- 💡 Open strict mode - "strict": true in tsconfig catch more bugs

- 💡 Type vs Interface - Use interface for object / class, type for union / primitive

- 💡 Utility Types help a lot. - Partial, Required, Pick, Omit, Record. Know it will be more productive.