參考資料

• https://www.typescriptlang.org/
• TSC命令手冊 http://www.typescriptlang.org/docs/handbook/compiler-options.html
• https://docs.cocos.com/creator/manual/zh/scripting/typescript.html

TypeScript簡稱TS辈双，是微軟（MS）開發(fā)的自由和開源的編程語言，是JavaScript（JS）的嚴(yán)格超集堰塌，添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊碳葜小S的設(shè)計(jì)目標(biāo)是開發(fā)大型應(yīng)用唉堪，然后轉(zhuǎn)譯為JS運(yùn)行。由于TS是JS的超集肩民，任何現(xiàn)有的JS程序都是合法的TS程序唠亚。

TS作為JS的超集，TS文件經(jīng)過tsc編譯后形成JS文件持痰，TS支持ES6標(biāo)準(zhǔn)趾撵。TS通過類型注解提供編譯時(shí)的靜態(tài)類型檢查。

目標(biāo)

• 使用TypeScript開發(fā)Node.js應(yīng)用程序

Node.js

Node.js本身只是一個(gè)可以運(yùn)行JavaScript代碼的運(yùn)行環(huán)境共啃，基本上可認(rèn)為Node.js是由V8 +libuv組成占调，V8用于解釋JavaScript代碼，libuv處理異步模型移剪。

環(huán)境檢查

$ node -v
v14.16.0

$ npm -v
6.14.11

創(chuàng)建項(xiàng)目目錄并進(jìn)入

$ mkdir ts && cd ts

使用Node.js包管理器NPM初始化項(xiàng)目骨架究珊，生成項(xiàng)目依賴包配置文件package.json。

$ npm init -y

package.json

配置編譯和運(yùn)行腳本

• 使用npm run start編譯src目錄下的*.ts源碼生成到dist目錄下的*.js文件后運(yùn)行*.js文件

$ vim package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "scripts":{
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"tsc && node build/index.js"
  },
  "dependencies": {
    "typescript": "^4.2.4"
  },
  "devDependencies": {},
  "keywords": [],
  "author": "",
  "license": "ISC"
}

• package.json的scripts屬性用于配置指令集合纵苛，配置后可使用npm run *運(yùn)行在scripts節(jié)點(diǎn)下配置的指令剿涮。

"start":"tsc && node build/index.js"

@types/node

由于開發(fā)環(huán)境的Node.js，為適應(yīng)合適的類型校驗(yàn)和代碼提示攻人，需引入Node.js的類型文件取试。

安裝@types/node包讓TypeScript支持Node.js內(nèi)置模塊

$ npm i -S @types/node

TypeScript

利用npm全局安裝TypeScript編譯器

$ npm i -g typescript

查看TypeScript編譯器版本

$ tsc -v
$ tsc --version
Version 3.5.3

查看幫助文檔

$ tsc --help

更新TypeScript版本

$ npm update -g typescript

為當(dāng)前項(xiàng)目安裝TypeScript依賴包

$ npm i -S typescript

TypeScript文件以.ts作為文件擴(kuò)展名

1. 使用TypeScript編譯器tsc命令將.ts文件轉(zhuǎn)換為.js文件后
2. 再使用node命令運(yùn)行.js文件

$ vim test.ts
var message:string = "hello world"
console.log(message)
$ tsc test.ts
$ node test.js

tsconfig.json

生成TypeScript編譯器配置文件tsconfig.json，當(dāng)TypeScript編譯器在編譯*.ts文件時(shí)會(huì)使用項(xiàng)目根目錄下的tsconfig.json怀吻，根據(jù)tsconfig.json文件中的配置項(xiàng)執(zhí)行編譯瞬浓。默認(rèn)若tsconfig.json中沒有任何配置，則TypeScript編譯器會(huì)默認(rèn)從編譯項(xiàng)目目錄下找到所有的.ts蓬坡、.tsx猿棉、.d.ts文件。

$ tsc --init

配置TypeScript編譯器選項(xiàng)

$ vim tsconfig.json
"outDir":"./build",
"rootDir":"./src",

創(chuàng)建源代碼目錄和編譯輸出目錄

$ mkdir src && mkdir build\

創(chuàng)建測試代碼

$ cd src
$ vim index.ts
const message:string = "hello world";
console.log(message);

使用TypeScript編譯器編譯*.ts源碼屑咳，編譯后會(huì)在outDir目錄下生成*.js文件萨赁。

$ tsc index.ts

使用node命令運(yùn)行*.js文件獲取最終結(jié)果

$ cd .. && cd build
$ node index.js

創(chuàng)建TypeScript配置文件進(jìn)行項(xiàng)目初始化

