typescript整合到vue中的详细介绍，ts+vue一梭子

通过vue-cli命令行安装vue项目，注意不要eslint

1. 安装依赖

   cnpm install typescript --save-dev
   cnpm install ts-loader --save-dev
   

2. 在vue配置文件 webpack.base.conf.js 中做修改

   在rules中的js配置对象下面添加
   {
       test: /.ts$/, 解析在vue文件中的ts脚本
       loader: 'ts-loader', 使用 ts-loader 解析
       exclude: /node_modules/, 无视node_modules
       options: {
           appendTsSuffixTo: [/.vue$/], 设置vue文件可以使用ts
       }
   }
   然后将entry改成如下
   entry: {
       app: './src/main.ts'
   }
   再把你的入口文件main.js文件后缀名改成ts
   其余的配置不要动
   

3. 新建指向文件

   在项目的src跟目录中创建一个后缀为.d.ts的文件，此文件名称随意，我使用index
   index.d.ts文件
       写如下代码，表示声明一个模块，应用于所有的vue组件的import语句中
       declare module "*.vue" {
           import Vue from "vue";
           export default Vue;
       }
   这个文件一旦声明，ts-loader就会找到Vue
   

4. 新建typescript配置文件

   在项目根目录创建
   tsconfig.json文件
   添加如下配置
   {
       "compilerOptions": {
           "module": "es2015",  指定模块是es2015的
           "moduleResolution": "node", 指定路径解析方式用node
           "target": "es5", 指定编译后的js使用es5版本
           "allowSyntheticDefaultImports": true, 允许使用 import Vue from 'vue' 这类语法
           "lib": [
               "dom",
               "es5",
               "es2015.promise"
           ]
       },
       "include": [
           "src/**/*"
       ],
       "exclude": [
           "node_modules",
           "**/*.spec.ts"
       ]
   }
   

5. 基本使用

   <script lang="ts">
       export default {
           name: 'HelloWorld',
           data (): object {
               return {
               msg: 'Welcome to Your Vue.js App'
               }
           }
       }
   </script>
   

6. vue内置类型使用

   vue其实在你安装之后，默认已经帮你弄好了.d.ts文件，关于vue本身的验证他们都做好了，我们直接拿来用就可以了
   <script lang="ts">
       import Vue, { ComponentOptions } from 'vue';
       interface HelloWorld extends Vue {
           msg: string
       }
       export default {
           name: 'HelloWorld',
           data (): object {
               return {
                   msg: 'Hello World!'
               }
           }
       } as ComponentOptions<HelloWorld>
   </script>
   ComponentOptions这个东西是用来验证vue的内置的一些属性，比如name,data,methods，并不会往深层次验证
   ComponentOptions<HelloWorld>相当于是验证了this，而data内部的值无法验证
   <script lang="ts">
       import Vue, { ComponentOptions } from 'vue';
       interface HelloWorld extends Vue {
           msg: string
       }
       export default {
           name: 'HelloWorld',
           data (): object {
               return {
                   msg: 1111 /* 这样也是不会报错的*/
               }
           }
       } as ComponentOptions<HelloWorld>
   </script>
   为了解决这个问题，需要用到vue-class-component插件
   

7. vue-class-component插件的使用

   使用这个插件，你需要把组件定义成原生的js类和一个@Component修饰符
   安装这个插件
   <script lang="ts">
       import Vue from 'vue';
       import Component from 'vue-class-component';
       @Component({ 
           template: `
           <div class="hello">
           {{message}}
           </div>`
       })
       export default class HelloWorld extends Vue {
           message: string = 'Hello'
           mounted(){
               this.message = 'ye'
           }
       }
   </script>
   这种写法完美解决上面的问题，而且写法简洁
   @Component是一个es7的修饰符，用来给类添加成员
   要运行上面的代码，还要在tsconfig.json文件中添加配置
   "experimentalDecorators": true