vue接入ts

时间:2022-05-23 木风622 人气:0

下面将以项目搭建的方式完成改文章叙述：

项目基础架构是通过cli搭建的，主要是vue（2.5.16）+ webpack（3.6.0）+ element-ui（2.8.2），整体项目还简单用了vuex，eslint等。

一、依赖记

项目从基础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.js
const 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.d.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 EleForm
ref.resetFields()

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

加载全部内容