詳解使用Typescript開(kāi)發(fā)node.js項(xiàng)目（簡(jiǎn)單的環(huán)境配置）

最近在學(xué)習(xí)typescript的過(guò)程中，想到也許可以使用ts來(lái)開(kāi)發(fā)node.js項(xiàng)目。在網(wǎng)上搜了一下，其實(shí)已經(jīng)有很多開(kāi)發(fā)者實(shí)踐了這方面的內(nèi)容。這里，我記錄一下自己搭建開(kāi)發(fā)環(huán)境的簡(jiǎn)單過(guò)程。

使用Typescript開(kāi)發(fā)的好處:

• 較嚴(yán)格的類型檢查和語(yǔ)法檢查。
• 對(duì)ES6/ES2015/ES7(部分)支持比較好。
• 編譯后的js文件很干凈，也支持多種代碼規(guī)范。
• 其他，請(qǐng)參見(jiàn)文檔。

準(zhǔn)備

• node.js v6.9.1 或者任意的新版本，老版本暫時(shí)沒(méi)有試驗(yàn)。
• tsc typescript編譯器，使用npm安裝:npm install -g typescript,當(dāng)前是v2.0.10
• 編輯器：vscode
• 命令行終端:windows的cmd

特別提示和吐槽：安裝tsc可能需要翻墻（如果特別慢的話），所以也可以使用淘寶鏡像。

建立node.js項(xiàng)目

使用npm init在指定的目錄中建好項(xiàng)目的目錄。

在這里我建立了一個(gè)自己的項(xiàng)目目錄結(jié)構(gòu):

testTS
|---build         //編譯后的js文件目錄
|---src          //ts文件目錄
|---static        //客戶端靜態(tài)文件
| |---scripts
| |   |---main.js
| |----styles
| |   |---style.css
| |----assets
|---views         //html文件目錄
|  |---index.html
|---package.json
|---tsconfig.json

編輯 tsconfig.json

在上面的目錄結(jié)構(gòu)中有一個(gè)tsconfig.json文件，用來(lái)設(shè)置ts的編譯選項(xiàng)。

想要獲取這份文件，可以在項(xiàng)目根目錄下使用tsc --init，就會(huì)自動(dòng)建立好一份.tsconfig.json。

編寫(xiě)需要的配置項(xiàng)

默認(rèn)情況下，tsc會(huì)使用默認(rèn)的編譯配置編譯目錄中的所有.ts文件。通過(guò)書(shū)寫(xiě)tsconfig.json，我們可以配置tsc的編譯行為，達(dá)到想要的結(jié)果：

{
  "compilerOptions": {
    "module": "commonjs",  //指定生成哪個(gè)模塊系統(tǒng)代碼
    "target": "es6",    //目標(biāo)代碼類型
    "noImplicitAny": false, //在表達(dá)式和聲明上有隱含的'any'類型時(shí)報(bào)錯(cuò)。
    "sourceMap": false,   //用于debug  
    "rootDir":"./src",   //僅用來(lái)控制輸出的目錄結(jié)構(gòu)--outDir。
    "outDir":"./build",   //重定向輸出目錄。  
    "watch":true      //在監(jiān)視模式下運(yùn)行編譯器。會(huì)監(jiān)視輸出文件，在它們改變時(shí)重新編譯。
  },
  "include":[
    "./src/**/*"
  ],
  "exclude":[
    "views",
    "static"
  ]
}

配置文件注意點(diǎn)

"compilerOptions"是編譯選項(xiàng)，具體詳情，請(qǐng)參見(jiàn)：

中文文檔
英文文檔

"module"是用來(lái)指定設(shè)置編譯后的js代碼，使用何種模塊規(guī)范。由于是開(kāi)發(fā)node.js項(xiàng)目，所以選擇commonjs。(有興趣的話，可以把所有module所有可能的值都試一遍，查看編譯后的js文件的差別，會(huì)發(fā)現(xiàn)生成的代碼還是很不錯(cuò)的，很干凈。)

"target"是編譯后的js代碼遵循何種規(guī)范，可以是es3/es5/es6等等，這里為了對(duì)比ts 2.0代碼和es6代碼的不同，使用了"es6"。

"rootDir"是一個(gè)需要注意的地方，它會(huì)告訴編譯器，此目錄下的文件需要經(jīng)過(guò)編譯。那么，如果設(shè)置了這個(gè)選項(xiàng)，又在外部（比如根目錄）放置了.ts文件，會(huì)怎么樣呢？tsc會(huì)提示一條類似這樣的錯(cuò)誤：

并且，在build的目錄中，輸出的目錄結(jié)構(gòu)也會(huì)變化:

這顯然不是我們想要的結(jié)果。

解決方案是使用include和exclude屬性。按照文檔說(shuō)明，"include" 和 "exclude" 屬性指定一個(gè)文件glob匹配模式列表。表明需要包含的文件目錄或文件，以及需要過(guò)濾掉的文件或目錄（也可以使用"files"配置項(xiàng)，不過(guò)需要一個(gè)一個(gè)文件錄入,"files" 屬性明確指定的文件卻總是會(huì)被包含在內(nèi)，不管 "exclude" 如何設(shè)置。），詳見(jiàn)官方文檔說(shuō)明。

