引入

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下的提示插件了。