TypeScript คืออะไร?

แล้วทำไมต้อง TypeScript

TypeScript แบบขอสั้นๆ

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

ทำไมต้องมี 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 น้อยลงได้

อ้างอิง

• https://www.typescriptlang.org