vue接入ts基本方法

2022-04-16 20:30:45 来源：易采站长站作者：

一、依赖记

项目从基础js改为ts，因为是初次尝试，本着最小依赖、最小改动原则，只引入了一些基础依赖：

typescript：#3.1.6 -- 接入ts的基础依赖，版本需要根据项目相关版本进行修改ts-loader：#3.5.0 -- 同样是基础依赖ts-lint tslint-config-standard tslint-loader -- 这三个是将原来的eslint校验替换掉，没仔细研究过，应该是可以处理一些引入了ts之后eslint导致的莫名其妙的校验问题。

二、配置记

webpack.base.config.js修改：

入口文件将原来的.js改为.ts

entry: {  app: ['babel-polyfill', './src/main.ts']},

resolve.extensions增加ts：

extensions: ['.tsx', '.ts', '.js', '.vue', '.json'],

rules增加对ts的解析：

{  test: /.(ts|tsx)?$/,  loader: 'ts-loader',  exclude: /node_modules/,  options: {   appendTsxSuffixTo: [/.vue$/], // ts不知道如何处理.vue结尾文件，需加此配置   happyPackMode: true // 开启多线程，加快编译  }}

eslint替换为tslint：

{  test: /.ts$/,  loader: 'tslint-loader',  exclude: /node_modules/,  enforce: 'pre'}

同时在vue-loader.conf.js里增加配置，在根目录下增加tslint.json配置文件：

// vue-loader.conf.jsconst mergeVue = require('webpack-merge')loaders: mergeVue(utils.cssLoaders({  sourceMap: sourceMapEnabled,  extract: isProduction}), {  ts: ['ts-loader', 'tslint-loader']  // 新增}),// tslint.json{  "extends": "tslint-config-standard",  "globals": {   "require": true  },  "rules": {   "no-consecutive-blank-lines": false  }}

另外还有其他一些基础的修改，比如ts会校验不同文件间的重名，并给出错误提示。这点当然可以通过配置去处理，但是个人觉得这个提示可以保留，只需要修改对应的变量名就可以了。
新增配置文件tsconfig.json（个别配置字段会在后面填坑说明）

{ "compilerOptions": {  "target": "es5",  "strict": true,  "module": "es2015",  "moduleResolution": "node",  "baseUrl": ".",  "paths": {   "@/*": ["src/*"]  },  "types": [   "node"  ],  "noImplicitAny": false,  "allowSyntheticDefaultImports": true }}

src目录下增加 vue.d.ts 文件：

此文件主要是告诉ts，.vue结尾的文件交给vue去处理。但是这样会造成一个父子组件引用问题，同样后边填坑单说。

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

三、修改记

1.将必要文件的.js替换为.ts

这里说必要的js结尾文件，我处理的主要是逻辑相关的文件，对于一些config类型的文件并没有修改，依然保留了js结尾，目的是最小改动原则，避免一些难处理的问题。

2.vue文件修改

针对vue文件：

需要在script标签上增加 lang='ts'同时需要用vue.extend定义组件如果有引用其他组件，未引入ts时候可以省略.vue后缀，但是引入ts之后，引入组建的时候一定要加上.vue后缀

<script lang="ts">import Vue from 'vue'import Table from '@/components/table/index.vue'export default Vue.extend({  data(){    return {      name: ''    }  }})

经过以上三步基础的修改，如果你的项目非常简单，简单到就是个测试架子，那就可以愉快地npm start了，没有太大问题。但是如果是原有项目，去start的时候，会爆出很多警告问题，当然如果是基础的ts校验问题，我们可以去直接修改文件或者配置即可。

忽略ts格式校验，我们可以看到原有项目里增加ts语法后（或者未增加ts语法）会出现另外一些问题，可能问题并不会影响到程序的编译运行，但是在编辑器里会飘红~ 接下来就简单说下所填的几个坑。

四、填坑记

Cannot find name ‘require‘. Do you need to install type definitions for node? 当我们用require引入某些文件时，可能会出现这个错误提示，这种问题基本就是需要安装对应的@type依赖，针对此问题：

安装：npm i --save-dev @types/node，在tsconfig.json里增加 "types": ["node"]，如果还是有错误提示，可以添加 declare var require: any。

类似的问题还有引入lodash、qs等，需要安装对应的@type/xx。如果使用了vue-cookie，需要安装对应的ts版本 vue-cookies-ts同时对应的方法需要做修改，详见文档 vue-cookies-ts 。

Cannot find module ‘XXX‘ or its corresponding type declarations.Vetur 这种错误出现场景是，我们按照基础内容配置好之后，通过import引入某个ts文件的时候出现的。这个问题其实挺诡异的，如果加上.ts后缀，会提示不需要加，去掉后缀之后就报找不到模块。

这个问题解决办法一种就是看有没有配置alias，同时需要在tsconfig.json里增加 "paths": {"@/*": ["src/*"]}。配置之后如果还不生效，基本方法二就能解决了，方法二就是把项目放在第一个，就是用vscode直接打开一个项目，而不是打开某个文件夹下有很多项目的情况。这个问题应该是vetur插件导致的。当然还有第三种方法就是添加单独的vetur配置，这个没有去研究，有时间的小伙伴可以考虑下。

Property ‘$http‘ does not exist on type ‘xxx‘ 通常vue开发我们网络请求会使用axios封装一个统一的方法，在main.ts里引入绑定：

import httpRequest from '@/utils/httpRequest'Vue.prototype.$http = httpRequest// 方法的使用this.$http()

在使用this（Vue）去使用的时候会出现报错提示，考虑原因是因为我们上边配置了vue.dBhunErbhZP.ts，.vue结尾的文件都当做vue去处理，而vue是没有$http方法的，最简单的办法就是直接上any了，(this as any).$http ，但是对于成型项目来说这么写改动内容太多了。可以采用如下方法(同样处理了$store的使用问题)：

在src下新建一个vue-shim.d.ts，添加下面配置：

import { Store } from 'vuex';declare module 'vue/types/vue' {  interface Vue {    '$stroe': Store,    '$http': any  }}

Property 'resetFields' does not exist on type 'Vue'

如果使用了element表单相关方法，可能会涉及到表单清空、重置之类的方法调用，通常做法可以给form一个ref，然后通过 this.$refs['xxx'].resetFields()调用。但是加入ts之后会提示错误，原因同样是这里的this被指向了vue，不存在相关方法。

解决方法使用类型断言，将ref断言成element相关内容：

import { Form as EleForm } from 'element-ui'// 方法内部const ref = this.$refs['searchForm'] as EleFormref.resetFields()

还有一种情况，就是父子组件间，在父组件内部去使用子组件的方法，同样是使用ref去调用，也会出现上边的错误提示。这个问题开始考虑是用类似的断言，把ref断言成子组件，但是方法不通，通过网上搜索也没找到合适的方法，大部分方法都是直接断言成了any，即(this.$refs['xxx'] as any).clearList() 。这么断言，问题是可以解决的，但是希望能找到更合适的方法，