Comment on page
TypeScript คืออะไร?
แล้วทำไมต้อง TypeScript
มันคือ JavaScript แต่มี Type จบ
จริงๆ แล้ว JavaScript ก็มี Type แหละ แต่มันมีความเป็น Dynamically Typed แปลว่าประเภทของตัวแปรหรือฟังก์ชั่นต่างๆ จะเปลี่ยนได้ตลอดเวลา ต่างกับ TypeScript ที่จะเป็น Statically Typed คือต้องมีการกำหนดประเภทให้มัน
// JavaScript
let a = 42 // a เป็น int
let b = 'test' // b เป็น string
b = a * 10 // b กลายเป็น int (420)
ข้อดีของ JavaScript แบบดั้งเดิมคือ เขียนง่าย เข้าใจง่าย และมีความอิสระ อยากแก้ค่าในตัวแปรแบบไหนก็ทำได้เลย
แล้วมันไม่ดียังไง?
ขอยกตัวอย่างง่ายๆ เช่นเวลาเรา เขียนเว็บแล้วรับค่าจากฟอร์ม แต่ว่าเราลืมแปลงให้มันเป็น
int function sum(a, b) {
return a + b
}
// สมมุติว่ามีค่าเป็น "10" ที่ดันเป็น string เพราะอ่านค่าจาก Form
sum(input.value, 30)
// อยากได้ 40 แต่ดันเป็น "1030" เพราะเป็นการเอาเลขมาต่อกันเฉยๆ ไม่ได้บวกกัน
วิธีแก้ไขในแบบ JavaScript จะต้องแก้ที่ปลายเหตุ แบบนี้
function sum(a, b) {
return Number(a) + Number(b)
}
sum("10", 30) // 40
อีกตัวอย่างหนึ่งที่พบบ่อยคือการ "พิมพ์ผิด" อย่างเช่นการเรียกตัวแปรในออบเจ็กต์
const user = {
firstName: "ประหยัด",
lastName: "จานโอชา",
job: "Dictator"
}
console.log(user.firstname) // undefined
ถ้าเราเลือกใช้ TypeScript โค้ดจะเป็นแบบนี้แทน
function sum(a: number, b: number) { // กำหนดให้ a และ b ต้องเป็น type number
return a + b
}
sum("10", 30)
พอเรารันโค้ด (หรือใน Code Editor) จะขึ้น Error มาให้เราเห็นเลย ว่าเราใช้งานผิด Type
ส่วนการสร้างออบเจ็กต์ Type จะถูกสร้างตามโดยอัตโนมัติ (เรียกว่า Type Inference "การอนุมานประเภท" 😅) ทำให้เมื่อเรียก Attribute ที่ไม่มีอยู่แล้วจะเกิด Error ขึ้นเช่นกัน
นอกจากนี้ ถ้าไลบรารี่สนับสนุน TypeScript (ซึ่งส่วนใหญ่สนับสนุนแล้ว) เราจะรู้ได้ทันทีว่าสิ่งที่ Import มารับ Argument แบบไหน คืนค่าประเภทไหนออกมา แล้วเมื่อเรานำไปใช้แต่ใช้งานผิด ก็จะทำการเตือนเราทันที
ถ้าใช้เป็นแล้วดูผ่านๆ จะเข้าใจทันที ตอนนี้ดูแล้วยังไม่เข้าใจก็เออออห่อหมกไปก่อน 😆
ตัวอย่าง : useState จะคืน Array(2) มาแต่ดันใช้ Object ไปรับ
การใช้ TypeScript แทน JavaScript ถึงแม้ว่ามันจะมี Learning Curve ที่มากขึ้น แต่จะทำให้เราและทีมเขียนโค้ดได้อย่างรัดกุมมากขึ้น และเกิด Bug น้อยลงได้
Last modified 3yr ago