所以，添加"./src/**/*"到"include"所指向的數(shù)組，就可以指定./src下的所有文件，是我們真正需要被編譯的，其他目錄將會(huì)被排除。

"outDir" 指向了編譯后的js代碼輸出的地方。在文檔中也有"outFile"選項(xiàng)，可以把所有的ts文件按照一定順序規(guī)則打包成一個(gè)文件，具體可以參考文檔。在這里，我們優(yōu)先使用outDir。

試驗(yàn)一下

在書(shū)寫(xiě)完2個(gè)配置文件之后，就可以開(kāi)始撰寫(xiě)代碼，并執(zhí)行編譯了。我們?cè)囼?yàn)一下：

在./src/server.ts中,寫(xiě)一段簡(jiǎn)單的：

interface ICache{
  useCache:boolean;
  [propName:string]:any;
}
const cache:ICache = {useCache:true};

之后，在終端中輸入：

D:\workplace\nodeWP\testTS>tsc

經(jīng)過(guò)編譯，會(huì)生成server.js到build目錄中:

//server.js
const cache = { useCache: true };

使用.d.ts文件

既然要開(kāi)發(fā)一個(gè)項(xiàng)目，顯然不會(huì)只有這些代碼?？隙ㄒ玫絻?nèi)建模塊和第三方模塊。然而，直接導(dǎo)入模塊，在.ts文件中是不行的。例如：

這是由于typescript自身的機(jī)制，需要一份xx.d.ts聲明文件，來(lái)說(shuō)明模塊對(duì)外公開(kāi)的方法和屬性的類型以及內(nèi)容。感覺(jué)有一些麻煩。好在，官方以及社區(qū)已經(jīng)準(zhǔn)備好了方案，來(lái)解決這個(gè)問(wèn)題。

在TypeScript 2.0以上的版本，獲取類型聲明文件只需要使用npm。在項(xiàng)目目錄下執(zhí)行安裝:

npm install --save-dev @types/node

就可以獲得有關(guān)node.js v6.x的API的類型說(shuō)明文件。之后，就可以順利的導(dǎo)入需要的模塊了:

import * as http from 'http';

完成之后，不僅可以正常的使用http模塊中的方法，也可以在vscode中獲得相應(yīng)的代碼提示。

對(duì)于內(nèi)建模塊，安裝一個(gè)@types/node模塊可以整體解決模塊的聲明文件問(wèn)題。那么，對(duì)于浩如煙海的第三方模塊，該怎么辦呢？官方和社區(qū)中也提供了查找和安裝的渠道：

• typings
• DefinitelyTyped
• TypeSearch

自動(dòng)編譯和自動(dòng)重啟服務(wù)

解決完了聲明文件之后，其實(shí)我們已經(jīng)可以使用ts簡(jiǎn)單的進(jìn)行node.js項(xiàng)目的開(kāi)發(fā)了。但是，每次寫(xiě)完或者修改代碼，就要編譯，然后再啟動(dòng)，是一件不大但是相當(dāng)讓人煩躁的事情。為了效率，我們應(yīng)當(dāng)改善它。

首先，要讓.ts文件可以自動(dòng)被編譯。這在上文中的tsconfig.json文件中，已經(jīng)被設(shè)置好了，就是"watch":true 。此時(shí)在命令行執(zhí)行tsc命令后，編譯器就會(huì)時(shí)時(shí)監(jiān)控目錄中.ts文件的變化，然后自動(dòng)編譯。

自動(dòng)重啟node服務(wù)器，我們可以使用 supervisor 模塊解決，或者任何具有類似功能的解決方案都可以。

全局安裝supervisor模塊npm install -g supervisor，之后就可以在終端中使用supervior ./build/server.js啟動(dòng)服務(wù)器，并在服務(wù)器端代碼改變之后，自動(dòng)重啟服務(wù)器。

讓啟動(dòng)服務(wù)更簡(jiǎn)單

由于以上的2個(gè)命令，在啟動(dòng)時(shí)都可能需要附加一些參數(shù)，每次輸入很麻煩。

可以使用npm script來(lái)解決。在package.json文件中的"scripts"中，我們?cè)O(shè)置:

{
  "scripts":{
    "dev": "supervisor -w build ./build/server.js",
    "build": "tsc",
  }
}

執(zhí)行npm run dev之后，如果./build目錄中的.js文件發(fā)生改變時(shí)，就會(huì)重啟服務(wù)器。

執(zhí)行npm run build時(shí)，則只會(huì)編譯ts文件并監(jiān)控ts的改變。

使用例子來(lái)試驗(yàn)一下

import * as http from 'http';
//====================
const server = http.createServer(function(request:http.IncomingMessage,response:http.ServerResponse):void{
  console.log("create a server...");
  response.writeHead(200,{'Content-Type':'text/plain'});
  response.write('Hello world,we use typescript to develop.');
  response.end();
});

server.listen(3000,function(){
  console.log("Server listening on port 3000");
  console.log("test...");
});

