CN117406970A - 一种组件转换方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提供一种组件转换方法、装置、电子设备及存储介质，用于改善Vue框架的兼容性较差的问题。该方法包括：将类组件中的TypeScript代码解析成抽象语法树；从抽象语法树中提取出选项对象集合；将选项对象集合组合成选项式组件。在上述方案的实现过程中，通过将类组件中的TypeScript代码解析成抽象语法树，然后从抽象语法树中提取出选项对象集合，并将选项对象集合组合成选项式组件，从而让编程人员能够使用类组件以选项式组件的方式来进行前端代码开发，从而有效地提高了Vue框架的兼容性。

Description

一种组件转换方法、装置、电子设备及存储介质

技术领域

本申请涉及前端开发和Web开发的技术领域，具体而言，涉及一种组件转换方法、装置、电子设备及存储介质。

背景技术

目前，编程开发人员在使用前端组件化框架(例如Vue框架)开发的过程中，通常是采用一种组件来进行开发，例如：有些习惯了函数式编程的开发人员喜欢使用Vue框架中的函数式组件来进行前端代码开发，而有些习惯了原生Vue框架的选项式组件的开发人员，仍然使用选项式组件来进行前端代码开发。在具体的实践过程中发现，习惯于面向对象语音开发的编程人员很难使用类(Class)组件在Vue框架中进行前端代码开发，导致Vue框架的兼容性较差。

发明内容

本申请实施例的目的在于提供一种组件转换方法、装置、电子设备及存储介质，用于改善Vue框架的兼容性较差的问题。

本申请实施例提供了一种组件转换方法，包括：将类组件中的TypeScript代码解析成抽象语法树；从抽象语法树中提取出选项对象集合；将选项对象集合组合成选项式组件。在上述方案的实现过程中，通过将类组件中的TypeScript代码解析成抽象语法树，然后从抽象语法树中提取出选项对象集合，并将选项对象集合组合成选项式组件，从而让编程人员能够使用类组件以选项式组件的方式来进行前端代码开发，从而有效地提高了Vue框架的兼容性。

可选地，在本申请实施例中，将类组件中的TypeScript代码解析成抽象语法树，包括：将类组件中的TypeScript代码转换成JavaScript代码；将JavaScript代码解析成抽象语法树。在上述方案的实现过程中，由于类组件中的TypeScript代码不能被编译器直接执行，将TypeScript代码转换成JavaScript代码之后，能够有效改善类组件中的TypeScript代码的兼容性，从而提高了Vue框架的兼容性。

可选地，在本申请实施例中，从抽象语法树中提取出选项对象集合，包括：从抽象语法树中查找到多个节点；分别从多个节点的每个节点中提取出选项对象集合。在上述方案的实现过程中，通过从抽象语法树中查找到多个节点，并分别从多个节点的每个节点中提取出选项对象集合，提高了操作类组件中的TypeScript代码的颗粒度，从而提高了Vue框架的兼容性。

可选地，在本申请实施例中，多个节点，包括：ClassProperty节点；分别从多个节点的每个节点中提取出选项对象集合，包括：从ClassProperty节点中提取出props选项对象、data选项对象、computed选项对象、model选项对象、provide选项对象和inject选项对象。

可选地，在本申请实施例中，多个节点，包括：ClassMethod节点；分别从多个节点的每个节点中提取出选项对象集合，包括：从ClassMethod节点中提取出watch选项对象、compued选项对象和methods选项对象。

可选地，在本申请实施例中，多个节点，包括：ClassDeclaration节点；分别从多个节点的每个节点中提取出选项对象集合，包括：从ClassDeclaration节点中提取出mixins选项对象。

可选地，在本申请实施例中，将选项对象集合组合成选项式组件，包括：从选项对象集合中的method选项对象筛选出生命周期函数对象；根据选项对象集合和生命周期函数对象组合成选项式组件。在上述方案的实现过程中，通过根据选项对象集合和该选项对象集合中的method选项对象筛选出的生命周期函数对象组合成选项式组件，提高了操作类组件中的TypeScript代码的颗粒度，从而提高了Vue框架的兼容性。

本申请实施例还提供了一种组件转换装置，包括：组件代码解析模块，用于将类组件中的TypeScript代码解析成抽象语法树；选项对象提取模块，用于从抽象语法树中提取出选项对象集合；选项组件组合模块，用于将选项对象集合组合成选项式组件。

