คอร์ส
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 1yr ago
Copy link