TypeScript Cheat Sheet 📖 Checking ˖ จับ bug ตั้งแต่ตอน compile

TypeScript Cheat Sheet

📖 เกริ่นนำ — ต้องเข้าใจอะไรบ้างก่อนเริ่ม

1. TypeScript คืออะไร? — JavaScript + Static Type Checking ˖ จับ bug ตั้งแต่ตอน compile

2. ติดตั้ง/รันที่ไหน? — npm install -g typescript ˖ compile ด้วย tsc file.ts จะได้ไฟล์ .js

3. Syntax พื้นฐาน — เหมือน JS ทุกอย่าง + เพิ่ม :type ตรงหลังตัวแปร/parameter

4. Naming Convention — ตัวแปร/function camelCase, type/interface/class PascalCase, type ไม่ต้องขึ้นต้น I อีกต่อไป

5. Tools ที่แนะนำ — IDE: VS Code (รองรับเต็มที่), Linter: ESLint + @typescript-eslint, Build: tsc → modern: Vite/esbuild/SWC

📊 50 โค้ดที่ต้องรู้

🔹 Basics (1-5)

1. Hello World: console.log("Hello"); — เหมือน JS ทุกอย่าง

2. Typed Variable: let name: string = "John"; — ระบุ type ตรงๆ

3. Type Inference: let age = 30; — TS เดา type ˖ number อัตโนมัติ

4. Const: const PI = 3.14; — ค่าคงที่ type=literal

5. Compile: tsc app.ts — สร้าง app.js

🔹 Basic Types (6-10)

6. Primitives: string, number, boolean, null, undefined — ชนิดพื้นฐาน

7. Array: let arr: number[] = [1, 2, 3]; — หรือ Array<number>

8. Tuple: let pair: [string, number] = ["a", 1]; — array ที่รู้ type แต่ละตำแหน่ง

9. any / unknown: let x: any; let y: unknown; — any = ปิด type check, unknown = ต้อง check ก่อนใช้

10. void / never: function log(): void {} — void ˖ ไม่ return, never ˖ ไม่จบ

🔹 Union & Literal (11-15)

11. Union: let id: string | number; — รับหลาย type

12. Literal: let dir: "left" | "right"; — จำกัดค่าได้

13. Optional: let name?: string; — อาจไม่มี (undefined ได้)

14. Nullable: let x: string | null = null; — อนุญาตให้เป็น null

15. Type Alias: type ID = string | number; — ตั้งชื่อ type เอง

🔹 Interface & Type (16-20)

16. Interface: interface User { name: string; age: number; } — กำหนดรูป object

17. Optional Prop: interface User { name: string; age?: number; } — property อาจไม่มี

18. Readonly: interface User { readonly id: number; } — ห้ามแก้ไข

19. Extends: interface Admin extends User { role: string; } — ขยาย interface

20. Intersection: type Both = A & B; — รวม type

🔹 Functions (21-25)

21. Function Type: function add(a: number, b: number): number {...} — ระบุ type param + return

22. Arrow + Type: const add = (a: number, b: number): number => a + b; — Arrow ระบุ type

23. Optional Param: function greet(name?: string) {...} — parameter ไม่ต้องส่ง

24. Default Param: function greet(name: string = "World") {...} — ค่า default

25. Function Type Alias: type Callback = (data: string) => void; — กำหนด signature

🔹 Generics (26-30)

26. Generic Function: function identity<T>(x: T): T { return x; } — รับ type ยืดหยุ่น

27. Generic Interface: interface Box<T> { value: T; } — object รับ type generic

28. Generic Constraint: function get<T extends { id: number }>(x: T) {...} — จำกัด type

29. Multiple Generics: function pair<K, V>(k: K, v: V): [K, V] {...} — หลาย type param

30. Default Generic: interface Box<T = string> { value: T; } — ค่า default type

🔹 Classes & OOP (31-35)

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

32. Access Modifiers: public, private, protected — ควบคุมการเข้าถึง

33. Implements: class Dog implements Animal {...} — implement interface

34. Abstract: abstract class Shape { abstract area(): number; } — class ไม่สร้างตรงได้

35. Static: class Math { static PI = 3.14; } — ไม่ต้อง new

🔹 Type Operations (36-40)

36. typeof: type T = typeof user; — ดึง type จากตัวแปร

37. keyof: type Keys = keyof User; — ดึง keys มาเป็น union

38. Partial: Partial<User> — ทำทุก property เป็น optional

39. Pick / Omit: Pick<User, "name"> Omit<User, "id"> — เลือก/ตัด property

40. Record: Record<string, number> — object ที่ key=string value=number

🔹 Type Guards (41-45)

41. typeof Guard: if (typeof x === "string") {...} — เช็ค type

42. instanceof: if (x instanceof Date) {...} — เช็ค class

43. in Operator: if ("name" in user) {...} — มี key หรือไม่

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

45. Non-null Assertion: user!.name — บอก TS ว่าไม่ null แน่ (ระวัง!)

🔹 Advanced & Config (46-50)

46. Enum: enum Color { Red, Green, Blue } — ชุดค่าคงที่

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

48. Type Assertion: let str = x as string; — บอก type (ไม่ได้ cast จริง)

49. Import Type: import type { User } from "./types"; — import เฉพาะ type

50. tsconfig.json: { "compilerOptions": { "strict": true } } — ตั้งค่า compiler

💡 Tips & Common Mistakes

- ⚠️ อย่าใช้ any — ทำลายจุดประสงค์ของ TS ใช้ unknown + type guard แทน

- ⚠️ as ไม่ได้ cast จริง — แค่บอก compiler ไม่ได้เปลี่ยนข้อมูล runtime

- ⚠️ ! (non-null) — ถ้า runtime เป็น null ˖ crash! ใช้ optional chain ?. ดีกว่า

- ⚠️ enum ระวัง — หลายทีมเลี่ยง — ใช้ as const หรือ union literal แทน

- 💡 เปิด strict mode — "strict": true ใน tsconfig ˖ จับ bug ได้มากขึ้น

- 💡 Type vs Interface — ใช้ interface สำหรับ object/class, type สำหรับ union/primitive

- 💡 Utility Types ช่วยได้เยอะ — Partial, Required, Pick, Omit, Record ˖ รู้ไว้จะ productive ขึ้น