# 使用Typescript开发项目

# 基本使用

1、安装Typescript

npm install --save-dev typescript awesome-typescript-loader

2、配置webpack.config.js支持Typescript

//webpack.config.js

const { CheckerPlugin } = require('awesome-typescript-loader')

module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx','.json']
  },
  module: {
    rules: [{
      test: /\.(t|j)sx?$/, //支持js、ts、jsx
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'babel-loader',
        options:{
          babelrc:true
        }
      },{
        loader: 'awesome-typescript-loader'
      }]
    }]
  },
  plugins:[
    new CheckerPlugin()
  ]
}

3、配置tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
      "allowJs":true
  }
}

# 高级使用

1、设置cyb.config.js中的entryExt的值为.ts

//cyb.config.js
module.exports = {
    entryExt: '.ts' //脚本入口扩展名 默认为.js
}

配置脚本扩展名需要vue-cli版本 >= v1.5.0。

2、将项目入口脚本扩展名.js修改.ts

.
├── README.md
├── cyb.config.js
├── package.json
├── src
│   └── views
│       └── index
│           ├── index.html
│           ├── index.ts # 修改脚本入口扩展名为.ts
│           └── module
├── tsconfig.json
└── webpack.config.js