ในการศึกษาภาษาใหม่ ๆ ด้วยแนวทาง Test-Driven Development (TDD)
เป็นสิ่งที่ผมเชื่อว่าเป็นแนวทางที่ทำให้เข้าใจภาษาต่าง ๆ ได้รวดเร็วขึ้น
ดังนั้นมาลองศึกษาภาษา TypeScript กันหน่อย
ซึ่งถูกสร้างขึ้นมาจากบริษัท Microsoft และเป็น opensource
ในการใช้งานจะต้อง compile มาเป็นภาษา JavaScript ก่อนเสมอ
ดูแล้วขั้นตอนเยอะเลยนะ

ดังนั้นมาเริ่มต้นศึกษาด้วย Hello World กันหน่อย

1. สำหรับผู้เริ่มต้นศึกษา TypeScript

แนะนำให้ลองไปฝึกเขียนผ่าน TypeScript Playground ก่อนเลย
เพื่อใช้ฝึกเขียนและศึกษา syntax ของตัวภาษา
ทำให้เราเห็นว่า code ที่เขียนนั้นจะถูกแปลงไปเป็น JavaScript
และสามารถ run ได้อีกด้วย

แสดงดังรูป

2. หลังจากนั้นมาสร้าง Application หรือ Project กันหน่อย

โดยเราจะทำแบบ step-by-step กันเลยดังนี้

2.1 สร้าง application ชื่อว่า helloworld
ด้วยคำสั่ง

$mkdir helloworld
$cd helloworld
$npm init

2.2 เพื่อความง่ายกำหนด dependency ที่เราต้องการในไฟล์ package.json
โดย dependency ที่นำมาใช้งานประกอบไปด้วย

จากนั้นทำการติดตั้ง dependency ต่าง ๆ ด้วยคำสั่ง

$npm install

2.3 ทำการสร้าง folder สำหรับเก็บ code ต่าง ๆ
ประกอบไปด้วย

  • จัดเก็บ production code ใน folder src
  • จัดเก็บ test code ใน folder tests
  • จัดเก็บ output หรือผลการทำงานต่าง ๆ ใน folder dist

ด้วยคำสั่ง

$mkdir src
$mkdir tests
$mkdir dist

2.4 ทำการ configuration สำหรับ TypeScript
ว่าจะให้ทำการ compile ด้วยมาตรฐานอะไรเช่น ES5, ES6 เป็นต้น
และผลการ compile จะเก็บไว้ที่ไหน
และ folder อะไรบ้างที่ไม่สนใจ

โดยกำหนดไว้ในไฟล์ tsconfig.json ดังนี้

2.5 เขียน test code และ production code ด้วย TypeScript
สิ่งที่ต้องการคือ สร้าง function sayHi
รับข้อมูลคือ ชื่อ
จากนั้นทำการส่งคำว่า Hi, ชื่อ กลับคืนมา
สามารถเขียนได้ดังนี้

test code จะเก็บไว้ใน folder tests

production code จะเก็บไว้ใน folder src

2.6 จากนั้นทำการทดสอบ
เพื่อความง่ายทำการกำหนด script สำหรับ run ไว้ในไฟล์ package.json ดังนี้

ทำการทดสอบด้วยคำสั่ง

$npm test

ผลการทดสอบเป็นดังรูป

เพียงเท่านี้เราก็สามารถเริ่มต้นศึกษาภาษา TypeScript ตามแนวคิด TDD ได้แล้วนะครับ
ตัวอย่าง source code อยู่ที่ Github::Up1::TDD with TypeScript

Tags:,,