มาหัดเขียน TypeScript กันเถอะ

สวัสดีครับ มาทำความรู้จักกับ TypeScript และหัดใช้งานเบื้องต้นกันดูครับ ปัจจุบันคิดว่า โปรเจ็คส่วน เป็น TypeScript กันเกือบหมด ทีนี้ ใครยังไม่เคยใช้ ก็ต้องลองหัดใช้แล้วแหละครับ มาลองดูพื้นฐาน จากนั้นก็ลองฝึกฝน และหัดใช้งานในโปรเจ็คดู เช่น React เวลาสร้างโปรเจ็คก็เลือกแบบ TypeScript ค่อยๆ เรียนรู้ไป

TypeScript website

TypeScript คืออะไร?

TypeScript เป็นภาษา Programming Language ที่ถูกพัฒนาขึ้นด้วย Microsoft เป็น Superset ของ JavaScript หมายความว่า ถ้าเรารู้ JavaScript ก็เขียน TypeScript ได้ไม่ยาก ตัว TypeScript เป็นภาษาที่เราต้อง Compile ให้เป็น JavaScript บางคนก็เรียก TypeScript ว่าเป็น JavaScript ที่มี Type

😳 เอ้า งงดิ compile/transpile ให้เป็น JavaScript เหมือนเดิม แล้วไม่เขียน JavaScript แต่แรกละ?

ข้อดีของ TypeScript คือ

• หัวใจสำคัญของ TypeScript คือ Type
• ดักจับ Error ได้ตั้งแต่ตอน compile เลย ไม่เหมือน JavaScript ที่กว่าจะรู้ error ก็ตอน runtime แล้ว
• รองรับ Static typing เปรียบเทียบกับ JavaScript คือมันไม่มี type เราจะสร้างตัวแปร มาเก็บ String, number หรือ boolean แต่ TypeScript ตัวแปรจะมี Type
• ที่ TypeScript แปลงโค๊ดเป็น JavaScript จริงๆ ก็เพื่อมั่นใจว่าโค๊ด JavaScript ที่ผ่านการ compile แล้ว จะสามารถไปรันบน Browser ได้ปกติทั่วไปได้
• IDE / Text Editor จะแม่นยำ และ suggestion ได้ดีขึ้น

สามารถทดลองเล่น TypeScript Playground จาก link ด้านล่าง

TS Playground

ข้อสังเกต เวลาตั้งชื่อไฟล์ TypeScript (TS) และ JavaScript (JS)

• ไฟล์ .ts - คือไฟล์ TypeScript
• ไฟล์ .js - คือไฟล์ JavaScript

เริ่มต้นใช้ TypeScript

วิธีการเริ่มต้นที่ง่ายที่สุด คือ ใส่ความสามารถ Type check ให้ไฟล์ JavaScript เรา เพียงแค่เพิ่ม // @type-check ที่ด้านบนของไฟล์ JS ก็ทำให้ไฟล์เราเป็น TypeScript ละครับ

1
// @ts-check
2
let name = 'Devahoy'
3
name = 20

เพียงแต่ มันก็เป็น type check แบบพื้นฐาน และก็ไม่มีความสามารถอะไรเท่าไหร่ ไปใช้ TypeScript จริงๆ ดีกว่า 🤣

การติดตั้ง TypeScript

เราสามารถติดตั้งแบบ Global ด้วย npm / pnpm หรือ bun ตามสะดวก

npm install -g typescript

หรือสามารถติดตั้ง local ใน folder ของโปรเจ็คเราก็ได้

npm install typescript --save-dev

การสร้างโปรเจ็คด้วย TypeScript

วิธีนี้เป็นการ setup project เราให้เป็น TypeScript ด้วยคำสั่ง

tsc --init

ด้วยคำสั่งนี้ เราจะได้ไฟล์ tsconfig.json และเราจะเห็นผลลัพธ์ ประมาณนี้ อย่าง config ที่ set มาจาก default ก็คือ compile เป็น ES2016 แบบ CommonJS เป็นต้น

Created a new tsconfig.json with:

target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig

ไฟล์ tsconfig.json เป็นเหมือน config ต่างๆ ว่าเราจะให้ TypeScript มีความยืดหยุ่น หรือเข้มงวดในการ compile มากน้อยแค่ไหน เช่น เพิ่ม noImplicitAny หรือ strictNullChecks

ลองสร้างไฟล์ขึ้นมา 1 ไฟล์ชื่อ hello.ts ตัวอย่าง การประกาศตัวแปร TypeScript และก็กำหนด type ให้กับ ตัวแปร Type พื้นฐานก็พกว number, string, boolean, array

1
let age: number = 20
2
let text: string = 'Hello'
3
let isMarried: boolean = false
4
let hobbies: string[] = ['A', 'B', 'C']

หรือ ถ้าเรา initial และ assign ค่าให้เลย ตัว TypeScript มันก็จะรู้ว่า ตัวแปร นั้นเป็น type อะไร

1
let age = 20 // TS รู้ว่า age = number
2

3
age = 'Hello' // Error Type 'string' is not assignable to type 'number'

ในบางครั้ง เรามี object user เขียนด้วย JavaScript เราอาจจะมีโอกาสที่มี property ไม่ครบได้ แบบนี้

1
const user = {
2
  id: 0,
3
  name: 'Chuck Norris'
4
}
5

6
const user2 = {
7
  id: 1,
8
  name: 'John Doe',
9
  age: 20
10
}

จากโค๊ด JS ด้านบน ก็ไม่มีปัญหาอะไร แต่จริงๆ คือ user เราลืมใส่ค่า age ไปด้วย ตอนนี้มันยังไม่ error แต่เมื่อไหร่ ก็ตามที่เราใช้งาน user.age ก็อาจจะได้ undefined

ถ้าเราใช้ TS เราสามารถใช้ Interface มาช่วยได้ โดยการกำหนดเลยว่า User ต้องมี properties อะไรบ้าง

1
interface User {
2
  id: number
3
  name: string
4
  age: number
5
}
6

7
const user: User = {
8
  id: 0,
9
  name: 'Chuck Norris'
10
} // Error เราจะรู้ทันทีว่า user มี properties ไม่ครบ
11

12
const user2: User = {
13
  id: 1,
14
  name: 'John Doe',
15
  age: 20
16
}

การ compile TS เป็น JS เราจะใช้คำสั่ง

tsc <FILENAME>

เช่น

tsc hello.ts

ตัว TypeScript Compiler จะทำการแปลง TypeScript เป็น JavaScript ที่ชื่อเดียวกัน แต่เป็น .js แทน คือ hello.js (เราสามารถเปลี่ยน output folder ได้จากไฟล์ tsconfig.json)

สรุป

สำหรับบทความนี้ก็เป็นพื้นฐาน TypeScript ให้เห็นภาพ ว่าคืออะไร มันมีประโยชน์และช่วยให้เราเขียนโค๊ดให้มีบัคน้อยลงได้ยังไง เป็นเพียงส่วนน้อยนิดเท่านั้น จริงๆ TypeScript ยังมีความสามารถอีกเยอะมากมาย

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

Happy Coding ❤️