ทำความรู้จักว่า TypeScript คืออะไร แก้ปัญหาอะไร และเขียนไฟล์ที่มีการระบุชนิดไฟล์แรกของคุณ
เปิดบทเรียนนี้ใน Kodokonคุณรู้จัก JavaScript อยู่แล้ว ภาษาที่ทำให้หน้าเว็บโต้ตอบได้ TypeScript คือส่วนขยายของ JavaScript: โค้ด JavaScript ที่ถูกต้องทุกชิ้นก็เป็นโค้ด TypeScript ด้วยเช่นกัน สิ่งที่เพิ่มเข้ามาอย่างสำคัญคือ ชนิดข้อมูล (types) ชนิดข้อมูลอธิบายลักษณะของค่าหนึ่ง ๆ ว่าเป็นข้อความ ตัวเลข ค่าจริงหรือเท็จ... เมื่อคุณระบุชนิดข้อมูลของตัวแปร คุณก็ให้คอมพิวเตอร์ตรวจสอบโค้ดของคุณได้ ก่อน ที่จะรัน
ทำไมสิ่งนี้ถึงมีประโยชน์? ใน JavaScript ไม่มีอะไรมาห้ามคุณส่งข้อความเข้าไปในจุดที่ต้องการตัวเลข โปรแกรมก็ยังรันได้... และให้ผลลัพธ์ที่ไร้เหตุผล ซึ่งมักถูกค้นพบในภายหลังมาก ลองดูตัวอย่างนี้: ฟังก์ชันต้องการราคาเป็นตัวเลข แต่กลับได้รับข้อความ
function addTax(price) {
return price + price * 0.2;
}
const total = addTax("100");
console.log(total); // "10020" instead of 120!ด้วย TypeScript คุณเพิ่ม การระบุชนิดข้อมูล (type annotation): ทวิภาค (colon) ตามด้วยชนิดข้อมูล วางไว้ถัดจากชื่อพารามิเตอร์หรือตัวแปรทันที จากนั้นโค้ด TypeScript จะถูก คอมไพล์ นั่นคือแปลเป็น JavaScript ธรรมดาโดยเครื่องมือที่เรียกว่าคอมไพเลอร์ (tsc) และในขั้นตอนนี้เองที่ข้อผิดพลาดเรื่องชนิดข้อมูลจะถูกตรวจพบและรายงานออกมา
function addTax(price: number): number {
return price + price * 0.2;
}
const total = addTax(100);
console.log(total); // 120ตอนนี้มาเขียนไฟล์ที่มีการระบุชนิดไฟล์แรกของคุณกัน ไฟล์ TypeScript ใช้นามสกุล .ts แทน .js ภายในไฟล์ คุณเขียน JavaScript ทั่วไป เสริมด้วยการระบุชนิดข้อมูล
let firstName: string = "Sarah";
let age: number = 28;
console.log(firstName + " is " + age + " years old.");