vue2中使用typescript的实现

这里使用的是vue2脚手架搭建vue项目，然后再手动改动文件使用ts；vue3脚手架可以自动生成ts开发环境

一、新建vue项目

vue init webpack vuets

二、配置webpack

修改build 文件下的webpack.base.conf.js

//修改内容
 resolve: {
     
    extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
    alias: {
     
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
module: {
     
    rules: [
    //...新增内容
    {
     
        test: /\.tsx?$/i,
        use: [{
     
          loader: 'ts-loader',
          options: {
     
            appendTsSuffixTo: [/\.vue$/]
          }
        }],
        exclude: /node_modules/
      }
    ]
}

三、创建 vue 声明文件

src文件夹下新建shims-vue.d.ts，名称随意，以.d.ts结尾

declare module '*.vue' {
     
    import Vue from 'vue'
    export default Vue
  }

四、新建tsconfig.json

1.在项目的最外层通过控制台 tsc --init生成配置文件
如果提示没有 tsc，你需要在全局安装 typescript
2.直接新建文件

仅作参考

{
     
  "include": [ "src/**/*" ],
  "exclude": [ "node_modules" ],
  // 编译选项
  "compilerOptions": {
     
      // 是否以严格模式解析
      // "strict": true, 
      // 解析非相对模块名的基准目录
      // "baseUrl": ".",
      // 输出目录
      // "outDir": "./output",
      // 移除注释
      // "removeComments": true,
      // 指定特殊模块的路径,如jQuery
      // "paths": {
     
          // "jquery": [
          //     "node_modules/jquery/dist/jquery"
          //   ]
      // },
      // 运行从没有设置默认到处的模块中默认导入
      "allowSyntheticDefaultImports": true,
      // 启用装饰器
      "experimentalDecorators": true,
      // 运行便于JavaScript文件
      "allowJs": true,
      // 采用的模块系统
       "module": "commonjs",
      // 编译输出目标es版本
      "target": "es5",
      // 如何处理模块
      "moduleResolution": "node",
      // 将每个文件作为单独的模块
      "isolatedModules": true,
      // 编译过程中需要引入的库文件的列表
      "lib": [
          "dom",
          "es5",
          "es6",
          "es7",
          "es2015.promise"
      ],
       // 是否包含可以用于 debug 的 sourceMap
      "sourceMap": true,
      "pretty": true
  }
}

五、修改文件

1. src/App.vue

<script lang="ts">
import {
      Vue, Component } from 'vue-property-decorator'

@Component
export default class App extends Vue {
     
}
</script>

2. src/components/HelloWorld.vue

<script lang="ts">
import {
      Vue, Component } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
     
  msg: string = 'Welcome to Your Vue.js App'
}
</script>

3. src/router/index.ts

import Vue from 'vue'
import Router, {
      RouteConfig } from 'vue-router'

import HelloWorld  from '@/components/HelloWorld.vue'
Vue.use(Router)
const routes: RouteConfig[] = [
  {
     
    path: '/',
    component:HelloWorld
  }
]
export default new Router({
     
  routes
})

4. src/main.ts

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
     
  el: '#app',
  router,
  components: {
      App },
  template: ''
})

六、修改打包入口

回到 webpack.base.config.js 配置文件，讲入口的 main.js 修改为 main.ts 即可.

module.exports = {
     
  entry: {
     
    app: './src/main.ts'
  }
  ...
}

七、下载依赖

npm install typescript ts-loader vue-property-decorator vue-class-component -D

八、vscode报错问题

1. 修改vscode中的settting
   点击右上角直接修改配置

{
     
    "explorer.confirmDelete": false,
    //不注释代码会提示语法报错
    // "files.associations": {
     
    //     "*.vue": "html"
    // },
    "editor.linkedEditing": true,
    "diffEditor.ignoreTrimWhitespace": false,
    //es7的报错问题
    "js/ts.implicitProjectConfig.experimentalDecorators": true,
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "typescript.validate.enable": false,
    "javascript.validate.enable": false
}

链接

typescript