详解Vue2.5+迁移至Typescript指南

2023-08-18 08:06:04 75

为什么要迁移至Typescript

Javascript本身是动态弱类型的语言，这样的特点导致了Javascript代码中充斥着很多UncaughtTypeError的报错，给开发调试和线上代码稳定都带来了不小的负面影响。

而Typescript提供了静态类型检查，使很多类型错误在编写时就已经发现，不会带到测试阶段。

同时，Javascript不定义model就可以使用一个对象，有人喜欢这样的灵活性，的确这样的语法在model不复杂的时候可以快速的开发出需要的功能，但一旦model庞大，找一个需要的属性值都不知道从何找起。而在Typescript中，我们需要使用TS中的interfacetype等方式先定义出model，才可以调用其属性值，所以Typescript极大的提高了代码的可读性。

可行性

因为TypeScript是JavaScript的超集，TypeScript不会阻止JavaScript的运行，即使存在类型错误也不例外，这能让你的JavaScript逐步迁移至TypeScript。所以可以慢慢地做迁移，一次迁移一个模块，选择一个模块，重命名.js文件到.ts，在代码中添加类型注释。当你完成这个模块时，选择下一个模块。

如何将已有的Vue项目迁移至Typescript

安装依赖

Vue官方提供了一个库Vue-class-component，用于让我们使用Ts的类声明方式来编写vue组件代码。Vue-property-decorator则是在Vue-class-component的基础上提供了装饰器的方式来编写代码。首先我们需要在package.json中引入这两个依赖。

我的项目是基于vue-cli@3.X创建的，还需要在项目中引入@vue/cli-plugin-typescripttypescript两个依赖来完成Typescript的编译。

配置tsconfig.json

在项目根目录新建tsconfig.json,并引入以下代码

{
"compilerOptions":{
"target":"esnext",
"module":"esnext",
"strict":true,
"jsx":"preserve",
"importHelpers":true,
"moduleResolution":"node",
"experimentalDecorators":true,
"esModuleInterop":true,
"allowSyntheticDefaultImports":true,
"sourceMap":true,
"baseUrl":".",
"noFallthroughCasesInSwitch":true,
"noImplicitAny":true,
"noImplicitReturns":true,
"noImplicitThis":true,
"types":[
"webpack-env"
],
"paths":{
"@/*":[
"./app/common/*"
],
"_app/*":[
"./app/*"
],
"_c/*":[
"./app/common/components/*"
],
"api/*":[
"./app/service/*"
],
"assets/*":[
"./app/assets/*"
]
},
"lib":[
"esnext",
"dom",
"dom.iterable",
"scripthost"
],
},
"include":[//在此出填写你的项目中需要按照typescript编译的文件路径
"app/**/*.ts",
"app/**/*.tsx",
"app/**/*.d.ts",
"app/**/*.vue",
],
"exclude":[
"node_modules"
]
}

特别需要注意的是，现在的vue项目中大多使用了webpack的alias来解析路径,在tsconfig.json中需要配置path属性，让typescript同样认识在webpack中配置的路径别名。

添加全局声明文件

因为在ts文件中是无法识别vue文件的，所以需要在项目根目录新建shims-vue.d.ts文件，添加以下代码，来让ts识别vue文件。

importVuefrom'vue';

declaremodule'*.vue'{
exportdefaultVue;
}

由下而上的迁移

因为是迁移已经存在的项目，不建议开始就把main.js重命名为main.ts,对于绝大多数Vue项目，main.js引入了太多的依赖，我们应该首先从依赖着手，自下而上的迁移Typescript。对于项目中一些偏底层，甚至是框架维护者所提供的库函数，我们不关心其实现逻辑，所以没有必要将其改写为ts文件，只需要给其加声明文件供我们的业务代码调用即可。

在我的项目中，service层的逻辑非常简单，仅仅是传参数调用接口，没有添加任何其他的逻辑，逻辑如此简单其实没有什么必要改写为ts文件，所以我为service层的文件编写声明文件，来为调用service层的代码提供类型声明。

声明文件编写方法

一个js文件如下

//service.js
importaxiosfrom'@/libs/api.request'
exportdefault{
/**
*创建账户
*@param{Object}data
*@param{String}data.accountTypeoptinal
*@param{String}data.username
*@param{String}data.password
*@param{String}data.genderX|F|M
*@param{String}data.email
*@param{Number}data.level
*/

createAccount(data){
returnaxios.request({
url:`/api/account/createUser`,
method:'post',
data:data
}).then((res)=>[res,null]).catch((err)=>[null,err]);
},
}

可以看到，在使用typescript之前，对于一个函数的参数和返回值等信息的提示是通过jsdoc实现的，能够在调用时确定参数类型及名称，但jsdoc毕竟只是注释，并不能提供类型校验，所以在这里我们为其编写声明文件，编写后的声明文件如下

//service.d.ts
interfacecreateAccountParams{
accountType?:string,
username:string,
password:string,
gender:'X'|'F'|'M',
email:string,
level?:number
}
interfacecreateAccountReturn{
userId:string,
}
exportinterfaceService{
createAccount(data:createAccountParams):createAccountReturn
}

