มาหัดเขียน TypeScript กันเถอะ
สวัสดีครับ มาทำความรู้จักกับ TypeScript และหัดใช้งานเบื้องต้นกันดูครับ ปัจจุบันคิดว่า โปรเจ็คส่วน เป็น TypeScript กันเกือบหมด ทีนี้ ใครยังไม่เคยใช้ ก็ต้องลองหัดใช้แล้วแหละครับ มาลองดูพื้นฐาน จากนั้นก็ลองฝึกฝน และหัดใช้งานในโปรเจ็คดู เช่น React เวลาสร้างโปรเจ็คก็เลือกแบบ TypeScript ค่อยๆ เรียนรู้ไป
TypeScript คืออะไร?
TypeScript เป็นภาษา Programming Language ที่ถูกพัฒนาขึ้นด้วย Microsoft เป็น Superset ของ JavaScript หมายความว่า ถ้าเรารู้ JavaScript ก็เขียน TypeScript ได้ไม่ยาก ตัว TypeScript เป็นภาษาที่เราต้อง Compile ให้เป็น JavaScript บางคนก็เรียก TypeScript ว่าเป็น JavaScript ที่มี Type
😳 เอ้า งงดิ compile ให้เป็น 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 ด้านล่าง
ข้อสังเกต เวลาตั้งชื่อไฟล์ TypeScript (TS) และ JavaScript (JS)
- ไฟล์
.ts- คือไฟล์ TypeScript - ไฟล์
.js- คือไฟล์ JavaScript
เริ่มต้นใช้ TypeScript
วิธีการเริ่มต้นที่ง่ายที่สุด คือ ใส่ความสามารถ Type check ให้ไฟล์ JavaScript เรา เพียงแค่เพิ่ม // @type-check ที่ด้านบนของไฟล์ JS ก็ทำให้ไฟล์เราเป็น TypeScript ละครับ
// @ts-check
let name = 'Devahoy'
name = 20เพียงแต่ มันก็เป็น type check แบบพื้นฐาน และก็ไม่มีความสามารถอะไรเท่าไหร่ ไปใช้ TypeScript จริงๆ ดีกว่า 🤣
การติดตั้ง TypeScript
เราสามารถติดตั้งแบบ Global ด้วย NPM
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
let age: number = 20
let text: string = 'Hello'
let isMarried: boolean = false
let hobbies: string[] = ['A', 'B', 'C']หรือ ถ้าเรา initial และ assign ค่าให้เลย ตัว TypeScript มันก็จะรู้ว่า ตัวแปร นั้นเป็น type อะไร
let age = 20 // TS รู้ว่า age = number
age = 'Hello' // Error Type 'string' is not assignable to type 'number'ในบางครั้ง เรามี object user เขียนด้วย JavaScript เราอาจจะมีโอกาสที่มี property ไม่ครบได้ แบบนี้
const user = {
id: 0,
name: 'Chuck Norris',
}
const user2 = {
id: 1,
name: 'John Doe',
age: 20,
}จากโค๊ด JS ด้านบน ก็ไม่มีปัญหาอะไร แต่จริงๆ คือ user เราลืมใส่ค่า age ไปด้วย ตอนนี้มันยังไม่ error แต่เมื่อไหร่ ก็ตามที่เราใช้งาน user.age ก็อาจจะได้ undefined
ถ้าเราใช้ TS เราสามารถใช้ Interface มาช่วยได้ โดยการกำหนดเลยว่า User ต้องมี properties อะไรบ้าง
interface User {
id: number,
name: string,
age: number
}
const user: User = {
id: 0,
name: 'Chuck Norris',
} // Error เราจะรู้ทันทีว่า user มี properties ไม่ครบ
const user2: User = {
id: 1,
name: 'John Doe',
age: 20,
}การ 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 ❤️
