vue接入ts基本方法

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

项目基础架构是通过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() 。这么断言，问题是可以解决的，但是希望能找到更合适的方法，

到此这篇关于vue接入ts基本方法的文章就介绍到这了,更多相关vue接入ts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论