使用vscode寫typescript（node.js環境）起手式
阿新 • • 發佈：2018-12-25
動機
一直想把typescript在服務端開發中用起來，主要原因有：
- javascript很靈活，但記憶力不好的話，的確會讓你頭疼，看著一月前自己寫的程式碼，一臉茫然。
- 型別檢查有利有敝，但在團隊開發中，限制個人的天馬行空還是很有效的;
- node對模組等es6特性的支援不盡人意，目前我只用node長期支援版所能支援的特性，個人不願用babel之類的工具;
- 開始用webstorm開發，結果它象visual studio系列一樣，越來越臃腫;轉而用vscode，但它的絕配是typescript;
問題
之前也陸陸續續試著用了，但總被一些困難絆住了，主要有以下幾點：
- vscode開發除錯typescript環境的搭建，因為vscode版本更新也快，網上資料繁雜;
- tsconfig.json的配置
- tslint.json的配置
- 全域性變數的使用與設定;
解決
經過多次的不斷嘗試，今天終於達到自己滿意的地步了。
環境搭建，基於最新版（1.26.1）
安裝node.js
從官網下載對應作業系統的安裝包，按說明安裝。
全域性安裝typescript
npm i -g typescript生成並配置tsconfig.json
執行命令：
tsc --init配置檔案：
{ "compilerOptions": { "target": "es2017", // 指定 ECMAScript 目標版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT' "module": "commonjs", // 指定使用模組: 'commonjs', 'amd', 'system', 'umd' or 'es2015' "moduleResolution": "node", // 選擇模組解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6) "emitDecoratorMetadata": true, // 為裝飾器提供元資料的支援 "experimentalDecorators": true, // 啟用裝飾器 "allowSyntheticDefaultImports": true, // 允許從沒有設定預設匯出的模組中預設匯入。 "strict": true, // 啟用所有嚴格型別檢查選項 "noImplicitAny": true, // 在表示式和宣告上有隱含的 any型別時報錯 "alwaysStrict": true, // 以嚴格模式檢查沒個模組，並在沒個檔案里加入 'use strict' "sourceMap": true, "noEmit": false, // 不生成輸出檔案 "removeComments": true, // 刪除編譯後的所有的註釋 "importHelpers": true, // 從 tslib 匯入輔助工具函式 "strictNullChecks": true, // 啟用嚴格的 null 檢查 "lib": ["es2017"], // 指定要包含在編譯中的庫檔案 "typeRoots": ["node_modules/@types"], "types": [ "node", ], "outDir": "./dist", "rootDir": "./src" }, "include": [ // 需要編譯的ts檔案一個*表示檔案匹配**表示忽略檔案的深度問題 "./src/*.ts", "./src/**/*.ts" ], "exclude": [ "node_modules", "dist", "**/*.test.ts", "public" ] }
生成專案配置package.json
執行命令：
npm init配置檔案：
{
"name": "arest",
"version": "0.1.0",
"description": "a rest server use kao2, typescript & mongo db.",
"main": "app.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zhoutk/arest.git"
},
"keywords": [
"rest",
"koa2",
"typescript",
"mongo"
],
"dependencies": {
"koa": "^2.5.2"
},
"author": " 監測檔案改動並編譯
執行命令：
tsc -w配置vscode專案啟動launch.json
配置好後，按F5即可開始除錯執行程式
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動程式",
"program": "${workspaceFolder}/dist/app.js",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}tslint的配置與生效
使用tslint可以定製團隊共同使用的一些編碼規則，這裡需要注意的是，不但要全域性安裝typescript,tslint，還要在專案中安裝，不然不能生效。這個鬼折騰了我好久！
{
"rules": {
"class-name": true,
"comment-format": [
false,
"check-space"
],
"indent": [
true,
"spaces"
],
"no-duplicate-variable": true,
"no-eval": true,
"no-internal-module": true,
"no-trailing-whitespace": false,
"no-var-keyword": true,
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"quotemark": [
true,
"single"
],
"semicolon": [true, "never"],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": [
true,
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}全域性變數的使用
全域性變數雖然不能濫用，便也不能沒有，以下幾點是關鍵：
- tsconfig.json中加入 "types": [ "node"]
- npm i @types/node
- 建立globals.d.ts(檔名可以隨意取)，在其中聲名全域性變數（這是讓ide知道）
- 在入口檔案（app.ts）中引入全域性模組並賦值給node的全域性變數global（這是讓程式碼知道）
專案地址
這個專案我準備將express+mysql的成功經驗移植到koa2+mongo中來。
https://github.com/zhoutk/arest使用方法
git clone https://github.com/zhoutk/arest
cd arest
npm i
tsc -w
用vscode開啟專案，並按F5執行 小結
終於邁入typescript坑中，痛並快樂著！
來源：https://segmentfault.com/a/1190000016305647