• 執(zhí)行tsc --init命令后將自動(dòng)在當(dāng)前目錄下生成tsconfig.json配置文件
• tsconfig.json文件所處路徑是當(dāng)前TS項(xiàng)目的根路徑。

$ tsc --init

配置使用

• 不帶任何輸入文件的情況下調(diào)用tsc命令兆龙，編譯器會(huì)從當(dāng)前目錄 開始查找tsconfig.json文件杖爽，并逐級(jí)向上搜索父目錄。
• 不帶任何輸入文件的情況下調(diào)用tsc命令紫皇，且使用命令行參數(shù)--project或-p指定一個(gè)包含tsconfig.json文件的目錄慰安。

配置選項(xiàng)

• tsconfig.json配置文件主要包含兩塊內(nèi)容：指定待編譯的文件、定義編譯選項(xiàng)坝橡。

$ vim tsconfig.json

{
  "compilerOptions": {
    "target": "esnext", 
    "module": "esnext",
    "lib": ["es2016", "dom"],
    "outDir": "./build",
    "rootDir": "./src", 
    "strict": true, 
    "moduleResolution": "node",
    "esModuleInterop": true,"skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude":["node_modules"]
}

編譯器選項(xiàng)

• target TS編譯后生成的JS文件所需遵循的ES標(biāo)準(zhǔn)泻帮，候選項(xiàng)為ES3、ES5计寇、ES2015锣杂、ES2016...
• module 遵循的JS模塊規(guī)范，候選項(xiàng)為commonjs番宁、AMD元莫、ES2015...
• outDir 編譯輸出的JS文件存放的文件夾
• esModuleInterop 是否允許從沒有設(shè)置默認(rèn)導(dǎo)出的模板中默認(rèn)導(dǎo)入，此配置并不影響代碼的顯示蝶押，僅僅時(shí)為了類型檢查踱蠢。
• lib項(xiàng)目中使用的語法類庫，比如使用console需dom類庫，使用Symbol需添加es2015類庫等茎截。

其他選項(xiàng)

• include 編譯時(shí)需要包含的文件夾
• exclude 編譯時(shí)需要剔除的文件夾

ts-node

針對TypeScript還需要ts-node包的支持苇侵。

$ npm i -D ts-node

• ts-node包用于在Node.js環(huán)境下直接運(yùn)行TypeScript文件獲取結(jié)果

$ ts-node src/index.ts

nodemon

沒有熱更新修改完代碼后是不會(huì)立即自動(dòng)重啟生效的，實(shí)現(xiàn)熱更新可采用nodemon包實(shí)現(xiàn)企锌。

$ npm i -D nodemon

• nodemon包專門針對在開發(fā)期間自動(dòng)重啟Node.js應(yīng)用程序

熱更新命令

$ nodemon -e ts --exec ts-node src/index.ts

• -e ts表示監(jiān)聽TypeScript文件
• --exec ts-node表示需要使用ts-node來編譯代碼

$ nodemon -w src/ -e ts-node ./src/index.ts

熱更新命令表示使用nodemon監(jiān)控src/下所有的TypeScript文件的改動(dòng)榆浓，當(dāng)發(fā)生改動(dòng)時(shí)直接使用ts-node重新生成index.ts。

配置自定義腳本命令

$ vim package.json

"scripts": {
  "start": "nodemon -e ts --exec ts-node src/index.ts"
},

執(zhí)行熱更新

$ npm run start

TypeScript Tips

如何在TypeScript中import導(dǎo)入JSON文件呢撕攒？

解決的方式在項(xiàng)目根目錄下的tsconfig.json即TypeScript編譯器配置文件中陡鹃，設(shè)置compilerOptions編譯編譯器選項(xiàng)下的resolveJsonModule屬性為true即可。

$ vim tsconfig.json

{
  "compilerOptions": {
    "resolveJsonModule": true,
  }
}

然后在需要導(dǎo)入JSON文件的位置添加ES6模塊規(guī)范的導(dǎo)入寫法

import * as pkg from "package.json"

運(yùn)行腳本出現(xiàn)錯(cuò)誤信息：無法在模塊外使用import語句抖坪，因?yàn)槟K加載實(shí)現(xiàn)的ES6的語法萍鲸。

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
SyntaxError: Cannot use import statement outside a module

如何為TypeScript設(shè)置路徑別名（路徑映射）呢？

Vue項(xiàng)目中可利用@來指代src目錄擦俐，通過配置TypeScript的tsconfig.json中compilerOptions下的paths屬性脊阴，可告知TypeScript編譯器，在解析路徑是將同意將src解析為baseUrl下的src目錄捌肴。

$ vim tsconfig.json

{
  "compilerOptions": {
    "paths":{
      "@/*":["src/*"],
      "*":["./node_modules/*", "./typings/*"]
    }
  }
}