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。