这样一个service层的接口文件的声明文件就编写完成了，为了获得Typescript和vscode提供的类型提示和校验，在main.js中将service.js导出的实例绑定在了Vue原型上，使得我们可以在vue组件中通过vm.$service方便的访问service实例。但是Typescript并不知道Vue实例上有什么属性，这时需要我们在之前添加的shims-vue.d.ts文件中添加几行代码。

importVuefrom'vue';
importServicefrom"pathToService/service.d.ts";

declaremodule'*.vue'{
exportdefaultVue;
}

declaremodule"vue/types/vue"{
interfaceVue{
$service:Service
}
}

得力于typescript中提供的模块补充功能，我们可以在node_modules/vue/types/vue中补充我们需要在Vue上提供的属性。

改写Vue文件

我们需要将原来的vue文件改写成使用vue-property-decorator编写的方式。


import{Component,Vue}from"vue-property-decorator";

@Component
exportdefaultclassMyComponentextendsVue{
//声明data
form:{
accountType?:string,
username:string,
password:string,
gender:'X'|'F'|'M',
email:string,
level?:number
}={
username:'',
password:'',
gender:'X',
email:''
};

//声明methods
asyncsubmit():void{
//调用上面的service接口
const[res,err]=awaitthis.$service.createAccount(this.form);
}
}

至此一个Vue项目迁移至Typescript的过程就已经完成了，剩下的工作就是将代码中其他的文件一步步由js迁移到typescript中。

把方法绑定到Vue实例下

除了我们之前提到过的将自己编写的service挂载到vue实例上，大家一定清楚在vue项目中，我们经常会调用this.$refsthis.$routerthis.$store等等，typescript也会检查这些属性是否被绑定在了vue实例上，那么我们并没有在类型系统中声明这些值，按道理应该报Property'$refs'doesnotexistontype[your_component_name]
真相是vuevue-routervuex都已经给我们声明了相应的类型，我们可以cd./node_modules/vue/types/目录中去查看
截取少量代码如下所示:

exportinterfaceVue{
readonly$el:Element;
readonly$options:ComponentOptions;
readonly$parent:Vue;
readonly$root:Vue;
readonly$children:Vue[];
readonly$refs:{[key:string]:Vue|Element|Vue[]|Element[]};
readonly$slots:{[key:string]:VNode[]|undefined};
readonly$scopedSlots:{[key:string]:NormalizedScopedSlot|undefined};
readonly$isServer:boolean;
readonly$data:Record;
readonly$props:Record;
readonly$ssrContext:any;
readonly$vnode:VNode;
readonly$attrs:Record;
readonly$listeners:Record;
}

只要正常的在依赖中安装了vue-routervuex就已经通过模块补充的方式将类型添加到了vue实例上。

在一些项目中，vue-routervuex这些依赖不是通过安装在依赖中引入的，而是通过index.html引入的cdn资源文件，这样在开发过程中我们就无法获取其类型。

这个时候我们可以通过安装@types依赖的方式将类型系统补充到项目中,如npminstall@types/jquery--save-dev。

不幸的是vue-router和vuex的types包已经废弃了，只能通过手动去github上下载对应版本的vue-routervuex将types文件引入到项目中，你可以像我一样在项目中新建一个types目录，引入需要的类型声明文件。

这样就可以直接在vue实例上访问到$store$router等属性了。

同理当你想要引入其他的组件库上的一些类型文件时，也是这样的方式。

一些需要注意的问题

在vue开发过程中我们会使用this.$refs去访问某一个具体实例的方法，但是这在ts中是访问不到的常见的，比如要想要使用form组件中的validate方法，我们需要给其加上类型断言
this.$refs.form.validate()变为(this.$refs.formasVue&{validate:Function}).validate()
来告诉编译器this.$refs.form上有validate方法。

因为类型断言前提条件是是当S类型是T类型的子集，或者T类型是S类型的子集时，S能被成功断言成T，所以需要在类型断言时合并Vue类型。

同时也可以通过vue-property-decorator提供给我们的装饰器一劳永逸的将该refs添加到computed属性上

import{Vue,Component,Ref}from'vue-property-decorator'
importFormfrom'@/path/to/another-component.vue'
@Component
exportdefaultclassYourComponentextendsVue{
@Ref()readonlyform!:Form
}

等同于

exportdefault{
computed(){
form:{
cache:false,
get(){
returnthis.$refs.formasForm
}
},
}
}

这样我们就可以通过this.form.validate()来做表单校验了

新手容易遇到的一些问题

疑问1：interface和type有什么区别？

type可以声明基本类型别名，联合类型，元组等类型

eg.typea=string;是被允许的，

interface会自动声明合并

interfaceperson{
gender:string
age:number
}
interfaceperson{
name:string
}

疑问2:错误Property'hideContent'hasnoinitializerandisnotdefinitelyassignedintheconstructor.

strictPropertyInitialization属性会在strict设置为true时自动被设置为true。

但这个属性并不合理，它要求每个实例的属性都有初始值，我们在tsconfig将其设置为false就好了。

疑问3:赋值兼容性

interfaceperson{
name:string
age:number
}
interfacestudent{
name:string
age:number
stuid:string
}
letperson:person={
name:'name',
age:1
}
letstudent:student={
name:'name',
age:1,
stuid:'stuid'
};

person=student//这样是可以的
student=person//这样不允许

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

详解Vue2.5+迁移至Typescript指南

热门推荐

随机推荐