เริ่มต้นศึกษา TypeScript ด้วยแนวทาง Test-Driven Development (TDD)

ในการศึกษาภาษาใหม่ ๆ ด้วยแนวทาง 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 ด้วยคำสั่ง [code] $mkdir helloworld $cd helloworld $npm init [/code] 2.2 เพื่อความง่ายกำหนด dependency ที่เราต้องการในไฟล์ package.json โดย dependency ที่นำมาใช้งานประกอบไปด้วย

• Mocha
• Typescript

[gist id="ae097e63c9cc09aed89b64333b2e98b6" file="package.json"] จากนั้นทำการติดตั้ง dependency ต่าง ๆ ด้วยคำสั่ง [code] $npm install [/code] 2.3 ทำการสร้าง folder สำหรับเก็บ code ต่าง ๆ ประกอบไปด้วย

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

ด้วยคำสั่ง [code] $mkdir src $mkdir tests $mkdir dist [/code] 2.4 ทำการ configuration สำหรับ TypeScript ว่าจะให้ทำการ compile ด้วยมาตรฐานอะไรเช่น ES5, ES6 เป็นต้น และผลการ compile จะเก็บไว้ที่ไหน และ folder อะไรบ้างที่ไม่สนใจ โดยกำหนดไว้ในไฟล์ tsconfig.json ดังนี้ [gist id="ae097e63c9cc09aed89b64333b2e98b6" file="tsconfig.json"] 2.5 เขียน test code และ production code ด้วย TypeScript สิ่งที่ต้องการคือ สร้าง function sayHi รับข้อมูลคือ ชื่อ จากนั้นทำการส่งคำว่า Hi, ชื่อ กลับคืนมา สามารถเขียนได้ดังนี้ test code จะเก็บไว้ใน folder tests [gist id="ae097e63c9cc09aed89b64333b2e98b6" file="HelloWorldTest.ts"] production code จะเก็บไว้ใน folder src [gist id="ae097e63c9cc09aed89b64333b2e98b6" file="HelloWorld.ts"] 2.6 จากนั้นทำการทดสอบ เพื่อความง่ายทำการกำหนด script สำหรับ run ไว้ในไฟล์ package.json ดังนี้ [gist id="ae097e63c9cc09aed89b64333b2e98b6" file="package2.json"] ทำการทดสอบด้วยคำสั่ง [code] $npm test [/code] ผลการทดสอบเป็นดังรูป เพียงเท่านี้เราก็สามารถเริ่มต้นศึกษาภาษา TypeScript ตามแนวคิด TDD ได้แล้วนะครับ ตัวอย่าง source code อยู่ที่ Github::Up1::TDD with TypeScript