TypeScript คืออะไร?
แล้วทำไมต้อง TypeScript

TypeScript แบบขอสั้นๆ

มันคือ JavaScript แต่มี Type จบ

ทำไมต้องมี Type?

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

อ้างอิง

Last modified 10mo ago