จากศูนย์สู่ฮีโร่ใน TypeScript
TypeScript ช่วยให้โค้ด JavaScript ของคุณปลอดภัยยิ่งขึ้น ช่วยให้คุณพบข้อผิดพลาดได้ก่อนที่จะรันโค้ด คู่มือนี้จะครอบคลุมเส้นทางตั้งแต่แนวคิดพื้นฐานไปจนถึงระดับสูง
TypeScript เพิ่มการกำหนดประเภทแบบคงที่ (static typing) ให้กับ JavaScript โดยจะแปลงโค้ดของคุณให้เป็น JavaScript ปกติเพื่อใช้งานบนเบราว์เซอร์
ประเภทพื้นฐาน
- number: จำนวนเต็มหรือทศนิยม
- boolean: true หรือ false
- string: ข้อความ
- symbol: ตัวระบุที่ไม่ซ้ำกัน
- bigint: จำนวนเต็มที่มีค่าขนาดใหญ่
การระบุประเภท (Type Annotations) คุณสามารถกำหนดประเภทได้ในขณะที่สร้างตัวแปร: let name: string = "Alice"; let age: number = 30;
อาร์เรย์และออบเจกต์
- Arrays: let fruits: string[] = ["apple", "banana"];
- Objects: let user: { name: string; age: number } = { name: "Bob", age: 25 };
ฟังก์ชัน คุณสามารถระบุสิ่งที่ฟังก์ชันรับเข้ามาและสิ่งที่ฟังก์ชันส่งคืนได้ ใช้ void หากฟังก์ชันไม่มีการส่งค่าคืน function greet(name: string): string { return "Hello, " + name; }
โครงสร้างระดับสูง
- Type Aliases: กำหนดชื่อที่กำหนดเองสำหรับประเภทข้อมูล
- Interfaces: กำหนดโครงสร้างของออบเจกต์
- Enums: สร้างชุดของค่าคงที่ที่มีชื่อเรียก
- Tuples: สร้างอาร์เรย์ที่มีจำนวนสมาชิกคงที่และประเภทข้อมูลที่เฉพาะเจาะจง
ตรรกะที่ซับซ้อน
- Union Types: อนุญาตให้ตัวแปรหนึ่งตัวเก็บข้อมูลได้มากกว่าหนึ่งประเภท
- Intersection Types: รวมหลายประเภทเข้าด้วยกันเป็นประเภทเดียว
- Generics: สร้างคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ซึ่งทำงานได้กับหลายประเภท
- Utility Types: ใช้เครื่องมือที่มีมาให้ในตัว เช่น Partial หรือ Pick เพื่อเปลี่ยนแปลงประเภทข้อมูล
แนวทางปฏิบัติที่ดีที่สุด
- ใช้ type สำหรับการสร้าง alias ง่ายๆ และข้อมูลประเภทพื้นฐาน
- ใช้ interface สำหรับโครงสร้างของออบเจกต์
- หลีกเลี่ยงการใช้ any เพราะจะทำให้ความปลอดภัยของ TypeScript หมดไป
- ใช้ unknown แทน any เมื่อคุณไม่แน่ใจในประเภทข้อมูล
- ปล่อยให้คอมไพเลอร์อนุมานประเภทข้อมูลเองเมื่อโค้ดมีความชัดเจน
TypeScript ช่วยให้คุณสร้างแอปพลิเคชันขนาดใหญ่ได้อย่างมั่นใจ
แหล่งที่มา: https://dev.to/miasalazar/from-zero-to-hero-in-typescript-425j