# TypeScript คืออะไร?

## TypeScript แบบขอสั้นๆ

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

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

จริงๆ แล้ว JavaScript ก็มี Type แหละ แต่มันมีความเป็น Dynamically Typed แปลว่าประเภทของตัวแปรหรือฟังก์ชั่นต่างๆ จะเปลี่ยนได้ตลอดเวลา ต่างกับ TypeScript ที่จะเป็น Statically Typed คือต้องมีการกำหนดประเภทให้มัน

```javascript
// JavaScript
let a = 42 // a เป็น int
let b = 'test' // b เป็น string
b = a * 10 // b กลายเป็น int (420)
```

ข้อดีของ JavaScript แบบดั้งเดิมคือ เขียนง่าย เข้าใจง่าย และมีความอิสระ อยากแก้ค่าในตัวแปรแบบไหนก็ทำได้เลย 

แล้วมันไม่ดียังไง?

ขอยกตัวอย่างง่ายๆ เช่นเวลาเราเขียนเว็บแล้วรับค่าจากฟอร์ม  แต่ว่าเราลืมแปลงให้มันเป็น `int` 

```javascript
function sum(a, b) {
  return a + b
}

// สมมุติว่ามีค่าเป็น "10" ที่ดันเป็น string เพราะอ่านค่าจาก Form
sum(input.value, 30)

// อยากได้ 40 แต่ดันเป็น "1030" เพราะเป็นการเอาเลขมาต่อกันเฉยๆ ไม่ได้บวกกัน
```

วิธีแก้ไขในแบบ JavaScript จะต้องแก้ที่ปลายเหตุ แบบนี้

```javascript
function sum(a, b) {
  return Number(a) + Number(b)
}

sum("10", 30) // 40
```

อีกตัวอย่างหนึ่งที่พบบ่อยคือการ "พิมพ์ผิด" อย่างเช่นการเรียกตัวแปรในออบเจ็กต์

```javascript
const user = {
  firstName: "ประหยัด",
  lastName: "จานโอชา",
  job: "Dictator"
}

console.log(user.firstname) // undefined
```

ถ้าเราเลือกใช้ TypeScript โค้ดจะเป็นแบบนี้แทน

```typescript
function sum(a: number, b: number) { // กำหนดให้ a และ b ต้องเป็น type number
  return a + b
}

sum("10", 30)
```

พอเรารันโค้ด (หรือใน Code Editor) จะขึ้น Error มาให้เราเห็นเลย ว่าเราใช้งานผิด Type

![](https://912784263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMMgc-z4G6riCzlCyo9%2F-MM_UwreShJkDg3Y7DOe%2F-MM_eVMWJWAzTesQ3-zf%2Fimage.png?alt=media\&token=5c50a705-1464-4722-8e44-fbcd6baa8125)

ส่วนการสร้างออบเจ็กต์ Type จะถูกสร้างตามโดยอัตโนมัติ (เรียกว่า [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html) "การอนุมานประเภท" 😅) ทำให้เมื่อเรียก Attribute ที่ไม่มีอยู่แล้วจะเกิด Error ขึ้นเช่นกัน

![](https://912784263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMMgc-z4G6riCzlCyo9%2F-MM_ejRcDVIX9TEa3Lm3%2F-MMaoYIDlkVoz5kpYG06%2Fimage.png?alt=media\&token=f9c2b55b-9108-48be-bc84-434f9b3944f4)

นอกจากนี้ ถ้าไลบรารี่สนับสนุน TypeScript (ซึ่งส่วนใหญ่สนับสนุนแล้ว) เราจะรู้ได้ทันทีว่าสิ่งที่ Import มารับ Argument แบบไหน คืนค่าประเภทไหนออกมา แล้วเมื่อเรานำไปใช้แต่ใช้งานผิด ก็จะทำการเตือนเราทันที

![ถ้าใช้เป็นแล้วดูผ่านๆ จะเข้าใจทันที ตอนนี้ดูแล้วยังไม่เข้าใจก็เออออห่อหมกไปก่อน 😆](https://912784263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMMgc-z4G6riCzlCyo9%2F-MM_ejRcDVIX9TEa3Lm3%2F-MMaqH8DtnbiIgAooTqk%2Fimage.png?alt=media\&token=0ba9771f-0bb7-4e4a-b59b-4e99bf723d1e)

![ตัวอย่าง : useState จะคืน Array(2) มาแต่ดันใช้ Object ไปรับ](https://912784263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMMgc-z4G6riCzlCyo9%2F-MM_ejRcDVIX9TEa3Lm3%2F-MMar4hlhjIxbsRV4f2v%2Fimage.png?alt=media\&token=f08bd457-df71-411c-83ce-90aeb4f3c1c6)

การใช้ TypeScript แทน JavaScript ถึงแม้ว่ามันจะมี Learning Curve ที่มากขึ้น แต่จะทำให้เราและทีมเขียนโค้ดได้อย่างรัดกุมมากขึ้น และเกิด Bug น้อยลงได้

## อ้างอิง

* [https://www.typescriptlang.org](https://www.typescriptlang.org/)