TypeScript開發環境搭建（VSCode+NodeJs）

工具安裝

1. VS Code簡介及安裝

VS Code是一款免費開源的代碼編輯器。其具有跨平台、支持IntelliSence智能提示、內置Git支持、插件可擴展性強等優點。到官網下載並安裝。

2. VS Code插件推薦

• 默認下載的VS Code是英文版的。如果習慣中文界面，可以下載中文語言包。
• node-snippets可提供一些node.js程序的代碼模板，可以快速創建node.js程序。

插件安裝見圖：

3. Node.js簡介及安裝

TypeScript是JavaScript的超集。合法的JavaScript語句也是合法的TypeScript語句。但是，寫出來的TypeScript代碼經過TypeScript轉譯成JavaScript代碼后需要有運行的地方。在沒有Node.js的過去，需要在瀏覽器中運行JavaScript代碼。

Node.js是一個JavaScript運行平台。它使得JavaScript不再是只能在瀏覽器上用一下的玩具語言了。Node源自V8 JavaScript引擎。V8負責JavaScript代碼的解釋和執行，它能將JavaScript代碼編譯為機器碼。

到官網下載並安裝。

LTS版（長期支持版），有18個月的支持服務，期滿后還有12個月的維護性支持服務。

安裝完后在命令行中運行以下命令以確認Node.js和npm已成功安裝。

npm -v
node -v

npm是什么？npm是Node.js的包管理工具，用來安裝各種Node.js的擴展。 npm是JavaScript的包管理工具，也是世界上最大的軟件注冊表。后面要使用的各種開發或運行時程序包，都將用npm來安裝。也可以寫自己的npm包，來簡化重復的開發工作。

創建TypeScript項目

在你想要放置項目的位置創建一個文件夾。此處以F:\ts為例。

必備程序包

1. 在VSCode中使用快捷鍵Ctrl + ~打開終端。

2. 創建package.json。我的理解，npm就是一個node的包管理工具，而package.json是npm的配置文件，描述了項目對包的依賴、項目名稱、項目執行入口。在終端里執行以下命令即可自動創建。

npm init -y

3. 安裝TypeScript。在終端里執行以下命令即可安裝TypeScript。

npm install typescript --save-dev

npm install typescript即安裝typescript的意思。--save-dev是安裝到項目本地且使用開發時依賴。在package.json的devDependencies鍵下，會看到已安裝的開發時依賴的程序包。比如用於壓縮js的gulp-uglify。因為在程序發布后用不到它，而只是在開發才用到它。

如果出現Error: EPERM: operation not permitted錯誤，請以管理員身份運行VS Code，或者以管理員身份打開命令行，並切換到項目根目錄下。（本例是F:\ts）

安裝完后會多出node_modules文件夾，並且package.json的devDependencies鍵下會出現"typescript"鍵:"^版本"。"typescript": "^4.1.3"表示最低版本要求是4.1.3版。

4. 本地安裝node.d.ts。這是對Node.js的內置核心模塊的TypeScript類型定義。理解為頭文件好了。有了它可以讓Intellisence提供代碼補全功能。在終端里執行以下命令來安裝。

npm install @types/node --save-dev

如果出現Error: EPERM: operation not permitted錯誤，請以管理員身份運行VS Code，或者以管理員身份打開命令行，並切換到項目根目錄下。（本例是F:\ts）

5. 創建tsconfig.json。如果已經全局安裝TypeScript，那么在終端中執行tsc --init命令后會在當前目錄下自動地創建tsconfig.json。但前面是用本地安裝（--save）的方式安裝的，所以不能以tsc --init的方式來運行tsc。這里要用npx。npx是npm5.2之后發布的一個命令。它用來執行npm依賴包的二進制文件。這里運行以下命令來創建tsconfig.json。

npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs

解釋：

• --init：初始化一個TypeScript項目並創建一個tsconfig.json文件。
• --rootDir：所有非聲明文件的最長公共路徑。（我理解是）TypeScript項目代碼的輸入文件路徑。
• --outDir：轉譯后的文件.js(包括.d.ts，.js.map等)。源碼文件的目錄結構也將被保留。（我理解是）想把編譯后的代碼放到哪里這里就寫哪里。
• --esModuleInterop：為了兼容不同模塊的導入方式，需要設置該選項。(CommonJS/AMD/UMD)
• --resolveJsonModule：為了讓TypeScript支持解析JSON文件。
• --lib es6,dom：編譯過程中需要引入的庫文件。
• --module commonjs：指定生成哪個模塊系統代碼： "None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"。

參考資料:

• npx官網：https://www.npmjs.com/package/npx
• 偶余杭：https://www.jianshu.com/p/14c813bba544
• 項目配置->編譯選項：https://www.tslang.cn/docs/handbook/compiler-options.html
• https://www.typescriptlang.org/tsconfig#rootDir

打開tsconfig.json，添加include和exclude鍵。如圖：

include指定的文件會被包含到工程中。
exclude指定的文件會被排除在工程外。

此時已經可以編譯TypeScript代碼了。步驟如下：

1. 在src文件夾下建立index.ts，輸入語句console.log("Hello World!");
2. 在package.json的script小節添加腳本如下："build": "tsc"
3. 在終端中運行命令npm run build。該命令會運行script小節的build腳本。該腳本會運行tsc，tsc又會根據tsconfig.json的配置去轉譯ts文件，然后在lib（tsconfig里配置的outDir）文件夾里輸出index.js文件。
4. 運行node lib/index.js會在命令行中輸出Hello World!
   如圖：
   

可選程序包

使用上面的方式來編譯TypeScript代碼有一個不方便的點就是每次修改源代碼后都要重新手動輸入命令來運行。使用下面的方法可以讓node監聽代碼修改，自動編譯，並運行程序。

1. 使用ts-node來實時編譯和運行。在終端中運行以下命令：

npm install --save-dev ts-node

2. 使用nodemon來監聽代碼修改。只要文件改變，它就會調用ts-node。在終端中運行以下命令：

npm install --save-dev nodemon

3. 添加npm腳本。打開package.json，在script小節添加以下腳本：

"scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch src/**/*.ts --exec ts-node src/index.ts"
},

"tsc -p"的含義：編譯指定目錄下的項目。這個目錄應該包含一個tsconfig.json文件來管理編譯。如果沒有指定"-p"參數，tsc會從當前目錄往上級查找，直到找到tsconfig.json文件。"."是根目錄。

補充：如果想一次運行多個npm腳本，則可以使用&將多個npm腳本組合在一起。例如把上面的scripts改為這樣：

"scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch src/**/*.ts --exec ts-node src/index.ts",
    "all": "start & build"
},

若在終端中輸入npm run all，則會運行all這個腳本。

創建應用

修改index.ts為如下：

import * as fs from "fs";

const path = "./message.txt";
const data = "Hello World!";
const encoding = "utf8";

console.log(data);

fs.writeFile(path, data, encoding, error => {
    if (error) {
        console.log(error);
    }
});

然后在終端中輸入命令"npm run start"並運行。則會在終端中輸出Hello World!並且在ts項目根目錄下創建文件message.txt，其內容為Hello World!

注：fs是Node.js的核心模塊之一。用於文件的讀寫。

參考資料：

• 《TypeScript深入理解》 - 第5章
• 《Visual Studio Code權威指南》 - 第2章
• 《NodeJs實戰（第2版）》 - 第1章、第2章

補充：如果使用npm安裝程序包速度慢，可以使用淘寶的國內鏡像。安裝方法如下：

npm install cnpm -g

安裝完成后，在需要使用npm命令的地方，用cnpm替換即可。