Documentation
กลับไปหมวดหมู่

TypeScript พื้นฐาน

เวลาอ่านโดยประมาณ: ~15 นาที

TypeScript พื้นฐาน

TypeScript เป็นภาษาที่พัฒนามาจาก JavaScript โดยเพิ่มความสามารถในการกำหนดประเภทข้อมูล (static typing) ช่วยให้เขียนโค้ดที่ปลอดภัยและบำรุงรักษาได้ง่ายขึ้น

ทำไมเราถึงเลือก TypeScript แทน JavaScript

"ใน PERB Stack เราใช้ TypeScript ทุกที่—ตั้งแต่ Next.js frontend ไปจนถึง Elysia backend ข้อดีมีมากกว่า learning curve ตอนแรกเยอะมาก"

การตัดสินใจ

เรามีทางเลือก: ใช้ JavaScript ต่อไป หรือเปลี่ยนมา TypeScript เราเลือก TypeScript สำหรับทั้ง stack

ทำไมไม่ใช้แค่ JavaScript?

  • ไม่มี type checking หมายความว่า bug จะปรากฏตอน runtime เท่านั้น
  • Refactor codebase ใหญ่ๆ ยาก
  • IDE support น้อยกว่า (autocomplete, go to definition)
  • คนในทีมต้องอ่านโค้ดมากขึ้นเพื่อเข้าใจ data structures
  • AI assistants generate โค้ดที่ไม่น่าเชื่อถือเท่าถ้าไม่มี types

TypeScript ให้อะไรเราบ้าง:

  • ตรวจจับ error ก่อนรันโค้ด
  • IDE support ดีขึ้นด้วย IntelliSense
  • โค้ดอธิบายตัวเองผ่าน types
  • Refactor ได้อย่างมั่นใจ
  • AI generate โค้ดที่แม่นยำกว่าเมื่อมี type hints

ข้อสังเกตสำคัญ:

"ทุก tool ใน stack ของเรา (Next.js, Elysia, Drizzle, Better Auth) มี first-class TypeScript support การใช้ JavaScript จะเหมือนกับการต่อสู้กับ tools ที่ใช้"

ข้อดี-ข้อเสีย

ข้อดีข้อเสีย
ตรวจจับ error ตอน compileLearning curve ตอนแรก
IDE support ดีมากต้องมี build step
โค้ดอธิบายตัวเองSyntax verbose กว่า
Refactor ได้อย่างปลอดภัยต้อง config (tsconfig)
AI ช่วยได้ดีกว่าบาง JS libraries ไม่มี types
Tooling ecosystem ดีบางทีต้องเขียน type ซับซ้อน

เปรียบเทียบ TypeScript vs JavaScript

ด้านTypeScriptJavaScript
Type SafetyStatic typingDynamic (runtime เท่านั้น)
IDE SupportAutocomplete ดีมากพื้นฐาน
Refactoringปลอดภัยด้วย type checkingเสี่ยง
ตรวจจับ Bugตอน compileตอน runtime
Learning Curveสูงกว่าตอนแรกเริ่มต้นง่ายกว่า
AI Code Generationแม่นยำกว่าน่าเชื่อถือน้อยกว่า
Build Stepจำเป็นไม่ต้อง

การประกาศตัวแปร

ฟังก์ชัน

ตัวอย่างแบบโต้ตอบ

ลองแก้ไขโค้ดด้านล่างและกดรันเพื่อดูผลลัพธ์ได้เลย!

Union Types

Union types ใช้เมื่อค่าสามารถเป็นได้หลายประเภท:

Intersection Types

Intersection types รวม types หลายตัวเข้าด้วยกัน:

Generics

Generics ช่วยสร้างโค้ดที่ใช้ได้กับหลาย types โดยไม่สูญเสีย type safety:

Generic Functions

Generic Interfaces

Generic Constraints

Utility Types

TypeScript มี utility types ในตัวที่ช่วยแปลง types:

Partial<T>

ทำให้ properties ทั้งหมดเป็น optional:

Required<T>

ทำให้ properties ทั้งหมดเป็น required:

Readonly<T>

ทำให้ properties ทั้งหมดเป็น readonly:

Pick<T, K>

เลือกเฉพาะ properties ที่ต้องการ:

Omit<T, K>

เอา properties ที่ไม่ต้องการออก:

Record<K, T>

สร้าง object type ที่มี keys เฉพาะ:

Type Assertions

Type assertions บอก TypeScript ว่าเรารู้ type ที่แน่นอนกว่า:

Type Guards

Type guards ช่วยตรวจสอบและแคบ type:

Enums

Enums กำหนดชุดค่าคงที่:

Type vs Interface

ควรใช้ type หรือ interface?

แนวทางปฏิบัติ:

  • ใช้ interface สำหรับ object types ที่อาจมี implementation
  • ใช้ type สำหรับ unions, tuples, primitives, หรือ complex types

ข้อดีของ TypeScript

  1. Type Safety - ตรวจจับข้อผิดพลาดได้ก่อน runtime
  2. Better IDE Support - IntelliSense และ autocomplete ที่ดีกว่า
  3. Easier Refactoring - แก้โค้ดได้อย่างมั่นใจ
  4. Self-Documenting - โค้ดอธิบายตัวเองได้ดีขึ้น
  5. Catch Bugs Early - พบปัญหาตอน compile แทนที่จะเป็นตอน runtime
  6. Better Collaboration - ทีมเข้าใจโค้ดได้ง่ายขึ้น

Best Practices

1. เปิดใช้ Strict Mode

2. หลีกเลี่ยง any

3. ใช้ readonly เมื่อเหมาะสม

4. ใช้ Utility Types แทนการเขียนซ้ำ

สรุป

TypeScript เพิ่มความแข็งแกร่งให้กับ JavaScript ด้วย:

  • ✅ Type system ที่ช่วยป้องกันข้อผิดพลาด
  • ✅ Generics สำหรับโค้ดที่ยืดหยุ่น
  • ✅ Utility types ที่ช่วยแปลง types
  • ✅ Type guards ที่ช่วยแคบ types
  • ✅ Better tooling สำหรับ IDE

เรียนรู้และใช้ TypeScript จะทำให้คุณเขียนโค้ดที่มั่นใจและบำรุงรักษาง่ายขึ้น!

แหล่งข้อมูลเพิ่มเติม

เอกสารอย่างเป็นทางการ

แนะนำสำหรับการเรียนรู้เพิ่มเติม