補(bǔ)充：一個(gè)命令實(shí)現(xiàn)tsc編譯和重啟服務(wù)器

2017.5.3更新:

感謝大家對(duì)本文的支持。有朋友(@Ajaxyz)提出，有沒(méi)有辦法將ts編譯監(jiān)視和重啟服務(wù)器合并為一個(gè)命令？

這里提出一個(gè)比較簡(jiǎn)易的方法，使用gulp來(lái)管理這2個(gè)流程。（如何使用gulp工作，請(qǐng)參考Gulp API）

1. 使用gulp的watch()來(lái)監(jiān)控ts文件的變化并重啟服務(wù)器。

這種方式，需要使用gulp和gulp-typescript插件（安裝）

注意的一點(diǎn)是:gulp-typescript可能需要在項(xiàng)目的目錄安裝typescript，所以可以在項(xiàng)目的目錄中，運(yùn)行命令行:

npm install typescript

準(zhǔn)備好gulp和插件之后，需要書(shū)寫(xiě)一份gulpfile.js作為gulp項(xiàng)目需要執(zhí)行的任務(wù)文件，例子如下:

  //gulpfile.js
  
  let gulp = require('gulp');
  let ts = require('gulp-typescript');
  let tsp = ts.createProject('tsconfig.json'); //使用tsconfig.json文件配置tsc
  let exec = require('child_process').exec;
  
  let child;
  //目錄常量
  const PATHS = {
    scripts:['./src/**/*.ts'],
    output:'./build',
  };
  //編譯ts文件
  gulp.task('build-ts',['restart'],function(){
    return gulp.src(PATHS.scripts)
      .pipe(tsp())
      .pipe(gulp.dest(PATHS.output));  
  });
  //監(jiān)視ts文件變化
  gulp.task('watch-ts',['build-ts'],function(){  
    gulp.watch(PATHS.scripts,['build-ts']);
  });
  //自動(dòng)重啟服務(wù)器
  gulp.task('restart',function(){
    child = exec('supervisor -w build ./build/server.js',(error,stdout,stderr)=>{
      console.log(`stdout: ${stdout}`);
      console.log(`stderr: ${stderr}`);
      if (error !== null) {
        console.log(`exec error: ${error}`);
      }
    });
  });
  //開(kāi)發(fā)任務(wù)
  gulp.task('dev',['build-ts','restart','watch-ts']);

這樣，在開(kāi)發(fā)時(shí)，直接在項(xiàng)目目錄運(yùn)行g(shù)ulp dev，就可以啟動(dòng)編譯和服務(wù)器了。此后，gulp會(huì)監(jiān)視ts文件的改動(dòng)，然后編譯ts文件并重啟服務(wù)器。刷新頁(yè)面，就可以看到新結(jié)果已經(jīng)輸出在瀏覽器頁(yè)面中了。

還有一點(diǎn)需要留意的是,由于gulp負(fù)責(zé)監(jiān)視ts文件的變化，因此請(qǐng)?jiān)趖sconfig.json將"watch"設(shè)置為false或者刪掉這個(gè)屬性。

2. 使用tsconfig.json監(jiān)控ts文件變化并重啟服務(wù)器

用這種方式，首先打開(kāi)tsconfig.json對(duì)ts文件的監(jiān)視，然后修改gulpfile.js文件，如下:

  //...requier部分同上面例子，這里省略
  
  let tsChild,    //監(jiān)視ts文件修改子進(jìn)程
    serverChild;  //重啟服務(wù)器子進(jìn)程
  //編譯ts文件
  gulp.task('build-ts',function(){
     tsChild = exec('tsc',(error,stdout,stderr)=>{
      console.log(`tsc====>stdout: ${stdout}`);
      console.log(`tsc====>stderr: ${stderr}`);
      if (error !== null) {
        console.log(`exec error: ${error}`);
      }
    });
  });
  //自動(dòng)重啟服務(wù)器
  gulp.task('restart',function(){
    serverChild = exec('supervisor -w build ./build/server.js',(error,stdout,stderr)=>{
      console.log(`restart=====>stdout: ${stdout}`);
      console.log(`restart=====>stderr: ${stderr}`);
      if (error !== null) {
        console.log(`exec error: ${error}`);
      }
    });
  });
  //開(kāi)發(fā)任務(wù)
  gulp.task('dev2',['build-ts','restart']);

運(yùn)行g(shù)ulp dev2，效果和上一個(gè)例子一樣。

以上，提供一種解決辦法的方式和思路，僅供參考，如果用在實(shí)際環(huán)境中，還需要進(jìn)一步完善功能。

結(jié)語(yǔ)

本文只是對(duì)搭建typescript開(kāi)發(fā)node.js項(xiàng)目的環(huán)境做一個(gè)簡(jiǎn)單研究和記錄。

最初這樣想，也只是好奇可不可以這么做。實(shí)際上在node.js穩(wěn)定版本v6.9.1中已經(jīng)支持了90%的ES6。因此，直接使用ES6開(kāi)發(fā)node.js項(xiàng)目，是很好的選擇。

不完善的地方，請(qǐng)見(jiàn)諒，后面會(huì)慢慢補(bǔ)充。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。