ในโลกของการพัฒนาซอฟต์แวร์สมัยใหม่ TypeScript ได้กลายเป็นมาตรฐานที่ได้รับความนิยมอย่างสูง มันคือ Type Superset ของ JavaScript ที่เพิ่มระบบการตรวจสอบประเภทข้อมูลแบบ Static Typing เข้ามา ทำให้โค้ดมีความเสถียรและบำรุงรักษาได้ง่ายขึ้นสำหรับโปรเจกต์ขนาดใหญ่ อย่างไรก็ตาม เนื่องจากเบราว์เซอร์ส่วนใหญ่ยังคงทำงานบนพื้นฐานของ ECMAScript หรือ JavaScript ดั้งเดิม นักพัฒนากลุ่มนี้จึงจำเป็นต้องเข้าใจกระบวนการสำคัญที่เรียกว่า ‘Transpilation’ ซึ่งก็คือน้ำท่วมจากภาษาที่มีคุณสมบัติเสริมให้กลับไปเป็นรูปแบบ JS บริสุทธิ์
TypeScript คืออะไร และทำไมต้องแปลงมัน?
ก่อนที่จะลงรายละเอียดวิธีการ เราควรรู้จักแก่นแท็กว่า TS ไม่ใช่ Javascript แต่เป็นการขยายตัวของมัน หน้าหน้าที่หลักๆ ของ Typescript Compiler (tsc) จึงไม่ใช่แค่แปลไวยากรณ์เท่านั้น แต่มันยังมีภารกิจในการกำจัดองค์ประกอบที่ไม่ถูกรองรับโดย runtime environment เช่น Interfaces, Generics Declarations รวมถึง Annotation ต่าง ๆ ออกทั้งหมด เหลือไว้เพียงแต่ Logic การทำงานที่เป็น Pure JavaScript เท่านั้นเอง นี่คือเหตุผลที่เราไม่สามารถนำไฟล์ .ts ไปเรียกใช้ใน Browser โดยตรงได้ เพราะเครื่องมือฝั่ง Client ต้องการเฉพาะ Output เป็น *.js;
กลไกของการ Transpile: จาก Type Safety สู่ Runtime Code
เมื่อเราพูดถึง ‘วิธีแปลง’ จริง ๆ แล้วหมายถึงกระบวนการคอมพाइलโค้ด TypeScript ให้เข้าสู่มาตรฐาน JavaScript ที่กำหนดเป้าหมาย เครื่องมืออย่าง `typescript` CLI หรือ Build Tools อย่าง Webpack/Rollup จะเข้ามาจัดการส่วนนี้ กระบวนการที่เกิดขึ้นมีดังนี้:
- Type Checking Phase: tsc จะทำการตรวจสอบความถูกต้องทางประเภทข้อมูลของทุกบรรทัดโค้ด เพื่อหาข้อผิดพลาดตั้งแต่ขั้นตอน Compile Time ก่อนที่โปรแกรมจะรันจริง
- Stripping Phase: ในขั้นตอนนี้ ตัวแปรหรือโครงสร้างใดก็ตามที่มีคุณสมบัติเป็น