如何使用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編譯器支持不少模塊組織規範，如ES六、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的模塊加載器，能夠直接在瀏覽器中運行。