可选地，在本申请实施例中，组件代码解析模块，包括：代码转换子模块，用于将类组件中的TypeScript代码转换成JavaScript代码；代码解析子模块，用于将JavaScript代码解析成抽象语法树。

可选地，在本申请实施例中，选项对象提取模块，包括：节点查找子模块，用于从抽象语法树中查找到多个节点；节点提取子模块，用于分别从多个节点的每个节点中提取出选项对象集合。

可选地，在本申请实施例中，多个节点，包括：ClassProperty节点；节点提取子模块，包括：第一节点提取单元，用于从ClassProperty节点中提取出props选项对象、data选项对象、computed选项对象、model选项对象、provide选项对象和inject选项对象。

可选地，在本申请实施例中，多个节点，包括：ClassMethod节点；节点提取子模块，包括：第二节点提取单元，用于从ClassMethod节点中提取出watch选项对象、compued选项对象和methods选项对象。

可选地，在本申请实施例中，多个节点，包括：ClassDeclaration节点；节点提取子模块，包括：第三节点提取单元，用于从ClassDeclaration节点中提取出mixins选项对象。

可选地，在本申请实施例中，选项组件组合模块，包括：对象筛选子模块，用于从选项对象集合中的method选项对象筛选出生命周期函数对象；对象组合子模块，用于根据选项对象集合和生命周期函数对象组合成选项式组件。

本申请实施例还提供了一种电子设备，包括：处理器和存储器，存储器存储有处理器可执行的机器可读指令，机器可读指令被处理器执行时执行如上面描述的方法。

本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如上面描述的方法。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请实施例中的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出的本申请实施例提供的组件转换方法的流程示意图；

图2示出的本申请实施例提供的服务器执行组件转换方法的流程示意图；

图3示出的本申请实施例提供的组件转换装置的结构示意图；

图4示出的本申请实施例提供的电子设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，应当理解，本申请实施例中的附图仅起到说明和描述的目的，并不用于限定本申请实施例的保护范围。另外，应当理解，示意性的附图并未按实物比例绘制。本申请实施例中使用的流程图示出了根据本申请实施例的一些实施例实现的操作。应该理解，流程图的操作可以不按顺序实现，没有逻辑的上下文关系的步骤可以反转顺序或者同时实施。此外，本领域技术人员在本申请实施例内容的指引下，可以向流程图添加一个或多个其他操作，也可以从流程图中移除一个或多个操作。

另外，所描述的实施例仅仅是本申请实施例的一部分，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请实施例的详细描述并非旨在限制要求保护的本申请实施例的范围，而是仅仅表示本申请实施例的选定实施例。

可以理解的是，本申请实施例中的“第一”“第二”用于区别类似的对象。本领域技术人员可以理解“第一”“第二”等字样并不对数量和执行次序进行限定，并且“第一”“第二”等字样也并不限定一定不同。在本申请实施例的描述中，术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。术语“多个”指的是两个以上(包括两个)，同理，“多组”指的是两组以上(包括两组)。

在介绍本申请实施例提供的组件转换方法之前，先介绍本申请实施例中所涉及的一些概念：

Vue，又被称为Vue.js，是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue.js是一款流行的JavaScript前端渐进式框架，旨在更好地组织与简化Web开发。

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript代码，TypeScripti可以在任何浏览器、任何计算机和任何操作系统上运行。

需要说明的是，本申请实施例提供的组件转换方法可以被电子设备执行，这里的电子设备是指具有执行计算机程序功能的设备终端或者服务器，设备终端例如：智能手机、个人电脑、平板电脑、个人数字助理或者移动上网设备等。服务器是指通过网络提供计算服务的设备，服务器例如：x86服务器以及非x86服务器，非x86服务器包括：大型机、小型机和UNIX服务器。

下面介绍该组件转换方法适用的应用场景，这里的应用场景包括但不限于：目前的Vue框架虽然提供了函数式组件和选项式组件两种，然而，许多开发人员是习惯于面向对象语音开发的，针对这种情况可以使用该组件转换方法将开发人员编写的类组件转换为选项式组件，从而让编程人员能够使用类组件以选项式组件的方式来进行前端代码开发，有效地提高了Vue框架的兼容性等。

请参见图1示出的本申请实施例提供的组件转换方法的流程示意图；本申请实施例提供了一种组件转换方法，包括：

步骤S110：将类组件中的TypeScript代码解析成抽象语法树。

类组件(Class Component)是指以面向对象思想编写的类形式的Vue框架中的组件。

