3 步建立 Typescript 開發環境

typescript 教學

這篇文章介紹開發 Typescript 會使用到的 nodejs 工具，讓你輕鬆建立開發環境，和編譯為 Production 可使用的 js 檔案.

1- 初始化 Node.js

1. 建立 Node.js project package.json.

$ npm init -y

2. 安裝 TypeScript

$ npm install typescript — save-dev

3. 加入 node.d.ts

$ npm install @types/node — save-dev

4. 加入 TypeScript 的設定檔案 tsconfig.json

$ npx tsc — init

2- 建立開發環境 Live Compile + Run

1. 加入實時編譯模組 ts-node

$ npm install ts-node --save-dev

2. 加入 nodemon ，當任何檔案發生改變，觸發執行 ts-node

npm install nodemon --save-dev

3. 將 script 設定入加 package.json

"scripts": {
    "start": "npm run build:live",
    "build:live": "nodemon --exec ./node_modules/.bin/ts-node -- ./index.ts",
    "build": "tsc index.ts"
},

可以從 git 下載範例 index.ts, 通過 npm run start 進行開發:

typescript example: index.ts

3- Production 編譯 js

tsc 是編譯 .ts 到 .js 的編譯工具，作用編譯 production 的靜態 Javascript 文檔：

$ npm run build

Remark

• nodemon 用來監察檔案的改變，重新觸發 command ts-node
• ts-node 通過 tsconfig.json 的設定，對 index.ts 進行自動編譯成為 js

Reference:

— https://code.tutsplus.com/tutorials/typescript-for-beginners-getting-started--cms-29329

— https://basarat.gitbooks.io/typescript/docs/quick/nodejs.html

— https://github.com/wahengchang/typescript-must-know