วิธีการเขียน Node.js แบบ Type Script

Node.js นั้นเป็นภาษาที่ทำให้ javascript สามารถทำงานในรูปแบบของ server-side ได้ จากเดิมที่ javascript นั้นทำงานแค่ในส่วนของ browser เพียงอย่างเดียว

โดยปกติถ้าเราจะเขียนโปรแกรมที่ run ผ่าน node.js นั้น เราก็จะเขียนด้วยภาษา javascript แล้วก็สั่ง run ด้วยคำสั่ง

node ชื่อ file ไม่ต้องใส่นามสกุล .js
เช่น ถ้าชื่อ file เป็น app.js ก็ใช้คำสั่งดังนี้
node app

ซึ่งในปัจจุบัน Typescript เริ่มได้รับความนิยมเป็นอย่างมากในหมู่นักพัฒนาเพราะช่วยในการทำให้เขียน javascript ใน project ขนาดใหญ่ได้เป็นอย่างดี

ก่อนที่เราจะเขียน typescript ใน project node.js ของเรา เราจำเป็นต้องติดตั้ง typescript เข้าไปในเครื่องก่อนด้วยคำสั่งดังนี้

npm install -g typescript

หลังจากติดตั้งเสร็จแล้วเราก็มาลองเขียน typescript ง่ายๆ ดังนี้ครับ

file app.ts 
console.log('Hello World');

หลังจากเขียน code เสร็จแล้วก็ต้อง compile ด้วยคำสั่ง

tsc app

หลังจาก compile เสร็จแล้วจะได้ผลลัพธ์เป็น file app.js แล้วก็จะสามารถ run node.js จาก file app.js ที่เพิ่ง compile ออกมาได้เลยครับ

ใน project ขนาดใหญ่เราต้องการ compile หลายๆ file สามารถทำได้ด้วยคำสั่งดังนี้

tsc -p .

ตอนนี้เราจะพบว่าได้ผลลัพธ์ ที่เป็น file javascript ปะปน กับ typescript อยู่ทำให้อาจจะเกิดความสับสนได้ในกรณีที่ต้องการแก้ไป มีอยู่ 2 วิธีในการทำให้ไม่สับสน

วิธีการแรก คือใช้ IDE ซ่อน file javascript ในที่นี้ขอแนะนำ Visual Studio Code โดยการใส่ workspace setting กดปุ่ม Ctrl + Shift + P จะได้หน้าตาดังนี้

เลือก Preferences: Open Workspace Settings

ใส่ เงื่อนไปในการซ่อนไปดังนี้

{
   "files.exclude": {
      "**/*.js": {"when": "$(basename).ts"},
      "**/*.map": {"when": "$(basename).ts"}
   }
}

วิธีการสอง ตั้งค่าให้เมื่อ compile แล้วผลลัพธ์ ไปเก็บไว้อีก folder นึง มีขั้นตอนการทำดังนี้

tsc --init

จะได้ file tsconfig.json ออกมาเราก็จะสามารถตั้งค่าต่างๆ ได้เช่น sourceRoot หมายถึงที่เก็บ source, outDir หมายถึงที่เก็บผลที่ compile เสร็จแล้ว ดังตัวอย่าง

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": true,
    "sourceRoot": "src",
    "target": "es5",
    "lib": ["es6", "dom"]
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

ในกรณีที่เราทำโปรเจ็คใหญ่ก็ต้องมีการ compile แล้วก็ run แนะนำว่าให้ทำเป็น script ไว้ใน package.json ดังนี้

{
   "name": "simple",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "dev": "tsc -p . && node dist/app",
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}

เรียกใช้ด้วยคำสั่ง

npm run dev

เพียงแค่นี้เราก็สามารถเขียน node.js ด้วย typescript ในฝั่ง server กันได้แล้ว