VUE2项目使用typescript

一、项目兼容typescript

1. 安装ts-loader，避免loader安装过高版本，添加了版本控制。npm i ts-loader@8.2.0 typescript --save-dev
2. chainWebpack添加对应loader配置。

config.module
    .rule('tsx')
    .test(/.tsx?$/)
    .use('ts-loader')
    .loader('ts-loader')
    .options({
        appendTsSuffixTo: [/.vue$/]
    })
    .tap(options => {
        return options;
    });

3. 项目根目录添加tsconfig.json文件。

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "lib": ["dom","es2016"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.d.ts"
  ],
  "exclude": ["node_modules"]
}

4. 重启项目，让webpack配置生效，我们即可新建ts文件，使用ts了。

a、新建ts-test.ts文件；

b、文件编写一个class测试；

     export class Person {
         age: number = 18
         name: string = '张三'
     }

c、文件引入class，并使用；

    // 引入
    import {Person} from './ts-test.ts';
    // 使用
    const p = new Person()
    console.log(p)

d、程序正常运行。

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dea4d99cc2c448e1933619d7eeb4dec7~tplv-k3u1fbpfcp-watermark.image?)

二、vue组件使用typescript编写

1. 安装插件 npm i vue-class-component vue-property-decorator --save

2. vue组件使用ts，这里仅写一个简单示例，详细使用可以参考：https://xie.infoq.cn/article/00845440bed4248cb80c15128

   //模板和原生vue保持一致
   <template>
       <div class="container">
           <div>{{message}}</div>
           <div>年龄：{{info.age}}</div>
           <div>年龄：{{info.age}}</div>ming chegn
       </div>
   </template>
   
   <script lang="ts">
       import { Vue, Component } from 'vue-property-decorator';
       type User = {
           name: string;
           age: number;
       };
       @Component({
           components: {
           },
       })
       export default class White extends Vue {
           message = 'ts hello world';
           info: User = { name: '张三', age: 18 };
           created() {
               console.log('created');
           }
           mounted() {
               console.log('mounted');
           }
       }
   </script>