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

แนวทางการพัฒนาเว็บแอปพลิเคชั่นด้วย Nuxt.js + Typescript สำหรับมือใหม่

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

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

ทำไมต้อง TypeScript ?

1. เข้าใจ Code มากขึ้น ยกตัวอย่างเช่นการส่งค่าเข้าสู่ Function หากเราใช้ TypeScript ช่วย เราจะรู้ได้เลยทันทีว่าต้องส่งค่าอะไรเข้าไป ไม่ต้องไล้ดูโค้ดทั้งหมดเพื่อทำความเข้าใจ arguments อีกแล้ว

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

TypeScript เบื้องต้น

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

const name: string = 'mnagon'

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

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

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

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

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

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

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

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

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

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

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 ได้เลยแบบนี้ครับ

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

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

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

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

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

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

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

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

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

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

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

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