抽象语法树(Abstract Syntax Tree，AST)，或简称语法树(Syntax tree)，是源代码语法结构的一种抽象表示，抽象语法树以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构，语法是“抽象”的原因是这里的语法并不会表示出真实语法中出现的每个细节。

步骤S120：从抽象语法树中提取出选项对象集合。

选项对象(Options Object)，是指从抽象语法树的节点中提取出的对象，该选项对象是可以用于组合成选项式组件的对象。上述的选项对象集合是指至少一个选项对象构成的集合。

步骤S130：将选项对象集合组合成选项式组件。

可以理解的是，在具体实践过程中，可以根据选项对象集合和该选项对象集合中的method选项对象筛选出的生命周期函数对象组合成上述的选项式组件。

在上述方案的实现过程中，通过将类组件中的TypeScript代码解析成抽象语法树，然后从抽象语法树中提取出选项对象集合，并将选项对象集合组合成选项式组件，从而让编程人员能够使用类组件以选项式组件的方式来进行前端代码开发，从而有效地提高了Vue框架的兼容性。

作为上述步骤S110的一种可选实施方式，将类组件中的TypeScript代码解析成抽象语法树的实施方式可以包括：

步骤S111：将类组件中的TypeScript代码转换成JavaScript代码。

上述步骤S111的实施方式例如：使用esbuild工具将类组件中的TypeScript代码转换成JavaScript代码，获得转换后的JavaScript代码。其中，esbuild工具是一个用于快速将TypeScript代码转换成JavaScript代码，并构建JavaScript应用程序的打包器和压缩器的工具。在具体的实践过程中，还可以将转换后的JavaScript代码以多种格式(例如CommonJS格式或者ES6模块格式)输出。

步骤S112：将JavaScript代码解析成抽象语法树。

上述步骤S112的实施方式例如：使用Babel工具中内置的@babel/parser模块来将JavaScript代码解析成抽象语法树(AST)；其中，Babel工具是一个现代化JavaScript编译器工具，可以有效地将JavaScript代码解析成抽象语法树(AST)。

作为上述步骤S120的一种可选实施方式，从抽象语法树中提取出选项对象集合的实施方式可以包括：

步骤S121：从抽象语法树中查找到多个节点。

可以理解的是，在抽象语法树中查找多个节点的过程中，可以采用Babel工具中内置的@babel/traverse模块来遍历查找抽象语法树中的节点，在查找到节点之后，可以从

步骤S122：分别从多个节点的每个节点中提取出选项对象集合。

作为上述步骤S122的一种可选实施方式，上述的多个节点可以包括：ClassProperty节点；上述的分别从多个节点的每个节点中提取出选项对象集合的实施方式可以包括：

步骤S122a：从ClassProperty节点中提取出props选项对象、data选项对象、computed选项对象、model选项对象、provide选项对象和inject选项对象。

上述步骤S122a的实施方式例如：遍历所有的ClassProperty节点，并从ClassProperty节点中提取出props选项对象、data选项对象、computed选项对象、model选项对象、provide选项对象和inject选项对象的过程如下：

第一，提取data选项对象，例如：判断查找当前ClassProperty节点的所有的子节点是否包括Decorator子节点，如果当前ClassProperty节点的所有的子节点不包括Decorator子节点，则提取当前ClassProperty节点的属性key和value，将key和value转换成一个data选项对象。

第二，提取computed选项对象，例如：如果当前ClassProperty节点的所有的子节点包括Decorator节点，则遍历所有的Decorator节点，查找出当前Decorator节点的函数名；如果当前Decorator节点的函数名是Ref，则提取当前ClassProperty节点的属性key以及Decorator节点的expression属性的第一个参数节点，将Decorator节点的expression属性的第一个参数节点转换成一个computed选项对象。

第三，提取props选项对象，例如：判断当前Decorator节点的函数名是否是Prop，如果当前Decorator节点的函数名是Prop，则提取当前ClassProperty节点的属性key和Decorator节点的expression属性的第一个参数节点，将Decorator节点的expression属性的第一个参数节点转换成一个props选项对象。

第三，提取computed选项对象和props选项对象，例如：判断当前Decorator节点的函数名是否是PropSync，如果当前Decorator节点的函数名是PropSync，则提取当前ClassProperty节点的属性key，以及Decorator节点的expression属性的第一个参数节点和第二个参数节点，分别将Decorator节点的expression属性的第一个参数节点和第二个参数节点转换成一个props选项对象和一个computed选项对象。

