如何使用TypeScript和Webpack編寫網頁應用

TypeScript所做的，是在JavaScript的基礎上加入了類型，TypeScript編譯器将TypeScript編譯成JavaScript，可以在浏覽器或者nodejs平台上運作。最新版本的TypeScript文法根ES6标準已經十分接近，而且因為是JS的超集，TS代碼中夾雜普通JS代碼也是可以的。是以，如果你也考慮開始使用Bable＋ES6，不妨也看一下TypeScript。

TypeScript項目和tsconfig.json

首先安裝TypeScript編譯器

npm i -g typescript
           

進入項目目錄，建立一個

hello.ts

function sayHello(name: string) {
    return 'Hello, ' + name;
}

let myName = 'Cheng Wang';

console.log(sayHello(myName));
           

然後執行

tsc hello.ts
           

編譯器會生成 hello.js

function sayHello(name) {
    return 'Hello, ' + name;
}
var myName = 'Cheng Wang';
console.log(sayHello(myName));
           

為了友善編譯器和編輯器識别TypeScript項目，TypeScript約定了tsconfig.json檔案來存儲項目配置，如果運作

tsc

時不指定輸入檔案，編譯器則會查找項目目錄中的這個檔案，如果找不到則會依次向父級目錄查找。比如這樣：

{
    "compilerOptions": {
        "outFile": "dist/app.js",
        "sourceMap": true
    },
    "files": [
        "src/app.ts"
    ]
}
           

直接運作

tsc

，會自動把

src/app.ts

編譯到

dist/app.js

。

關于這個配置檔案的更多選項，可以看官方文檔。

使用子產品

TypeScript中，子產品的使用方法與ES6一緻。

src/modules/utilities.ts

：

function getUrlParam(key: string) {

  const REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
  let result: string[] = location.search.substr(1).match(REG_PATTERN);

  if (result !== null) {
    return decodeURIComponent(result[2]);
  } else {
    return null;
  }

}

export { getUrlParam }
           

src/app.ts

：

import { getUrlParam } from './modules/utilities';

let deviceType: string = getUrlParam('deviceType');

console.log(deviceType);

           

編譯後的app.js（TypeScript編譯器在輸出單個檔案時，隻能使用AMD或System子產品規範）：

define("modules/utilities", ["require", "exports"], function (require, exports) {
    "use strict";
    function getUrlParam(key) {
        var REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
        var result = location.search.substr(1).match(REG_PATTERN);
        if (result !== null) {
            return decodeURIComponent(result[2]);
        }
        else {
            return null;
        }
    }
    exports.getUrlParam = getUrlParam;
});
define("app", ["require", "exports", "modules/utilities"], function (require, exports, utilities_1) {
    "use strict";
    var deviceType = utilities_1.getUrlParam('deviceType');
    console.log(deviceType);
});
           

使用NPM庫

我們開發JS程式的時候，要用到NPM上的第三方的庫，比如jQuery、Lodash等，但是絕大多數庫都是用JS寫的，沒有類型提示，我們也不能在在代碼中将這些庫作為子產品引入。

比如我們需要在項目中使用Lodash：

npm i --save lodash
           

然後在代碼中引入：

import * as _ from 'lodash';

console.log(_.camelCase('helloworld'))
           

運作

tsc

則報錯：

src/app.ts(1,20): error TS2307: Cannot find module 'lodash'.
           

如果想在TypeScript代碼中直接使用npm上的JS庫，需要借助Typings這個工具。

Typings也是一個包管理器，它管理的是JS代碼“定義檔案”，用Typings安裝相應的定義檔案後，編輯器和編譯器就可以去node_modules目錄中找到相應的JS庫，并編譯到最終的JS代碼中。

先安裝Typings工具：

npm i -g typings
           

然後安裝Lodash的定義檔案：

typings install --save lodash
           

Typings會去NPM、Bower上尋找庫的作者加的定義檔案，但是有的庫如jQuery并沒有官方的定義檔案，則需要從社群維護的DefinitelyTyped目錄下安裝：

typings install --save --ambient jquery
           

然後再tsconfig.json中的files配置中加入一條：

"files": [
    "src/app.ts"，
    "typings/main.d.ts"
]
           

此時編譯就不會提示找不到子產品了。

安裝好定義檔案之後，如果使用Visual Studio Code等對TypeScript支援較好的編輯器，則會提供更加強大的代碼提示功能。

使用Webpack建構

TypeScript編譯器支援很多子產品組織規範，如ES6、commonJS、AMD等，但是如果想要将多個ts檔案打包成一個檔案，TypeScript隻支援AMD和System，對于浏覽器應用來說，還需要引入第三方的子產品加載器。如果使用Webpack配合TypeScript的loader，則可以友善地建構浏覽器可以運作的JS代碼。

首先安裝Webpack和ts-loader：

npm i webpack -g

npm i ts-loader --save-dev
           

然後配置項目目錄中的webpack.config.js:

module.exports = {

  entry: './src/app.ts',
  
  output: {
    filename: 'app.js',
    path: './dist'
  },
  
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
  
}
           

然後就可以通過運作

webpack

來建構了，建構生成的代碼自帶了webpack的子產品加載器，可以直接在浏覽器中運作。