> For the complete documentation index, see [llms.txt](https://www.monosor.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.monosor.dev/courses/typescript-101/what-is-typescript.md).

# 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

![](/files/-MM_eVMWJWAzTesQ3-zf)

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

![](/files/-MMaoYIDlkVoz5kpYG06)

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

![ถ้าใช้เป็นแล้วดูผ่านๆ จะเข้าใจทันที ตอนนี้ดูแล้วยังไม่เข้าใจก็เออออห่อหมกไปก่อน 😆](/files/-MMaqH8DtnbiIgAooTqk)

![ตัวอย่าง : useState จะคืน Array(2) มาแต่ดันใช้ Object ไปรับ](/files/-MMar4hlhjIxbsRV4f2v)

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

## อ้างอิง

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