第四，提取model选项对象、computed选项对象和props选项对象，例如：判断当前Decorator节点的函数名是否是Model，如果当前Decorator节点的函数名是Model，则提取当前ClassProperty节点的属性key、Decorator节点的expression属性的第一个参数节点和第二个参数节点，分别将Decorator节点的expression属性的第一个参数节点和第二个参数节点转换成一个props选项对象和一个model选项对象。判断当前Decorator节点的函数名是否是ModelSync，如果当前Decorator节点的函数名是ModelSync，则提取当前ClassProperty节点的属性key以及Decorator节点expression属性的第一、第二和第三个参数节点，分别将Decorator节点的expression属性的第一、第二和第三个参数节点转换成一个props选项对象、一个model选项对象和一个computed选项对象。

第五，提取provide选项对象和data选项对象，例如：判断当前Decorator节点的函数名是否是Provide，如果当前Decorator节点的函数名是Provide，则提取当前ClassProperty节点的属性key、value以及Decorator节点expression属性的第一个参数节点，分别将当前ClassProperty节点的属性key和value以及Decorator节点expression属性的第一个参数节点转换成一个provide选项对象和一个data选项对象。

第六，提取Inject选项对象、props选项对象和computed选项对象，例如：判断当前Decorator节点的函数名是否是Inject，如果当前Decorator节点的函数名是Inject，则提取当前ClassProperty节点的属性key、Decorator节点的expression属性的第一个参数节点，将Decorator节点的expression属性的第一个参数节点转换成一个inject选项对象；判断当前Decorator节点的函数名是否是VModel，如果当前Decorator节点的函数名是VModel，则提取当前ClassProperty节点的属性key和Decorator节点expression属性的第二个参数节点，分别将当前ClassProperty节点的属性key和Decorator节点expression属性的第二个参数节点转换成一个props选项对象和computed选项对象。

作为上述步骤S122的一种可选实施方式，上述的多个节点可以包括：ClassMethod节点；上述的分别从多个节点的每个节点中提取出选项对象集合的实施方式可以包括：

步骤S122b：从ClassMethod节点中提取出watch选项对象、compued选项对象和methods选项对象。

上述步骤S122c的实施方式例如：遍历所有的ClassMethod节点，从所有的ClassMethod节点中查找当前ClassMethod节点的kind属性值和所有的Decorator子节点；判断ClassMethod节点的kind属性值是否满足预设条件，该预设条件为kind属性值不是字符串set或get并且Decorator节点不存在；若ClassMethod节点的kind属性值满足预设条件，则提取当前ClassMethod节点的属性key和Value，则将属性key和Value转换成一个methods选项对象；判断ClassMethod节点的kind属性值是否满足预设条件，该预设条件为kind属性值是字符串set或者get并且Decorator节点不存在；若lassMethod节点的kind属性值不满足预设条件，则提取当前ClassMethod节点的属性key、属性kind和ClassMethod节点，将属性key、属性kind和ClassMethod节点转换成一个computed选项对象。如果存在Decorator节点，遍历所有的Decorator节点，查找出当前Decorator节点的函数名；判断当前Decorator节点的函数名是否是Watch，如果是，则提取当前ClassMethod节点的属性key、Decorator节点expression属性的第一、第二个参数节点和ClassMethod节点，将其转换成一个watch选项对象和一个methods选项对象；判断当前Decorator节点的函数名是否是Emit，如果是，则提取当前ClassMethod节点的属性keyDecorator节点expression属性的第一个参数节点和ClassMethod节点，将其转换成一个methods选项对象。

作为上述步骤S122的一种可选实施方式，上述的多个节点可以包括：ClassDeclaration节点；上述的分别从多个节点的每个节点中提取出选项对象集合的实施方式可以包括：

步骤S122c：从ClassDeclaration节点中提取出mixins选项对象。

上述步骤S122c的实施方式例如：先在ClassDeclaration节点中查找Decorator子节点，判断Decorator节点的expression属性是否是一个Identifier类型节点，若Decorator节点的expression属性是一个Identifier类型节点，则当前类组件没有mixins选项对象。若Decorator节点的expression属性不是一个Identifier类型节点，则判断Decorator节点的expression属性是否是一个CallExpression类型节点，若Decorator节点的expression属性是一个CallExpression类型节点，则将Decorator节点的expression属性的第一个参数节点对应的代码确定为上述的mixins选项对象的代码。

