# มือใหม่ Nuxt.js + TypeScript pt.1 Type script เบื้องต้น

สวัสดีครับ พอดีผมชอบอ่านบทความเกี่ยวกับ Best practice อยู่บ่อย ๆ เพื่อเป็นแนวทางในการศึกษาต่อว่าเราควรรู้อะไรบ้างสำหรับการเป็น Front-End ที่ดี หลายสำนักหลายเจ้าส่วนใหญ่มักจะพูดเป็นเสียงเดียวกันว่าควรศึกษาเจ้า TypeScript เอาไว้ และหลังจากที่ผมได้ศึกษาและเล่นอยู่พักหนึ่งก็ชอบและอยากจะมาแชร์แนวทางสำหรับมือใหม่ที่สนใจการใช้ Nuxt.js + TypeScript เหมือนกันครับ

> :warning: บทความนี้ผมไม่ได้พูดถึงการติดตั้งหรือการ Compile ตัว TypeScript นะครับ เพราะผมไม่ได้กะให้ลองโค้ดและรันตามเลยในบทนี้ อยากให้อ่านเพื่อเห็น Concept ของตัว TypeScript ไปก่อน แล้วเดียวเราค่อยไป Setup และ เขียนจริงจังตอนใช้ Nuxt.js ครับผม

### &#x20;ทำไมต้อง TypeScript ?

1. เข้าใจ Code มากขึ้น ยกตัวอย่างเช่นการส่งค่าเข้าสู่ Function หากเราใช้ TypeScript ช่วย เราจะรู้ได้เลยทันทีว่าต้องส่งค่าอะไรเข้าไป ไม่ต้องไล้ดูโค้ดทั้งหมดเพื่อทำความเข้าใจ arguments อีกแล้ว
2. ช่วยให้ Debug ง่ายขึ้น สำหรับคนที่เขียน JavaScript มาอาจเคยเจอปัญหา อย่างเช่นเราต้องการผลลัพธ์ของ 1 + 1 แต่ค่าที่ได้กลับออกมาเป็น 11 ซะงั้น เพราะเราเผลอส่งค่า String ไปคำนวนโดยไม่ตั้งใจ กว่าจะรู้ตัวก็ต้อง Debug ไล้ดู แต่ถ้าเราใช้ TypeScript ก็จะตัดปัญหานี้ไปได้เลย เพราะเขาจะไม่ยอมให้เราทำอะไรผิดพลาดแบบนี้แน่นอน

### TypeScript เบื้องต้น

#### การกำหนด Type ให้กับตัวแปร

```javascript
const name: string = 'mnagon'
```

ไม่มีอะไรมากครับสำหรับการกำหนด Type ให้กับตัวแปรเพียงแค่เราเติมเครื่องหมายโคลอนตามด้วยประเภทตัวแปรก่อนที่จะกำหนดค่าให้กับตัวแปรนั้น ๆ แค่นั้นเองครับ

> &#x20;:bulb: อันที่จริงแล้วเราสามารถประกาศตัวแปรแบบ JavaScript ธรรมดาได้อย่างปกติเลย แล้วหลังจากนั้นค่าแรกที่ถูกกำหนดให้แก่ตัวแปร ประเภทของค่าที่กำหนดใส่ตัวแปรจะถูกกำหนดให้แก่ตัวแปรทันที

#### การกำหนด Type ให้กับตัวแปรแบบ Array

```typescript
const nameList: string[] = ['mnagon', 'nidnoi', 'kumo', 'momo']
```

เพียงแค่เราเพิ่ม เครื่องหมาย \[ ] ข้างหลัง Type ของตัว แปรแค่นี้ตัวแปรเราก็จะได้ตัวแปรแบบ Array แล้วครับ

แต่ถ้าหากเราอยากได้ Array ที่มีข้อมูลหลาย Type หละ? เราสามารถประกาศได้แบบนี้ครับ

```typescript
const nameAndNumber: (string | number)[] = ['mnagon', 27, 'nidnoi', 25]
```

เราจะให้ใน Array ของเรามีตัวแปรกี่ประเภทก็ได้เพียงแค่เราใช้เครื่องหมาย " | " แล้วต่อด้วยประเภทของตัวแปรที่อยู่ใน Array ครับ

#### การกำหนด Type ให้กับ Key ใน Object

สำหรับการกำหนด Type ให้กับ Key ใน Object นั้นเราต้องสร้าง Interface ขึ้นมาใหม่ หรือเรียกอีกอย่างว่าเราต้องสร้าง ประเภทตัวแปรใหม่ขึ้นมาเพื่อเอาไปใช้เป็น Type ให้กับ Object ของเรานั้นเองครับ โดยเขียนได้ดังนี้

```typescript
interface People {
    name: string
    age: number
    favorite: string[]
}
```

โค้ดด้านบนคือการสร้าง Type ใหม่ขึ้นมาชื่อว่า People โดยมี properties อยู่ 3 ตัวคือ name ที่เป็น string, age ที่เป็น number และสุดท้าย favorite ที่เป็น array string  และเมื่อเราสร้าง Type พร้อมกำหนด Type ให้กับ properties ในแต่หละ key เรียบร้อยแล้ว ก็สามารถเอาไปกำหนดเป็น Type ให้กับ Object ได้เลยแบบนี้ครับ

```javascript
const firstGuy: People = {
    name: 'mnagon',
    age: 27,
    favorite: ['code', 'game']
}
```

#### การกำหนด Type ให้กับ Function

การกำหนด Type ให้กับ Function คือการกำหนด Type ให้กับ Output ที่เราจะได้จาก Function ตัวนั้นนั้นเองครับ เช่นหากเราต้องการให้ Function ประมวลผลแล้วส่งค่าออกมาเป็น number เราต้องกำหนด Type ของ Function แบบนี้

```javascript
function onePlusTwo(): number {
    return 1 + 2
}
```

หากเรากำหนด Type ให้กับตัว Function แล้ว เราก็ต้อง return ค่าออกมาให้ประเภทของค่าตรงกับ Type ที่เรากำหนดให้กับ Function ครับ หาก return ไม่ถูกหรือไม่มีคำสั่ง return ค่าออกมาก็จะ error&#x20;

แล้วถ้าหาก Function ของเราไม่มีค่าที่จะ return ออกมาหละ? แสดงว่านั้นคือ Function ประเภท void ครับ ให้เราระบุ void ในส่วนของ Type ก็จะสามารถทำให้ Function ของเราไม่ต้อง return ค่าออกมาโดยไม่เกิด error ครับ

```javascript
function printHello(): void {
    console.log('Hello')
}
```

#### การกำหนด Type ให้กับ Function arguments

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

```javascript
function sum(value1: number, value2: number): number {
    return value1 + value2
}
```

สำหรับพื้นฐานเบื้องต้นผมคิดว่าเท่านี้คงพอจะเข้าใจ Concept คร่าว ๆ ของ TypeScript และสามารถนำไปใช้งานได้พอสมควรแล้วหละครับ แต่สำหรับใครที่อยากรู้ลึกมากกว่านี้สามารถอ่านแบบเต็ม ๆ ได้ใน Official document ของ TypeScript ได้ตามลิ้งนี้เลยครับ <https://www.typescriptlang.org/docs/handbook>&#x20;

สำหรับบทนี้เอาไว้แค่นี้ก่อน ส่วนบทหน้าจะเข้าสู่การใช้ Nuxt.js + TypeScript กันครับ
