typescript node.js

參考資料

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

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

目標(biāo)

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

Node.js

Node.js本身只是一個可以運行JavaScript代碼的運行環(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)建項目目錄并進(jìn)入

$ mkdir ts && cd ts

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

$ npm init -y

package.json

配置編譯和運行腳本

  • 使用npm run start編譯src目錄下的*.ts源碼生成到dist目錄下的*.js文件后運行*.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 *運行在scripts節(jié)點下配置的指令。
"start":"tsc && node build/index.js"

@types/node

由于開發(fā)環(huán)境的Node.js，為適應(yīng)合適的類型校驗和代碼提示，需引入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)前項目安裝TypeScript依賴包

$ npm i -S typescript

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

  1. 使用TypeScript編譯器tsc命令將.ts文件轉(zhuǎn)換為.js文件后
  2. 再使用node命令運行.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文件時會使用項目根目錄下的tsconfig.json，根據(jù)tsconfig.json文件中的配置項執(zhí)行編譯。默認(rèn)若tsconfig.json中沒有任何配置，則TypeScript編譯器會默認(rèn)從編譯項目目錄下找到所有的.ts、.tsx、.d.ts文件。

$ tsc --init

配置TypeScript編譯器選項

$ 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源碼，編譯后會在outDir目錄下生成*.js文件。

$ tsc index.ts

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

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

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

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

配置使用

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

配置選項

  • tsconfig.json配置文件主要包含兩塊內(nèi)容：指定待編譯的文件、定義編譯選項。
$ 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"]
}

編譯器選項

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

其他選項

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

ts-node

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

$ npm i -D ts-node
  • ts-node包用于在Node.js環(huán)境下直接運行TypeScript文件獲取結(jié)果
$ ts-node src/index.ts

nodemon

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

$ npm i -D nodemon
  • nodemon包專門針對在開發(fā)期間自動重啟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)發(fā)生改動時直接使用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文件呢？

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

$ vim tsconfig.json

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

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

import * as pkg from "package.json"

運行腳本出現(xiàn)錯誤信息：無法在模塊外使用import語句，因為模塊加載實現(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項目中可利用@來指代src目錄，通過配置TypeScript的tsconfig.json中compilerOptions下的paths屬性，可告知TypeScript編譯器，在解析路徑是將同意將src解析為baseUrl下的src目錄。

$ vim tsconfig.json

{
  "compilerOptions": {
    "paths":{
      "@/*":["src/*"],
      "*":["./node_modules/*", "./typings/*"]
    }
  }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容