vue使用ts 引入组件_Vue项目引入ts步骤(小结)_放手_前端开发者

最近考虑到老项目代码的可维护性以及稳定性，决定引入ts做规范检测。因为介绍的东西比较基础，如果介绍的不对，麻烦指正。

1. 简介

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持。网上关于ts的学习资料很多，这里不做详细介绍。可参考的学习网站：

ts.xcatliu.com/

typescript.bootcss.com/

2. 安装依赖包

cnpm i typescript ts-loader --save-dev

3. 添加tsconfig.json文件

在项目根目录下添加 tsconfig.json 文件。tsconfig.json 文件用来指定ts的编译选项。配置可参考：

https://typescript.bootcss.com/tsconfig-json.

项目工程 tsconfig.json 文件配置如下：(仅做参考)

{

"compilerOptions": {

"baseUrl": ".",

"experimentalDecorators": true,

"emitDecoratorMetadata": true,

"noEmitOnError": true,

"target": "esnext",

"module": "esnext",

"strict": true,

"allowJs": true,

"noEmit": false,

"noImplicitThis": true,

"esModuleInterop": true,

"sourceMap": true,

"moduleResolution": "

4. webpack打包配置修改

webpack.config.

4.1 入口文件后缀名由.

module.exports = {

entry: {

app: ['@babel/polyfill', './src/main.ts']

}

}

4.2 extensions 文件扩展名增加 .ts, .tsx 文件的支持

tsx针对react项目文件的支持，因为我们的工程基于开发，支持.ts文件就可以了。

module.exports = {

resolve: {

extensions: ['.js', '.

4.3 loader增加对ts文件的支持

使用ts-loader来转换ts文件。

module.exports = {

module: {

rules: [

{

test: /\.ts?$/,

loader: 'ts-loader',

exclude: /node_modules/,

options: {

appendTsSuffixTo: [/\.vue$/],

}

}

]

}

}

5. eslint 添加对ts文件的检测

5.1 安装依赖包

cnpm i @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-typescript eslint-plugin-typescript --save-dev

@typescript-eslint/parser ts文件解析器

@typescript-eslint/eslint-plugin 版本号需要与@typescript-eslint/parser的版本一致，解析器相关的配置选项

eslint-config-typescript 针对ts项目配置的eslint检测规范

5.2 .eslintrc配置文件修改

.eslintrc配置文件修改，支持对ts的文件的校验。经过多次调整，我们工程的 .eslintrc 配置文件如下：

{

"parserOptions": {

"parser": "@typescript-eslint/parser",

"project": "./tsconfig.json",

"extraFileExtensions": [".vue"],

"ecmaVersion": 2017,

"sourceType": "module",

"ecmaFeatures": {

"modules": true

}

},

"env": {

"jest": true,

"browser": true

},

"settings": {

"import/resolver": {

"

注意”extends”: [“plugin:vue/base”], 只能选择vue/base，不能用vue/recommend。不然会有规则冲突。

6. 项目文件转换

项目配置好后，开始对老代码进行改造，来支持ts的语法检测。

6.1 增加ts声明文件目录

项目中总会依赖一些开发的一些组件，这些文件需要补充声明文件，声明文件就是将多个声明语句放在一起，这些声明文件可统一放到一个目录里。这个目录需要包含在 tsconfig.json 文件的include里。

ms工程在根目录下新建 types 目录，目前包含 vue.d.ts, request.d.ts, dialog.d.ts, base.d.ts 等文件。

6.2 全局vue.d.ts声明文件

需要在ts环境下识别vue文件，需要添加 vue.d.ts 全局声明文件，例子如下：

import VueRouter, { Route } from 'vue-router';

import RequestAxios from './request';

declare module '*.vue' {

import Vue from 'vue';

export default Vue;

}

declare module 'vue/types/vue' {

interface Vue {

$router: VueRouter;

$route: Route;

$request: RequestAxios;

....

}

}

6.2 vue文件的改造

vue文件的改造，只改造js部分，代码大致修改如下：

import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component({

components: {

....

}

})

export default class MyComponent extends Vue {

// prop

@Prop({ default: () => {} }) readonly pageInfo !: any

// data

private showAnimation : boolean = true;

// watch

@Watch('showModuleIndex')

onShowModuleIndexChanged(newValue: any) {

this.$emit('input', newValue);

}

// computed

get list() {

const { page, cityList } = this;

return page.cityList.split(',').map(

cityId => cityList.find(c => String(c.id) === cityId)

);

}

// mounted

private mounted() :void {

this.initEditor();

}

// methods

private initEditor() :void {

....

}

}

6.3 js文件的改造

将文件后缀名更改为.ts，然后加上类型就可以了。

7. 踩坑总结

大部分都是eslint校验时的报错，按照提示修复就可以了。

“vue/

“plugin:vue/base”与”plugin:vue/recommend”的区别

…

8. 总结

项目改造过程中，大部分时间都是在查配置兼容问题，配置这块解决了，改造起来速度还是挺快的。虽然前期会有一些改造成本，但是长远来看，还是有意义的。毕竟很多代码类型上的问题在开发阶段就可以暴露，不用等到运行时才发现了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持