CN111538485B - 基于TypeScript的web应用开发方法和系统 - Google Patents
基于TypeScript的web应用开发方法和系统 Download PDFInfo
- Publication number
- CN111538485B CN111538485B CN202010225685.5A CN202010225685A CN111538485B CN 111538485 B CN111538485 B CN 111538485B CN 202010225685 A CN202010225685 A CN 202010225685A CN 111538485 B CN111538485 B CN 111538485B
- Authority
- CN
- China
- Prior art keywords
- typescript
- file
- web application
- request
- interface
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明提出了一种基于TypeScript的web应用开发方法和系统，所述方法包括：在终端设备上构建web应用的开发环境，并在web应用的开发环境中安装TypeScript模块；通过TypeScript模块定义类型接口文件，所述类型接口文件是由所述终端设备与服务器共同约定形成的；引用预定义的类型接口文件约束请求参数，生成请求接口文件；基于所述请求接口文件实现请求接口，并结合预定义的类型接口文件生成请求类文件；由各功能模块引入所述请求类文件来调用所述请求接口，实现向所述服务器请求访问web应用数据。本发明基于TypeScript的特性能够在编译时提前发现文件存在的隐患；本发明还通过预定义类型接口、请求接口、请求类，供web应用进行调用，从而降低开发人员开发web应用的难度，提升开发效率。
Description
技术领域
本发明涉及web应用开发技术领域，尤其涉及一种基于TypeScript的web应用开发方法和系统。
背景技术
随着前端技术的不断发展，从移动端到服务端以及机器学习领域，JavaScript几乎无处不在，如此广阔的应用领域，自然对语言的安全性、健壮性和可维护性有更高的要求。
在传统的web应用开发过程中，由于JavaScript语言本身的弱类型属性，当应用需要请求服务端数据时，需要根据服务端提供的接口文档，逐一核对请求类型、参数类型，请求路径等信息，如果服务端接口发生变化或参数类型发生变化，应用需要对应修改请求，而有可能应用在不同的地方请求了同样的接口，此情况下会导致应用的修改点较多，或遗漏，而此类问题无法在web应用开发过程中被及时发现，只有在执行时才会发现，进而将给开发人员修改web应用增加了难度，影响web应用的整体开发效率。
发明内容
为了解决上述问题，有必要提供一种基于TypeScript的web应用开发方法和系统。
本发明第一方面提出一种基于TypeScript的web应用开发方法，所述方法包括以下步骤：
在终端设备上构建web应用的开发环境，并在web应用的开发环境中安装TypeScript模块；
通过TypeScript模块定义类型接口文件，所述类型接口文件是由所述终端设备与服务器共同约定形成的；
引用预定义的类型接口文件约束请求参数，生成请求接口文件；
基于所述请求接口文件实现请求接口，并结合预定义的类型接口文件生成请求类文件；
由各功能模块引入所述请求类文件来调用所述请求接口，实现向所述服务器请求访问web应用数据。
进一步的，在结合预定义的类型接口文件生成请求类文件之后，所述方法还包括：
当功能模块需要进行请求接口的调用时，引入所述请求类文件；
基于所述请求类文件创建实例对象以供各功能模块调用。
进一步的，在基于所述请求类文件创建实例对象之后，所述方法还包括：
将所述实例对象挂载到全局，以供整个web应用的开发环境调用。
进一步的，在基于所述请求类文件创建实例对象以供各功能模块调用之后，所述方法还包括：
向web应用的开发环境输入tsc命令；
所述TypeScript模块根据所述tsc命令进行编译TypeScript文件，并将所述TypeScript文件编译为可执行工程。
进一步的，在所述TypeScript模块根据所述tsc命令进行编译文件之后，所述方法还包括：
如果编译成功，则验证所述TypeScript文件合规；
如果编译失败，则证明所述TypeScript文件不合规。
进一步的，在将所述TypeScript文件编译为可执行工程之后，所述方法还包括：
由相应的浏览器执行所述可执行工程，并调用所述请求接口来向所述服务器请求访问web应用数据。
本发明第二方面还提出一种基于TypeScript的web应用开发系统，用于实现上述的基于TypeScript的web应用开发方法，所述系统运行在终端设备上，并借助所述终端设备构建web应用的开发环境，在web应用的开发环境中安装有TypeScript模块；
所述TypeScript模块用于定义类型接口文件，所述类型接口文件是由所述终端设备与服务器共同约定形成的；引用预定义的类型接口文件约束请求参数，生成请求接口文件；基于所述请求接口文件实现请求接口，并结合预定义的类型接口文件生成请求类文件；由各功能模块引入所述请求类文件来调用所述请求接口，以实现向所述服务器请求访问web应用数据。
进一步的，在web应用开发过程中，将各功能模块引入所述请求类文件，并基于所述请求类文件创建实例对象以供各功能模块调用。
进一步的，在web应用开发过程中，基于所述请求类文件创建实例对象，将所述实例对象挂载到全局，以供整个web应用的开发环境调用。
进一步的，所述TypeScript模块能够根据所述tsc命令进行编译TypeScript文件，并将所述TypeScript文件编译为可执行工程。
本发明提供一种基于TypeScript的web应用开发方法和系统。TypeScript是一个编译到纯JS的有类型定义的JS超集，在JavaScript的基础上添加类型系统、加强了面向对象的思想以及模块系统，能够在编译时提前发现存在的隐患。同时，本发明通过TypeScript的类型系统及模块系统，及其增强的面向对象思想，解决现有web应用请求数据的问题。本发明还通过预定义数据参数类型、请求接口、请求类，供web应用进行调用，降低了开发人员开发web应用的难度，提升了开发效率。
本发明的附加方面和优点将在下面的描述部分中变得明显，或通过本发明的实践了解到。
附图说明
本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：
图1示出了本发明一种基于TypeScript的web应用开发方法的流程图。
具体实施方式
为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。
图1示出了本发明一种基于TypeScript的web应用开发方法的流程图。
如图1所示，本发明第一方面提出一种基于TypeScript的web应用开发方法，所述方法包括以下步骤：
在终端设备上构建web应用的开发环境，并在web应用的开发环境中安装TypeScript模块；
通过TypeScript模块定义类型接口文件，所述类型接口文件是由所述终端设备与服务器共同约定形成的；
引用预定义的类型接口文件约束请求参数，生成请求接口文件；
基于所述请求接口文件实现请求接口，并结合预定义的类型接口文件生成请求类文件；
由各功能模块引入所述请求类文件来调用所述请求接口，实现向所述服务器请求访问web应用数据。
具体的，本发明可以通过npm install typescript –g 命令在web应用的开发环境中全局安装TypeScript模块，也可以在工程中独立安装TypeScript模块。所述TypeScript模块用于编译TypeScript文件。
在web应用中定义类型接口，TypeScript引入了接口的概念，接口的作用就是为这些类型命名，并为自己编写的代码或第三方代码定义契约，实现所述类型接口的统一化。
例如，在定义对服务器的请求接口类型时，可以基于服务器的接口请求参数来定义，表1示出了服务器的接口请求参数。
表1：
可以结合上述服务器的接口请求参数来定义type.ts文件，定义请求数据类型，最后通过export导出。
具体的，可以定义所述请求接口文件interface.ts，并导出。可以定义请求类文件HttpRequest.ts，实现请求接口，导出供功能模块调用。
根据本发明的实施例，在结合预定义的类型接口文件生成请求类文件之后，所述方法还包括：
当功能模块需要进行请求接口的调用时，引入所述请求类文件；
基于所述请求类文件创建实例对象以供各功能模块调用。
进一步的，在基于所述请求类文件创建实例对象之后，所述方法还包括：
将所述实例对象挂载到全局，以供整个web应用的开发环境调用。
具体的，web应用的开发过程中，当需要进行接口调用时，需引入请求类，并对请求类进行实例化，创建实例对象以进行调用，也可将实例对象挂载到全局，供整个web应用调用。例如：需要在index.ts中进行数据请求时，可以定义请求方法clientRequestMethod，以供index.ts调用。
根据本发明的实施例，在基于所述请求类文件创建实例对象以供各功能模块调用之后，所述方法还包括：
向web应用的开发环境输入tsc命令；
所述TypeScript模块根据所述tsc命令进行编译TypeScript文件，并将所述TypeScript文件编译为可执行工程。
可以理解，TypeScript文件后缀为.ts，浏览器无法识别.ts文件，需要经过tscxxx.ts命令编译为浏览器可执行的.js文件，方可在web应用中引入调用。需要说明的是，若选用webpack或其他构建工具来打包编译时，添加相应配置编译即可。
进一步的，在所述TypeScript模块根据所述tsc命令进行编译文件之后，所述方法还包括：
如果编译成功，则验证所述TypeScript文件合规；
如果编译失败，则证明所述TypeScript文件不合规。
可以理解，通过编译可以实现对TypeScript文件进行合规性评价，一旦编译失败，可以在web应用开发过程中提前发现TypeScript文件存在的隐患，便于开发人员及时进行修改。
根据本发明的实施例，在将所述TypeScript文件编译为可执行工程之后，所述方法还包括：
由相应的浏览器执行所述可执行工程，并调用所述请求接口来向所述服务器请求访问web应用数据。
本发明第二方面还提出一种基于TypeScript的web应用开发系统，用于实现上述的基于TypeScript的web应用开发方法，所述系统运行在终端设备上，并借助所述终端设备构建web应用的开发环境，在web应用的开发环境中安装有TypeScript模块；
所述TypeScript模块用于定义类型接口文件，所述类型接口文件是由所述终端设备与服务器共同约定形成的；引用预定义的类型接口文件约束请求参数，生成请求接口文件；基于所述请求接口文件实现请求接口，并结合预定义的类型接口文件生成请求类文件；由各功能模块引入所述请求类文件来调用所述请求接口，以实现向所述服务器请求访问web应用数据。
进一步的，在web应用开发过程中，将各功能模块引入所述请求类文件，并基于所述请求类文件创建实例对象以供各功能模块调用。
进一步的，在web应用开发过程中，基于所述请求类文件创建实例对象，将所述实例对象挂载到全局，以供整个web应用的开发环境调用。
进一步的，所述TypeScript模块能够根据所述tsc命令进行编译TypeScript文件，并将所述TypeScript文件编译为可执行工程。
进一步的，在所述TypeScript模块根据所述tsc命令进行文件编译过程中，如果编译成功，则验证所述TypeScript文件合规，可以继续进行后续web应用开发；如果编译失败，则证明所述TypeScript文件不合规，需要对先前定义的TypeScript文件进行检查、修改。
进一步的，在将后缀为.ts的TypeScript文件编译为可执行工程之后，可以由相应的浏览器执行所述可执行工程（.js文件），并调用所述请求接口来向所述服务器请求访问web应用数据。
本发明提供一种基于TypeScript的web应用开发方法和系统。TypeScript是一个编译到纯JS的有类型定义的JS超集，在JavaScript的基础上添加类型系统、加强了面向对象的思想以及模块系统，能够在编译时提前发现存在的隐患。同时，本发明通过TypeScript的类型系统及模块系统，及其增强的面向对象思想，解决现有web应用请求数据的问题。本发明还通过预定义数据参数类型、请求接口、请求类，供web应用进行调用，降低了开发人员开发web应用的难度，提升了开发效率。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。
Claims (10)
1.一种基于TypeScript的web应用开发方法，其特征在于，所述方法包括以下步骤：
在终端设备上构建web应用的开发环境，并在web应用的开发环境中安装TypeScript模块；
通过TypeScript模块定义类型接口文件，所述类型接口文件是由所述终端设备与服务器共同约定形成的；
引用预定义的类型接口文件约束请求参数，生成请求接口文件；
基于所述请求接口文件实现请求接口，并结合预定义的类型接口文件生成请求类文件；
由各功能模块引入所述请求类文件来调用所述请求接口，实现向所述服务器请求访问web应用数据。
2.根据权利要求1所述的一种基于TypeScript的web应用开发方法，其特征在于，在结合预定义的类型接口文件生成请求类文件之后，所述方法还包括：
当功能模块需要进行请求接口的调用时，引入所述请求类文件；
基于所述请求类文件创建实例对象以供各功能模块调用。
3.根据权利要求2所述的一种基于TypeScript的web应用开发方法，其特征在于，在基于所述请求类文件创建实例对象之后，所述方法还包括：
将所述实例对象挂载到全局，以供整个web应用的开发环境调用。
4.根据权利要求2所述的一种基于TypeScript的web应用开发方法，其特征在于，在基于所述请求类文件创建实例对象以供各功能模块调用之后，所述方法还包括：
向web应用的开发环境输入tsc命令；
所述TypeScript模块根据所述tsc命令进行编译TypeScript文件，并将所述TypeScript文件编译为可执行工程。
5.根据权利要求4所述的一种基于TypeScript的web应用开发方法，其特征在于，在所述TypeScript模块根据所述tsc命令进行编译TypeScript文件之后，所述方法还包括：
如果编译成功，则验证所述TypeScript文件合规；
如果编译失败，则证明所述TypeScript文件不合规。
6.根据权利要求4所述的一种基于TypeScript的web应用开发方法，其特征在于，在将所述TypeScript文件编译为可执行工程之后，所述方法还包括：
由相应的浏览器执行所述可执行工程，并调用所述请求接口来向所述服务器请求访问web应用数据。
7.一种基于TypeScript的web应用开发系统，用于实现上述权利要求1至6任意一项所述的基于TypeScript的web应用开发方法，其特征在于，所述系统运行在终端设备上，并借助所述终端设备构建web应用的开发环境，在web应用的开发环境中安装有TypeScript模块；
所述TypeScript模块用于定义类型接口文件，所述类型接口文件是由所述终端设备与服务器共同约定形成的；引用预定义的类型接口文件约束请求参数，生成请求接口文件；基于所述请求接口文件实现请求接口，并结合预定义的类型接口文件生成请求类文件；由各功能模块引入所述请求类文件来调用所述请求接口，以实现向所述服务器请求访问web应用数据。
8.根据权利要求7所述的一种基于TypeScript的web应用开发系统，其特征在于，在web应用开发过程中，将各功能模块引入所述请求类文件，并基于所述请求类文件创建实例对象以供各功能模块调用。
9.根据权利要求7所述的一种基于TypeScript的web应用开发系统，其特征在于，在web应用开发过程中，基于所述请求类文件创建实例对象，将所述实例对象挂载到全局，以供整个web应用的开发环境调用。
10.根据权利要求7所述的一种基于TypeScript的web应用开发系统，其特征在于，所述TypeScript模块能够根据tsc命令进行编译TypeScript文件，并将所述TypeScript文件编译为可执行工程。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010225685.5A CN111538485B (zh) | 2020-03-26 | 2020-03-26 | 基于TypeScript的web应用开发方法和系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010225685.5A CN111538485B (zh) | 2020-03-26 | 2020-03-26 | 基于TypeScript的web应用开发方法和系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111538485A CN111538485A (zh) | 2020-08-14 |
| CN111538485B true CN111538485B (zh) | 2022-04-05 |
Family
ID=71978432
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010225685.5A Active CN111538485B (zh) | 2020-03-26 | 2020-03-26 | 基于TypeScript的web应用开发方法和系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111538485B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112148302A (zh) * | 2020-09-23 | 2020-12-29 | 北京自如信息科技有限公司 | 一种接口文档生成方法、装置、设备及可读存储介质 |
| CN113031935B (zh) * | 2021-04-15 | 2023-10-27 | 杭州芯翼科技有限公司 | 一种根据TypeScript类型生成Mongoose模型的方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105573733A (zh) * | 2014-10-16 | 2016-05-11 | 腾讯科技（深圳）有限公司 | 浏览器与web前端通信的方法、web前端及系统 |
| CN107888656A (zh) * | 2017-10-09 | 2018-04-06 | 北京京东尚科信息技术有限公司 | 服务端接口的调用方法和调用装置 |
| EP3367316A1 (en) * | 2017-02-21 | 2018-08-29 | SourceCode Technology Holdings, Inc. | Collaborative design systems, apparatuses, and methods |
| CN110244940A (zh) * | 2019-06-12 | 2019-09-17 | 四川长虹电器股份有限公司 | 优化web应用系统开发的方法及web前端项目结构 |
| CN110413526A (zh) * | 2019-07-30 | 2019-11-05 | 北京达佳互联信息技术有限公司 | 一种请求处理方法、装置、服务器及设备 |
-
2020
- 2020-03-26 CN CN202010225685.5A patent/CN111538485B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105573733A (zh) * | 2014-10-16 | 2016-05-11 | 腾讯科技（深圳）有限公司 | 浏览器与web前端通信的方法、web前端及系统 |
| EP3367316A1 (en) * | 2017-02-21 | 2018-08-29 | SourceCode Technology Holdings, Inc. | Collaborative design systems, apparatuses, and methods |
| CN107888656A (zh) * | 2017-10-09 | 2018-04-06 | 北京京东尚科信息技术有限公司 | 服务端接口的调用方法和调用装置 |
| CN110244940A (zh) * | 2019-06-12 | 2019-09-17 | 四川长虹电器股份有限公司 | 优化web应用系统开发的方法及web前端项目结构 |
| CN110413526A (zh) * | 2019-07-30 | 2019-11-05 | 北京达佳互联信息技术有限公司 | 一种请求处理方法、装置、服务器及设备 |
Non-Patent Citations (2)
| Title |
|---|
| Hybrid Application Development and Implementation;Priyam Mishra;《 2019 6th International Conference on Computing for Sustainable Global Development (INDIACom)》;20200213;第102-107页 * |
| 基于Node.js的Web应用框架研究与实现;徐浪;《中国优秀硕士学位论文全文数据库 信息科技辑》;20200215(第2期);第I138-386页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111538485A (zh) | 2020-08-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107832619B (zh) | Android平台下应用程序漏洞自动化挖掘系统及方法 | |
| CN111538485B (zh) | 基于TypeScript的web应用开发方法和系统 | |
| CN107526625B (zh) | 一种基于字节码检查的Java智能合约安全检测方法 | |
| CN105022630B (zh) | 一种组件管理系统及组件管理方法 | |
| CN111736954B (zh) | 多智能合约虚拟机实现方法、多智能合约虚拟机及系统 | |
| CN109739478A (zh) | 前端项目自动化构建方法、装置、存储介质及电子设备 | |
| CN105718289A (zh) | 一种组件关系建立方法及其设备 | |
| US20060101435A1 (en) | Detection of code patterns | |
| CN103543991A (zh) | 一种扩展浏览器功能的方法及浏览器系统 | |
| US5551040A (en) | Methods and apparatus for specifying the contexts of names in callback-style programming | |
| CN113407362A (zh) | 基于车载Android系统SOA架构SOMEIP通信中间层实现方法及系统 | |
| CN104133676A (zh) | 一种基于脚本的功能执行方法和设备 | |
| CN110162963B (zh) | 一种识别过权应用程序的方法 | |
| CN102750177B (zh) | 一种使用编译器的脚本实现方法 | |
| CN114371851A (zh) | 一种基于编译的网络设备自动化实现方法 | |
| CN104156247A (zh) | 一种应用升级方法及装置 | |
| CN112988175A (zh) | 跨平台应用安装包的生成方法、装置、介质及电子设备 | |
| CN116339696A (zh) | 一种可扩展自动生成跨平台多语言接口的系统及方法 | |
| CN116342283A (zh) | 可信智能合约实现方法、装置、设备及可读存储介质 | |
| CN116149671A (zh) | 用于翻译智能合约语言的方法和装置、电子设备 | |
| CN109189591A (zh) | 用于调用应用组件的方法和装置 | |
| CN112346778B (zh) | 一种Java程序编译时自动生成字节码的优化方法 | |
| CN116301836A (zh) | 一种基于国产自主可控环境的嵌入式开发系统 | |
| Yacoub et al. | A model for classifying component interfaces | |
| CN113282378A (zh) | 基于环境隔离子系统的车载系统 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |