TypeScript ทำงานอย่างไร

ภาพรวมการทำงาน

TypeScript เป็นภาษาที่ถูกพัฒนาโดย Microsoft เพื่อเพิ่มระบบ Static Type ให้กับ JavaScript โดยมีกระบวนการทำงานดังนี้

ขั้นตอนการทำงานของ TypeScript

1. การเขียนโค้ด TypeScript

   • เขียนโค้ด .ts หรือ .tsx ที่มีการกำหนด type

   // user.ts
   interface User {
     id: number;
     name: string;
     email: string;
     age?: number;
   }
   
   function createUser(name: string, email: string): User {
     return {
       id: Math.floor(Math.random() * 1000),
       name,
       email,
     };
   }
   
   const newUser = createUser("John Doe", "[email protected]");
   console.log(newUser);

2. การตรวจสอบ Type (Type Checking)

   • TypeScript Compiler (tsc) จะตรวจสอบ type ในระหว่างการพัฒนา
   • แจ้งเตือนข้อผิดพลาดเกี่ยวกับ type ก่อนที่โค้ดจะถูกรัน

   // ตัวอย่างข้อผิดพลาดที่ TypeScript จะตรวจพบ
   const newUser = createUser(123, "[email protected]");
   // Error: Argument of type 'number' is not assignable to parameter of type 'string'

3. การคอมไพล์ (Compilation)

   • TypeScript Compiler แปลงโค้ด TypeScript เป็น JavaScript
   • ลบส่วนที่เกี่ยวข้องกับ type ทั้งหมดออก (Type Erasure)
   • ปรับเปลี่ยนฟีเจอร์ใหม่ให้รองรับกับ JavaScript เวอร์ชันเก่าตามการตั้งค่า target

   // user.js (หลังการคอมไพล์)
   function createUser(name, email) {
     return {
       id: Math.floor(Math.random() * 1000),
       name,
       email,
     };
   }
   
   const newUser = createUser("John Doe", "[email protected]");
   console.log(newUser);

4. การสร้างไฟล์ Declaration (.d.ts)

   • สร้างไฟล์ .d.ts ที่อธิบาย type ของโค้ด
   • ใช้สำหรับ IDE และ tooling เพื่อให้ autocomplete และ type checking ทำงานได้

   // user.d.ts
   interface User {
     id: number;
     name: string;
     email: string;
     age?: number;
   }
   
   declare function createUser(name: string, email: string): User;

5. การรัน JavaScript

   • ไฟล์ JavaScript ที่ได้จากการคอมไพล์จะถูกนำไปรันในเบราว์เซอร์หรือ Node.js
   • ในขั้นตอนนี้ไม่มีการตรวจสอบ type อีกต่อไป (runtime)

โครงสร้างโปรเจค TypeScript ทั่วไป

my-typescript-project/
├── src/
│   ├── models/
│   │   └── user.ts       # ไฟล์ TypeScript ที่มีการกำหนด interface และ type
│   ├── services/
│   │   └── userService.ts # ไฟล์ TypeScript ที่มีการใช้ type จาก models
│   └── index.ts          # Entry point ของโปรเจค
├── dist/                 # โฟลเดอร์ที่เก็บไฟล์หลังการคอมไพล์
│   ├── models/
│   │   └── user.js       # ไฟล์ JavaScript ที่ได้จากการคอมไพล์
│   ├── services/
│   │   └── userService.js # ไฟล์ JavaScript ที่ได้จากการคอมไพล์
│   └── index.js          # Entry point หลังการคอมไพล์
├── node_modules/         # โฟลเดอร์ที่เก็บ dependencies
├── package.json          # ไฟล์กำหนดค่า dependencies และ scripts
├── tsconfig.json         # ไฟล์กำหนดค่าการคอมไพล์ TypeScript
└── README.md             # เอกสารอธิบายโปรเจค

สรุป

TypeScript ทำงานโดยเพิ่มระบบ type ในช่วงเวลาพัฒนา (development time) แล้วลบส่วน type ออกเมื่อคอมไพล์เป็น JavaScript ทำให้ได้ประโยชน์จากระบบ type โดยไม่มีผลกระทบต่อประสิทธิภาพในการทำงานจริง