作为上述步骤S130的一种可选实施方式，将选项对象集合组合成选项式组件的实施方式可以包括：

步骤S131：从选项对象集合中的method选项对象筛选出生命周期函数对象。

步骤S132：根据选项对象集合和生命周期函数对象组合成选项式组件。

上述步骤S131至步骤S132的实施方式例如：从选项对象集合中的methods选项对象中过滤Vue生命周期函数选项对象，根据上述提取出的选项对象集合和Vue生命周期函数对象组合成选项式组件。其中，上述提取出的选项对象集合包括但不限于：props选项对象、data选项对象、computed选项对象、model选项对象、provide选项对象、inject选项对象、mixins选项对象、watch选项对象、compued选项对象和methods选项对象。

可选地，在将选项对象集合组合成选项式组件之后，还可以使用Prettier工具对组合成选项式组件进行代码美化，从而获得美化后的选项式组件；其中，Prettier工具是一款通过格式化代码来提升代码可读性和可维护性的代码格式化工具，该Prettier工具可以用于美化多种编程语言，包括JavaScript、TypeScript、CSS、HTML、GraphQL等等。或者，还可以使用Element-UI框架这种图形用户界面(Graphical User Interface，GUI)来展示美化后的选项式组件。

请参见图2示出的本申请实施例提供的服务器执行组件转换方法的流程示意图；可选地，在实践过程中的开发人员还可以使用Express.js框架在Node.js中搭建一个用于组件转换的平台服务(PlatformServices)，从而通过服务器实现组件转换方法的业务逻辑，那么此处服务器执行组件转换方法的实施方式可以包括：

步骤S210：接收终端设备发送的类组件。

上述步骤S210的实施方式例如：服务器通过传输控制协议(TransmissionControl Protocol，TCP)或者用户数据报协议(User Datagram Protocol，UDP)接收终端设备发送的类组件。使用Express.js框架在Node.js中搭建一个用于组件转换的平台服务(PlatformServices)，并使用该平台服务来将类组件中的TypeScript代码解析成抽象语法树，从抽象语法树中提取出选项对象集合，将选项对象集合组合成选项式组件。其中，Express.js是一个基于Node.js平台的Web应用开发框架，提供了丰富的HTTP请求响应API和中间件，使得Web应用开发变得更加简单和快捷。Node.js是能够在服务器端运行JavaScript的开放源代码、跨平台的JavaScript运行环境；Node.js采用Google开发的V8引擎运行代码，其中的V8引擎是由C++语言编写的，Node.js使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。

步骤S220：将类组件中的TypeScript代码解析成抽象语法树。

步骤S230：从抽象语法树中提取出选项对象集合。

步骤S240：将选项对象集合组合成选项式组件。

其中，该步骤S220至步骤S240的实施原理和实施方式与步骤S110至步骤S130的实施原理和实施方式是类似的，因此，这里不再说明其实施原理和实施方式，可以参考对步骤S110至步骤S130的描述。

步骤S250：向终端设备发送选项式组件，以使终端设备运行选项式组件。

上述步骤S250的实施方式例如：服务器通过超文本传输协议(Hyper TextTransfer Protocol，HTTP)或者超文本传输安全协议(Hyper Text Transfer ProtocolSecure，HTTPS)向终端设备发送选项式组件，以使终端设备运行选项式组件。

请参见图3示出的本申请实施例提供的组件转换装置的结构示意图；本申请实施例提供了一种组件转换装置300，包括：

组件代码解析模块310，用于将类组件中的TypeScript代码解析成抽象语法树。

选项对象提取模块320，用于从抽象语法树中提取出选项对象集合。

选项组件组合模块330，用于将选项对象集合组合成选项式组件。

作为一种可选实施方式，组件代码解析模块，包括：

代码转换子模块，用于将类组件中的TypeScript代码转换成JavaScript代码。

代码解析子模块，用于将JavaScript代码解析成抽象语法树。

作为一种可选实施方式，选项对象提取模块，包括：

节点查找子模块，用于从抽象语法树中查找到多个节点。

节点提取子模块，用于分别从多个节点的每个节点中提取出选项对象集合。

作为一种可选实施方式，多个节点，包括：ClassProperty节点；节点提取子模块，包括：

第一节点提取单元，用于从ClassProperty节点中提取出props选项对象、data选项对象、computed选项对象、model选项对象、provide选项对象和inject选项对象。

作为一种可选实施方式，多个节点，包括：ClassMethod节点；节点提取子模块，包括：

