webpack - TypeScript配置

webpack - TypeScript配置

TypeScirpt是微软开源的一款语言，它是javascript的超集，可以编译成javascript。 当构建大型项目的时候，使用ts可以极大的提高开发效率。

下面是使用构建工具webpack配置typescript的介绍。

typescript开发环境搭建

• 通过npm init初始化一个项目， 使用npm install --save-dev typescript ts-loader安装ts和loader。

这里使用ts-loader搭配webpack3.0打包时出现了一个错误，原因是二者不匹配，将ts-loader退化为3.1.1解决了问题。

• 配置webpack.config.js文件。

module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: {
        loader: 'ts-loader'
      }
    }
  ]
}

• 配置tsconfig.json文件，

tsconfig.json文件是ts位于项目根目录下的配置文件，与babel的.babelrc类似。配置如下：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowJs": true
  },
  "include": [
    "./src/*"
  ],
  "exclude": [
    "./node_modules"
  ]
}

tsconfig.json的配置选项有很多，更多细节可以参考 tsconfig.json配置。

类库的类型声明

ts中变量有类型的，在我们配合使用其他js类库时，比如lodash,vue等。也可以使得这些类库中的一些函数等也具有类型判别。 当我们传入错误的类型时，可以针对性的提示类型错误信息。

只需要安装对应的声明文件。比如
'npm install --save @types/lodash'或者@types/vue等。

awesome-typescirpt-loader

除了官网提供的ts-loader外，也可以使用开发者开发的awesome-typescript-loader，二者的作用是相似的，可以使用这个loader代替ts-loader。查看更多关于这个loader的信息，访问

awesome-typescript-loader。