Webpack與TypeScript

引入

TypeScript是最近一段時間非常火的一個JavaScript的超集。說是超集，那麼自然TypeScript也完整的支持JavaScript語法，同時還提供了許多新特性。

那麼Webpack也能夠對TypeScript的源文件進行打包。

使用

首先創建一個新項目，就叫typescript。

然後在項目根目錄下新建src文件夾、webpack.config.js配置文件。

在src文件夾下新建一個index.ts，寫入如下內容：

class Greeter{
    greeting: string;
    constructor(message: string){
        this.greeting = message;
    }
    greet(): string{
        return `Hello ${this.greeting}`
    }
}

let test = new Greeter("Meskjei");

alert(test.greet());

接着安裝Webpack:

yarn add webpack webpack-cli

然後編寫配置文件（webpack.config.js）：

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    }
}

既然使用了ts-loader，自然就要去安裝它：

yarn add ts-loader

嘗試直接打包的話，會發現報錯，錯誤提示是缺少tsconfig.json文件。如果一個目錄下存在一個tsconfig.json文件，那麼它意味着這個目錄是TypeScript項目的根目錄。 tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項。

那就新建一個tsconfig.json：

{
    "compilerOptions": {
        "outDir": "./dist",
        "module": "es6",
        "allowJs": true
    },
    "exclude": [
        "node_modules"
    ]
}

保存之後就可以正常打包了。

問題

我們知道在編寫TypeScript的時候，IDE是可以根據相關信息（例如函數參數個數、類型還有語法）來提示我們寫的代碼是否正確。

這在完全由TypeScript寫就的代碼中自然沒有什麼問題，可是我們可能需要引入第三方模塊，而大部分第三方模塊都是由JavaScript寫成的，那麼這個時候，調用第三方模塊就不會有錯誤提示了。這該怎麼辦呢？

以lodash爲例，我們修改一下index.ts文件：

import * as _ from 'lodash'
class Greeter{
    greeting: string;
    constructor(message: string){
        this.greeting = message;
    }
    greet(): string{
        return _.join(["Hello", this.greeting], ' ');
    }
}

let test = new Greeter("Meskjei");

alert(test.greet());

我在代碼中調用了_.join()方法，現在如果寫的是一個錯誤的調用方式，那麼IDE也不會提示。

解決方案是安裝@types/lodash：

yarn add @types/lodash

安裝完成之後重新打開源文件，如果是寫成錯誤的形式，那麼IDE就會提示錯誤了。

那麼該怎麼知道哪些模塊可以安裝對應的提示插件呢？

通過TypeSearch這個網站查詢就可以知道哪些組件有對應的在TypeScript下的提示插件了。