สอนใช้ 타자 원고ในโปรเจค 노드js+Express

노드jsกับ 타자 원고
노드jsเป็นหนึ่งในเฟรมเวิร์คยอดนิยมสำหรับเขียนโปรแกรมฝั่ง 백엔드แต่เพราะมันสร้างมาตั้งแต่ปี 2009ยุคที่ JavaScriptยังเป็นเวอร์ชัน ES5อยู่เลย
โดยดีฟอลต์แล้ว 노드jsเลยไม่ซัพพอร์ท 타자 원고เลย ไม่เหมือนกับ ที่เพิ่งสร้างขึ้นมาโดยซัพพอร์ท 타자 원고เป็นค่า 약속을 어기다ตั้งแต่แรก
เพื่อชีวิตที่ดีกว่า มาเซ็ตโปรเจค 노드js+Expressให้ใช้ 타자 원고ได้กันเถอะ!

첫 번째 단계:ติดตั้ง 타자 원고
สำหรับใครที่มี 타자 원고อยู่แล้วข้ามสเต็ปนี้ไปได้เลยนะ
แต่ถ้าใครยังไม่มี ดูวิธีติดตั้งแบบง่ายๆ ได้ที่บทความ สอนวิธีเซ็ตโปรเจค TypeScript / มาใส่ไทป์ให้ JavaScript เพื่อลดความผิดพลาดในการเขียนโค้ดกันดีกว่า

2단계:เริ่มสร้างโปรเจค
ปกติเราจะเขียนโค้ด 급행 열차หน้าตาประมาณนี้

const express = require('express')

const app = express()

app.get('/', (req, res) => {
    res.send('Hello World!')
})

app.listen(3000)

สมมุติว่าเซฟเป็นไฟล์ชื่อ app.js ละกัน วิธีที่จะเปลี่ยนมันเป็น 타자 원고อย่างแรกเลยคือเปลี่ยนนามสกุลให้กลายเป็น app.ts
3단계: @types
ปัญหาเมื่อเรานำโค้ด JavaScriptธรรมดามาเปลี่ยนเป็น 타자 원고นั่นคือการที่ไทป์หายไป!
유형 스크립트 컴파일러หรือ tsc ไม่มีทางรู้ได้เลยว่าโค้ดที่เขียนๆ ขึ้นมาใน JavaScriptแต่ละตัวมีไทป์เป็นอะไรบ้าง
ดังนั้นเลยต้องมีการ 정의ให้ 타자 원고รู้จัก ซึ่งการทำแบบนั้นไม่ต้องถึงขั้นเขียนโค้ดใหม่ทั้งหมด แต่แค่เพิ่ม @types เข้าไปก็พอแล้ว!
ส่วนการติดตั้งก็ไม่ยาก มี npmใช้ npm,มี 사선ใช้ 사선

//npm
npm i @types/express --save-dev

//yarn
yarn add @types/express --dev

ข้อสังเกตคือ library ยอดนิยมส่วนใหญ่จะมีการทำ types ไว้ให้อยู่แล้ว โดยชื่อของแพกเกจไทป์ส่วนใหญ่จะชื่อเดียวกับชื่อแพกเกจหลัก แต่เติม @types/ ไว้ข้างหน้า

จากนั้นเราก็กลับไปแก้โค้ดของเราอีกที
สำหรับ 타자 원고นั้นจะต้องกำหนดไทป์ให้ตัวแปรทุกตัว เช่น Application , Request , Response ซึ่ง 수입하다มาจาก express ได้ตรงๆ เลย

import express, { Application, Request, Response } from 'express'

const app: Application = express()

app.get('/', (req: Request, res: Response) => {
    res.send('Hello World!')
})

app.listen(3000)

เวลาจะใช้งานก็ต้องคอมไพล์ให้ออกมาเป็น .js ซะก่อนนะ

4단계: 파일 보기
จากสเต็ปที่แล้ว จะพบว่าระหว่างการ 발전시키다จะมีขั้นตอนเยอะมากในการรัน

ต้องคอมไพล์ 타자 원고ด้วยคำสั่ง tsc ก่อน

รัน 노트ด้วยคำสั่ง node

แล้วถ้ามีการแก้ไข้โค้ดอะไร ก็ต้อง 살해 과정แล้วเริ่มคอมไพล์ตั้งแต่ 타자 원고อีกรอบหนึ่งเลย

ซึ่งเป็นอะไรที่น่ารำคาญและทำให้ 생산성ต่ำมากๆ

ดังนั้นในสเต็ปสุดท้ายนี้เรามาดูวิธีการเซ็ตคำสั่ง ให้มัน 감시 파일ให้เรากันดีกว่า

การ watch file หมายความว่า ให้ node คอยดูถ้าไฟล์ source code ของโปรแกรมมีการเปลี่ยนแปลง (เช่นมีการ save โค้ดตัวใหม่เข้ามา) ให้เริ่มรันโปรแกรมใหม่ด้วยตัวมันเอง เราจะได้ไม่ต้องมาคอยสั่งทุกครั้ง

ตามปกติถ้าเราเขียน 노드jsธรรมดา เราอาจจะใช้แพ็กเกจ เช่น nodemon

nodemon app.js

แต่ถ้าเราเขียนโค้ดในไฟล์ 타자 원고อยู่ เราก็ต้องสั่งให้มัน 감시 파일ด้วยอีกต่อหนึ่ง

tsc --watch

ซึ่งถ้าใช้วิธีนี้จะต้องเปิด Terminal ไว้ 2 อัน อันนึงรัน nodemon อีกอันรัน tsc นะ

หรือเราอาจจะใช้ ts-node แทนก็ได้ (อ่านวิธีใช้ ts-node และวิธีเซ็ต 구조ของโปรเจคได้ที่ บทความสอนวิธีเซ็ตโปรเจค TypeScript )

nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec 'ts-node' src/app.ts

นั่นคือเราสั่งให้ 노드몬คอยดูไฟล์ทั้งหมดในโฟลเดอร์ src ที่เป็นนามสกุล .ts ถ้าไฟล์มีการเปลี่ยนแปลง (มีการแก้ไขหรือมีการเซฟใหม่) ให้รันคำสั่ง ts-node ใหม่ทันที
หรือถ้าไม่อยากเขียน 명령하다ยาวๆ ก็ไปเขียน 프로비저닝ในไฟล์ nodemon.json แทนก็ได้
แบบนี้

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./src/app.ts" 
  #or 
  "exec": "npx ts-node ./src/app.ts"
}

ใช้ ts 노드 개발
หรือใช้อีกวิธีคือลงแพ็กเกจ ts-node-dev

# npm
yarn add ts-node-dev --dev

# yarn
npm i ts-node-dev --save-dev

แล้วก็รันด้วยคำสั่ง

ts-node-dev app.ts