前言

最近结束了vue-react的学习，开始学习下typescript，毕竟也是需要学习的，

下面讲解的是关于在vue中怎么去使用ts进行开发的

介绍

关于typescript的重要性，其实我们可以在另一个方面体现出来，就是现在的公司或多或少在工作上，有用到了typescript，或则是在招聘上写道了typescript等。所以多学一个。。多要点钱也是好的（个人的肮脏思想）

使用Typescript开发

在环境中，我们更多的是使用vue来开发（react也有，但是受众方面vue比较大），所以下面所需要用到的是vue-cli开发的环境，大概会用到几个知识点

1.vue.config.js

他对于vue项目（3.x）的概念，就类似于webpack.config的概念，很多时候vue项目的一些配置都是配置在这儿的，而不是配置在别的地方，下面有文档

2.tsconfig.json

从上面的话来理解，大概就是tsconfig,json是ts文件的根据地，编译的时候要经过这个文件（我也不知道我在说啥，大家明白这个文件很重要就好）

3.vue-shim.d.ts

这个文件我也暂时没明白他的作用，百度过，讲解基本是：

以上这个是我比较满意的，具体的需要我后面学深了才能理解了

运行前

先在界面里面写上一两句ts语句，看看效果

<template>
  <div>123</div>
</template>
<script lang='ts'>
export default {
  data: function() {
    return {};
  },
  created() {
    let strjs = "测试js";
    let strts: string = "测试ts";
    console.log(strts);
    console.log(strjs);
  }
};
</script>
<style scoped>
</style>

运行效果大概如下

过程

假设你一点都不关心这些，只是想知道怎么解决

1.npm安装ts，ts-load

cnpm install --save typescript ts-load

2.在vue.config.js中添加下面代码

 configureWebpack: {
    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }
      ]
    }
  }

3.编写tsconfig.json

在根目录下编些tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "experimentalDecorators": true
  }
}

4.在src文件夹下添加文件vue-shim.d.ts

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

5.在vue文件中使用<script lang='ts'></script>

6.文件结构

测试

接下来重启运行下

资料来源

ts---百度百科

vue.config.js

ts文档