第二节点提取单元，用于从ClassMethod节点中提取出watch选项对象、compued选项对象和methods选项对象。

作为一种可选实施方式，多个节点，包括：ClassDeclaration节点；节点提取子模块，包括：

第三节点提取单元，用于从ClassDeclaration节点中提取出mixins选项对象。

作为一种可选实施方式，选项组件组合模块，包括：

对象筛选子模块，用于从选项对象集合中的method选项对象筛选出生命周期函数对象。

对象组合子模块，用于根据选项对象集合和生命周期函数对象组合成选项式组件。

应理解的是，该装置与上述的组件转换方法实施例对应，能够执行上述方法实施例涉及的各个步骤，该装置具体的功能可以参见上文中的描述，此处适当省略详细描述。该装置包括至少一个能以软件或固件(firmware)的形式存储于存储器中或固化在装置的操作系统(operating system，OS)中的软件功能模块。

请参见图4示出的本申请实施例提供的电子设备的结构示意图。本申请实施例提供的一种电子设备400，包括：处理器410和存储器420，存储器420存储有处理器410可执行的机器可读指令，机器可读指令被处理器410执行时执行如上的方法。

本申请实施例还提供了一种计算机可读存储介质430，该计算机可读存储介质430上存储有计算机程序，该计算机程序被处理器410运行时执行如上的方法。其中，计算机可读存储介质430可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(Static Random Access Memory,简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory,简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read Only Memory,简称EPROM)，可编程只读存储器(Programmable Read-Only Memory,简称PROM)，只读存储器(Read-Only Memory,简称ROM)，磁存储器，快闪存储器，磁盘或光盘。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请实施例提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其他的方式实现。以上所描述的装置实施例仅是示意性的，例如，附图中的流程图和框图显示了根据本申请实施例的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以和附图中所标注的发生顺序不同。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这主要根据所涉及的功能而定。

另外，在本申请实施例中的各个实施例的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。此外，在本说明书的描述中，参考术语“一个实施例”“一些实施例”“示例”“具体示例”“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请实施例的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

以上的描述，仅为本申请实施例的可选实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请实施例的保护范围之内。

Claims (10)

1.一种组件转换方法，其特征在于，包括：

将类组件中的TypeScript代码解析成抽象语法树；

从所述抽象语法树中提取出选项对象集合；

将所述选项对象集合组合成选项式组件。

2.根据权利要求1所述的方法，其特征在于，所述将类组件中的TypeScript代码解析成抽象语法树，包括：

将所述类组件中的TypeScript代码转换成JavaScript代码；

将所述JavaScript代码解析成抽象语法树。

3.根据权利要求1所述的方法，其特征在于，所述从所述抽象语法树中提取出选项对象集合，包括：

从所述抽象语法树中查找到多个节点；

分别从所述多个节点的每个节点中提取出选项对象集合。

4.根据权利要求3所述的方法，其特征在于，所述多个节点，包括：ClassProperty节点；所述分别从所述多个节点的每个节点中提取出选项对象集合，包括：

从所述ClassProperty节点中提取出props选项对象、data选项对象、computed选项对象、model选项对象、provide选项对象和inject选项对象。

5.根据权利要求3所述的方法，其特征在于，所述多个节点，包括：ClassMethod节点；所述分别从所述多个节点的每个节点中提取出选项对象集合，包括：

从所述ClassMethod节点中提取出watch选项对象、compued选项对象和methods选项对象。

6.根据权利要求3所述的方法，其特征在于，所述多个节点，包括：ClassDeclaration节点；所述分别从所述多个节点的每个节点中提取出选项对象集合，包括：

从所述ClassDeclaration节点中提取出mixins选项对象。

7.根据权利要求1-6任一所述的方法，其特征在于，所述将所述选项对象集合组合成选项式组件，包括：

从所述选项对象集合中的method选项对象筛选出生命周期函数对象；

根据所述选项对象集合和所述生命周期函数对象组合成选项式组件。

8.一种组件转换装置，其特征在于，包括：

组件代码解析模块，用于将类组件中的TypeScript代码解析成抽象语法树；

选项对象提取模块，用于从所述抽象语法树中提取出选项对象集合；

选项组件组合模块，用于将所述选项对象集合组合成选项式组件。

9.一种电子设备，其特征在于，包括：处理器和存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述机器可读指令被所述处理器执行时执行如权利要求1至7任一所述的方法。

10.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至7任一所述的方法。