A code editing method, device and medium supporting TypeScript intelligent perception

By extracting, merging, and mapping TypeScript type declaration files to generate dependency closures, the problem of excessive backend server load in existing technologies is solved, achieving efficient online TypeScript code editing and intelligent code completion.

CN117093224BActive Publication Date: 2025-12-26INSPUR GENERSOFT CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202311091534.5
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2023-08-28
Publication Date
2025-12-26
Estimated Expiration
2043-08-28

AI Technical Summary

Technical Problem

Existing technical solutions, while supporting TypeScript and enabling intelligent code editing with third-party library API awareness, increase the load on the backend server and are relatively difficult to implement.

Method used

By extracting and merging TypeScript type declaration files from commonly used third-party npm packages, dependency closures and mapping files are generated and cached on the backend server. The frontend code editor listens for user-inputted TypeScript code, parses the Abstract Syntax Tree (AST), and generates prompts.

Benefits of technology

It reduces the pressure on the backend server, lowers the implementation difficulty, and improves the efficiency of TypeScript code editing and intelligent code completion capabilities.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN117093224B_ABST
    Figure CN117093224B_ABST
Patent Text Reader

Abstract

The application discloses a code editing method and device supporting TypeScript intelligent perception and a medium. The method comprises the following steps: extracting and merging TypeScript type declaration files in preset commonly used third-party npm packages to generate dependency relationship closures and mapping files corresponding to the dependency relationship closures, and saving the mapping files to a backend server; when a user edits a code, importing the mapping files into a code editor, listening to TypeScript code input by the user, parsing corresponding AST abstract syntax trees to determine that the user introduces TypeScript type declaration files; based on the introduced TypeScript type declaration files and the mapping files, caching corresponding dependency relationship closures in the backend server into the code editor, and generating prompt information based on the AST abstract syntax trees to display the prompt information. Through the above method, the load of the backend server is reduced when online code editing is supported for TypeScript language and third-party library API intelligent perception, and the implementation is relatively simple.
Need to check novelty before this filing date? Find Prior Art

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer software development, and particularly relates to a code editing method and device supporting TypeScript intelligent perception and a medium. BACKGROUND

[0002] When writing front-end code, since JavaScript is a weakly typed language, many errors can only be found at runtime. TypeScript, as a JavaScript with type syntax, can expose these type errors at the coding stage through its static type mechanism. The type support of TypeScript also enables the IDE to better provide intelligent hints, code completion, intelligent navigation and other functions for developers, which improves the experience of writing front-end code and significantly reduces the cost of debugging errors.

[0003] More and more front-end frameworks are written based on TypeScript, and many low-code development platforms also take TypeScript as the preferred language for writing front-end code. Low-code development platforms often need to support online editing of code, so that developers can directly write code on the browser, avoiding the waste of time caused by switching between the low-code development platform and the local IDE.

[0004] To implement online code editing supporting TypeScript language and third-party library API intelligent perception, the existing technical solution is as follows: a language server supporting TypeScript language and implementing LSP (Language Server Protocol) is built on the backend; a code editor component running on the client browser continuously submits the user input to the language server on the backend, the language server parses the code and generates corresponding prompt information, and then returns the prompt information to the front end, which is finally displayed in the code editor.

[0005] Since the syntax parsing work is placed on the backend server, although more functions can be supported, the load of the backend server is also increased, and it is more difficult to implement. SUMMARY

[0006] The embodiments of the present application provide a code editing method and device supporting TypeScript intelligent perception and a medium, to solve the technical problem that the existing online code editing supporting TypeScript language and third-party library API intelligent perception increases the load of the backend server and is more difficult to implement.

[0007] In a first aspect, embodiments of the present application provide a code editing method supporting TypeScript intelligent perception, characterized in that the method comprises: extracting and merging TypeScript type declaration files in preset commonly used third-party npm packages to generate dependency relationship closures and mapping files corresponding to the dependency relationship closures, and saving the mapping files to a backend server; when a user edits code, importing the mapping files into a code editor, listening to TypeScript code input by the user, and parsing an AST abstract syntax tree corresponding to the TypeScript code to determine that the user has introduced a TypeScript type declaration file; based on the introduced TypeScript type declaration file and the mapping file, caching a corresponding dependency relationship closure in the backend server into the code editor, and generating prompt information based on the AST abstract syntax tree to display the prompt information.

[0008] In an implementation manner of the present application, the TypeScript type declaration files in the preset commonly used third-party npm packages are extracted and merged to generate dependency relationship closures and mapping files corresponding to the dependency relationship closures, and specifically includes: reading a package.json file in the commonly used third-party npm package, and obtaining a TypeScript type declaration entry file of the commonly used third-party npm package based on a typings field in the package.json file; parsing the TypeScript type declaration entry file to determine associated TypeScript type declaration files; recursively parsing the associated TypeScript type declaration files until dependency relationship closures are formed; recording and summarizing type dependencies of each commonly used third-party npm package on other npm packages to form a type dependency relationship mapping file at an npm package level.

[0009] In an implementation manner of the present application, the TypeScript type declaration entry file is parsed to determine the associated TypeScript type declaration files, and specifically includes: parsing the TypeScript type declaration entry file to generate an entry file AST abstract syntax tree; based on the entry file AST abstract syntax tree, determining whether the TypeScript type declaration entry file has introduced other TypeScript type declaration files through a relative path import or exported other TypeScript type declaration files through a relative path export.

[0010] In an implementation manner of the present application, after the TypeScript type declaration files in the preset commonly used third-party npm package are extracted and merged to generate a dependency closure and a mapping file corresponding to each dependency closure, the method further comprises: parsing each TypeScript type declaration file in the dependency closure to determine a corresponding declaration file AST abstract syntax tree; determining an import statement in the TypeScript type declaration file through the npm package name based on the declaration file AST abstract syntax tree; converting the import statement into a dynamic import and deleting the original import statement; determining whether there is a class inheritance relationship across npm packages in the TypeScript type declaration file, and in the case that there is a class inheritance relationship across npm packages, determining whether the class inheritance relationship is as a parent class; in the case that the class inheritance relationship is as a parent class, moving the corresponding import statement to the outer layer of the declare module and retaining it.

[0011] In an implementation manner of the present application, the method further comprises: determining a type exported outward in the TypeScript type declaration file based on the declaration file AST abstract syntax tree; determining whether the type exported outward is also exported by the TypeScript type declaration entry file, and in the case that the type exported outward is not exported by the TypeScript type declaration entry file, canceling the export of the type exported outward.

[0012] In an implementation manner of the present application, the method further comprises: setting an alias for a type without actual export.

[0013] In an implementation manner of the present application, the TypeScript code input by the user is parsed to obtain an AST abstract syntax tree corresponding to the TypeScript code, specifically comprising: listening to the TypeScript code input by the user, and asynchronously parsing the TypeScript code corresponding to the AST abstract syntax tree through a webworker.

[0014] In an implementation manner of the present application, based on the introduced TypeScript type declaration file and the mapping file, the corresponding dependency closure in the backend server is cached into the code editor, specifically comprising: determining whether the dependency closure corresponding to the introduced TypeScript type declaration file has been imported in the local directory; in the case that the dependency closure corresponding to the introduced TypeScript type declaration file has been imported in the local directory, directly referencing the dependency closure corresponding to the introduced TypeScript type declaration file.

[0015] In a second aspect, the embodiments of the present application also provide a code editing device supporting TypeScript intelligent perception, characterized in that the device comprises: at least one processor; and a memory in communication connection with the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to: extract and merge TypeScript type declaration files in preset commonly used third-party npm packages to generate dependency relationship closures and mapping files corresponding to the dependency relationship closures, and save the mapping files to a backend server; when a user edits code, import the mapping files into a code editor, listen to TypeScript code input by the user, parse an AST abstract syntax tree corresponding to the TypeScript code to determine that the user imports a TypeScript type declaration file; based on the imported TypeScript type declaration file and the mapping file, cache a corresponding dependency relationship closure in the backend server into the code editor, and based on the AST abstract syntax tree, generate prompt information for display.

[0016] In a third aspect, the embodiments of the present application also provide a nonvolatile computer storage medium supporting code editing of TypeScript intelligent perception, and the medium stores computer executable instructions, characterized in that the computer executable instructions are configured to: extract and merge TypeScript type declaration files in preset commonly used third-party npm packages to generate dependency relationship closures and mapping files corresponding to the dependency relationship closures, and save the mapping files to a backend server; when a user edits code, import the mapping files into a code editor, listen to TypeScript code input by the user, parse an AST abstract syntax tree corresponding to the TypeScript code to determine that the user imports a TypeScript type declaration file; based on the imported TypeScript type declaration file and the mapping file, cache a corresponding dependency relationship closure in the backend server into the code editor, and based on the AST abstract syntax tree, generate prompt information for display.

[0017] The embodiments of the present application provide a code editing method, device and medium supporting TypeScript intelligent perception, the backend has small pressure and less responsibility, and is only responsible for storing packaged type declaration files of npm packages with TypeScript types, and returns corresponding files to the frontend when receiving a request from the frontend. A code editor component running in the frontend is responsible for syntax analysis of TypeScript code, and is also responsible for requesting TypeScript type declaration files of npm packages actually referenced by a user from the backend. BRIEF DESCRIPTION OF DRAWINGS

[0018] The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiments of the application and together with the description serve to explain the application. In the drawings:

[0019] Figure 1 A support TypeScript intelligent perception code editing method flow chart provided for the embodiments of the application;

[0020] Figure 2 A support TypeScript intelligent perception code editing device internal structure schematic view provided for the embodiments of the application. DETAILED DESCRIPTION

[0021] In order to make the objects, technical solutions and advantages of the present application clearer, the technical solutions of the present application will be described below in conjunction with the embodiments of the present application and the corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of the present application, not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor fall within the scope of protection of the present application.

[0022] The embodiments of the present application provide a support TypeScript intelligent perception code editing method, device and medium, to solve the technical problems of existing support TypeScript language and online code editing of third-party library api intelligent perception, increase the load of the backend server, and the implementation is more difficult.

[0023] The technical solutions of the embodiments of the present application will be described in detail below with reference to the drawings.

[0024] Figure 1 A support TypeScript intelligent perception code editing method flow chart provided for the embodiments of the application. As shown in the figure, Figure 1 The support TypeScript intelligent perception code editing method provided by the embodiments of the present application specifically includes the following steps:

[0025] Step 101, extracting and merging the TypeScript type declaration file in the preset commonly used third-party npm package to generate a dependency relationship closure and a mapping file corresponding to each dependency relationship closure, and saving to the backend server.

[0026] First of all, it can be understood that in order to realize the support TypeScript intelligent perception code editing method, first of all, the syntax support of TypeScript needs to be realized in the front-end code editor.

[0027] Further, the TypeScript type declaration files in the preset commonly used third-party npm packages are extracted and merged to generate a dependency closure and a mapping file corresponding to each dependency closure, and saved to the backend server.

[0028] It should be noted that if the user imports the content in the third-party npm package in the TypeScript code through the import statement, the code editor should be able to import the type declaration file of the third-party library, so as to realize complete type checking and api intelligent perception function. Since there are many third-party libraries that the user may use, it is impossible to directly download all the type declaration files of the third-party libraries into the browser memory when the editor is loaded. A feasible method is to parse the current code whenever the user's input changes, focus on which third-party libraries are introduced in the code, and compare with the previous parsing result. If a new npm package is introduced, a request is sent to the backend to download the TypeScript type declaration file of the library actually used.

[0029] To implement the above method, the TypeScript type declaration files in the npm package must be packaged, because for many npm packages supporting TypeScript types, multiple TypeScript type declaration files are included, and these TypeScript type declaration files may also reference each other and may also reference TypeScript type declaration files in other npm packages. If these TypeScript type declaration files are not packaged, once a third-party package is referenced in the TypeScript code, dozens or even hundreds of TypeScript type declaration files corresponding to the third-party package need to be downloaded, a large number of http requests need to be sent, and serious performance problems will occur. Therefore, a general method for packaging TypeScript type declaration files for npm packages is needed. The TypeScript type declaration files of the commonly used third-party npm packages of the user can be packaged in advance and stored on the file server. If the user introduces a npm package that is not pre-installed, the backend can also download the npm package and package the corresponding TypeScript type declaration file temporarily.

[0030] Specifically, a package.json file in a commonly used third-party npm package is read, and a TypeScript type declaration entry file of the commonly used third-party npm package is obtained based on a typings field in the package.json file; the TypeScript type declaration entry file is parsed to determine an associated TypeScript type declaration file; the associated TypeScript type declaration file is recursively parsed until a dependency relationship closure is formed; type dependencies of each commonly used third-party npm package on other npm packages are recorded and summarized to form a type dependency relationship mapping file at an npm package level.

[0031] In an embodiment of the present application, in the case where there is no typings field in the package.json file, the address array of the TypeScript type declaration entry file corresponding to the npm package can also be recorded by manually writing a configuration file.

[0032] In an embodiment of the present application, parsing the TypeScript type declaration entry file to determine the associated TypeScript type declaration file specifically includes: parsing the TypeScript type declaration entry file to generate a corresponding entry file AST abstract syntax tree; based on the entry file AST abstract syntax tree, determining whether the TypeScript type declaration entry file has imported other TypeScript type declaration files through a relative path import or has exported other TypeScript type declaration files through a relative path export.

[0033] In an embodiment of the present application, after the TypeScript type declaration files in the preset commonly used third-party npm package are extracted and merged to generate a dependency relationship closure and a mapping file corresponding to each dependency relationship closure, the method further includes: parsing each TypeScript type declaration file in the dependency relationship closure to determine a corresponding declaration file AST abstract syntax tree; based on the declaration file AST abstract syntax tree, determining an import statement by npm package name in the TypeScript type declaration file; converting the import statement into a dynamic import and deleting the original import statement.

[0034] Further, special processing is also needed for class inheritance relationships across npm packages, because if the class inheritance relationships across npm packages cannot be identified, the use of protected properties in the parent class will be reported as an error by the code editor when coding.

[0035] Specifically, it is determined whether there is a class inheritance relationship across npm packages in the TypeScript type declaration file, and in a case where it is determined that there is a class inheritance relationship across npm packages, it is determined whether the class inheritance relationship is as a parent class; in a case where it is determined that the class inheritance relationship is as a parent class, the corresponding import statement thereof is brought out of the declare module and is retained.

[0036] In an embodiment of the present application, the method further comprises: determining, based on the declaration file AST abstract syntax tree, a type exported outwardly in the TypeScript type declaration file; determining whether the type exported outwardly is also exported by the TypeScript type declaration entry file, and in a case where the type exported outwardly is not exported by the TypeScript type declaration entry file, canceling the export of the type exported outwardly to avoid directly exporting types that are not exported or indirectly exported types.

[0037] In an embodiment of the present application, since all TypeScript type declaration files are combined together, type name duplication may occur, and therefore an alias needs to be set for types that are not actually exported.

[0038] In an embodiment of the present application, when a user writes code, if npm package A is introduced, and this npm package A depends on npm package B on the TypeScript type declaration file, and npm package B depends on npm package C on the TypeScript type declaration file, the backend can take the dependency relationship file of the npm package as a basis, and return the TypeScript type declaration file content corresponding to the npm packages A, B, and C (as the TypeScript type declaration file closure of the npm package B) to the code editor component of the front end at the same time, so that the code editor component can import the three TypeScript type declaration files of A, B, and C at the same time to give complete type hinting and syntax checking support, and therefore the present application needs to record and summarize the type dependencies of each commonly used third-party npm package on other npm packages to form a mapping file.

[0039] Step 102, when the user edits the code, import the mapping file into the code editor, and listen to the TypeScript code input by the user to parse the AST abstract syntax tree corresponding to the TypeScript code to determine the TypeScript type declaration file introduced by the user.

[0040] In an embodiment of the present application, after the dependency relationship closure and the mapping file corresponding to each dependency relationship closure are generated and saved to the backend server, if the user needs to edit the code, the code editor first requests the mapping file and stores it locally.

[0041] Further, TypeScript code listening to user input is parsed to determine whether the user has introduced a TypeScript type declaration file based on an AST abstract syntax tree corresponding to the TypeScript code.

[0042] It should be noted that the code editor component of the front end can be a popular open source editor plug-in, such as monaco-editor, codemirror, etc., or can be re-implemented according to customized requirements, as long as it can meet the requirements mentioned above.

[0043] It should be further noted that, since the syntax support for TypeScript needs to be implemented, the syntax parsing needs to consume a long time, and the webworker can be used to return the processing result asynchronously to improve efficiency and prevent page blocking.

[0044] In step 103, based on the introduced TypeScript type declaration file and the mapping file, the corresponding dependency closure in the backend server is cached into the code editor, and the AST abstract syntax tree is used to generate and display prompt information.

[0045] In one embodiment of the present application, in the case where it is determined whether the user has introduced a new TypeScript type declaration file, the corresponding dependency closure in the backend server is cached into the code editor based on the introduced TypeScript type declaration file and the mapping file.

[0046] Specifically, it is determined whether the dependency closure corresponding to the introduced TypeScript type declaration file has been imported in the local directory; in the case where it is determined that the dependency closure corresponding to the introduced TypeScript type declaration file has been imported in the local directory, the dependency closure corresponding to the introduced TypeScript type declaration file is directly referenced. In the case where it is determined that the dependency closure corresponding to the introduced TypeScript type declaration file has not been imported in the local directory, the position of the dependency closure is determined based on the mapping file and downloaded.

[0047] Further, based on the AST abstract syntax tree, the prompt information is generated and displayed.

[0048] The above is a method embodiment of the present application. Based on the same inventive concept, the present application also provides a code editing device supporting TypeScript intelligent perception, the structure of which is shown in Figure 2 .

[0049] Figure 2A code editing device supporting TypeScript intelligent perception provided by some embodiments of the present application has the internal structure as shown in the schematic diagram. Figure 2 As shown in the schematic diagram, the device comprises:

[0050] at least one processor 201;

[0051] and a memory 202 in communication connection with the at least one processor;

[0052] The memory 202 stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor 201 to enable the at least one processor 201 to:

[0053] extract and merge TypeScript type declaration files in preset commonly used third-party npm packages to generate dependency relationship closures and mapping files corresponding to the dependency relationship closures, and save them to a backend server;

[0054] When a user edits code, import the mapping files into a code editor, listen to the TypeScript code input by the user, parse the AST abstract syntax tree corresponding to the TypeScript code to determine the TypeScript type declaration files introduced by the user;

[0055] Based on the introduced TypeScript type declaration files and the mapping files, cache the corresponding dependency relationship closures in the backend server into the code editor, and based on the AST abstract syntax tree, generate and display prompt information.

[0056] Some embodiments of the present application provide a non-volatile computer storage medium supporting TypeScript intelligent code editing, which stores computer executable instructions, and the computer executable instructions are set to: Figure 1

[0057] extract and merge TypeScript type declaration files in preset commonly used third-party npm packages to generate dependency relationship closures and mapping files corresponding to the dependency relationship closures, and save them to a backend server;

[0058] When a user edits code, import the mapping files into a code editor, listen to the TypeScript code input by the user, parse the AST abstract syntax tree corresponding to the TypeScript code to determine the TypeScript type declaration files introduced by the user;

[0059] ​Based on introducing the TypeScript type declaration file and the mapping file, the corresponding dependency closure in the backend server is cached into the code editor, and the prompt information is displayed based on the AST abstract syntax tree.

[0060] The embodiments in the present application are described in a progressive manner, and the same and similar parts between the embodiments can be referred to each other. Each embodiment mainly describes the difference from other embodiments. Especially, the IoT device and medium embodiments are basically similar to the method embodiments, and thus the description is relatively simple, and the related parts can be referred to the description of the method embodiments.

[0061] The system and medium provided by the embodiments of the present application are one-to-one corresponding to the method, and thus the system and medium also have the similar beneficial technical effects as the method. Since the beneficial technical effects of the method have been described in detail above, the beneficial technical effects of the system and medium will not be described here.

[0062] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can adopt a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer usable program codes.

[0063] The present application is described with reference to flowcharts and / or block diagrams of the method, device (system), and computer program product according to the embodiments of the present application. It should be understood that each flow and / or block in the flowcharts and / or block diagrams, and the combination of the flows and / or blocks can be implemented by computer program instructions. These computer program instructions can be provided to a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to produce a machine, so that the instructions executed by the computer or other programmable data processing devices produce a device implemented in the flowcharts and / or block diagrams. Figure 1 The function of one flow or multiple flows and / or blocks Figure 1 The function of one block or multiple blocks.

[0064] These computer program instructions can also be stored in a computer readable storage medium that can guide the computer or other programmable data processing devices to work in a specific manner, so that the instructions stored in the computer readable storage medium produce a manufactured product including instruction devices that implement the flowcharts and / or block diagrams. Figure 1 The function of one flow or multiple flows and / or blocks Figure 1 The function of one block or multiple blocks.

[0065] These computer program instructions can also be loaded into computer or other programmable data processing devices to cause a series of operational steps to be performed on the computer or other programmable devices to produce a computer implemented process such that the instructions which execute on the computer or other programmable devices provide steps for implementing the functions specified in the flowchart block or blocks. Figure 1 Figure 1

[0066] In one typical configuration, the computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.

[0067] The memory can include non-persistent memory and / or volatile memory, such as random access memory (RAM) about which the computer stores information about an operating system, application software, and / or the like. Memory is an example of computer readable media.

[0068] Computer readable media includes permanent and non-permanent, movable and non-movable media that can be implemented by any method or technology for storing information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read only memory (ROM), electrically erasable programmable read only memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission medium that can be used to store information that can be accessed by a computing device. According to the definition herein, computer readable media does not include transitory media, such as modulated data signals and carrier waves.

[0069] It is also important to note that the terms "comprises", "comprising", or any other variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements recited, but can also include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without limitation, an element preceded by "comprises... a" does not, without more constraints, foreclose the existence of additional identical elements in the process, method, article, or apparatus that comprises the recited element.

[0070] ​​The above merely provides an example of the present application, and is not intended to limit the present application. Any modification, equivalent replacement, improvement, etc. within the spirit and principle of the present application should be included in the scope of claims of the present application.

Claims

1. A code editing method supporting TypeScript intelligent code completion, characterized in that, The method includes: Extract and merge TypeScript type declaration files from commonly used third-party npm packages to generate dependency closures and corresponding mapping files for each dependency closure, and save them to the backend server. When a user is editing code, the mapping file is imported into the code editor, and the user's input of TypeScript code is monitored. The AST (Abstract Syntax Tree) corresponding to the TypeScript code is parsed to determine the user's imported TypeScript type declaration file. Based on the TypeScript type declaration file and the mapping file, the corresponding dependency closures in the backend server are cached in the code editor, and based on the AST abstract syntax tree, prompt information is generated and displayed. After extracting and merging TypeScript type declaration files from commonly used third-party npm packages to generate dependency closures and corresponding mapping files for each dependency closure, the method further includes: Parse each TypeScript type declaration file in the dependency closure to determine the corresponding declaration file's Abstract Syntax Tree (AST). Based on the AST abstract syntax tree of the declaration file, determine the import statements in the TypeScript type declaration file using npm package names; Convert the import statement into a dynamic import and delete the original import statement; Determine whether a cross-npm package class inheritance relationship exists in the TypeScript type declaration file, and if a cross-npm package class inheritance relationship exists, determine whether the class inheritance relationship is used as a parent class; If the class is determined to be a parent class in the inheritance relationship, its corresponding import statement is moved to the outer layer of declaremodule and retained.

2. The code editing method supporting TypeScript intelligent code completion according to claim 1, characterized in that, The TypeScript type declaration files in commonly used third-party npm packages are extracted and merged to generate dependency closures and corresponding mapping files for each dependency closure. Specifically, this includes: Read the package.json file from the commonly used third-party npm packages, and obtain the TypeScript type declaration entry file of the commonly used third-party npm packages based on the typings field in the package.json file; The TypeScript type declaration entry file is parsed to determine the associated TypeScript type declaration file; The associated TypeScript type declaration files are recursively parsed until a dependency closure is formed; Record and summarize the type dependencies of commonly used third-party npm packages on other npm packages, forming an npm package-level type dependency mapping file.

3. The code editing method supporting TypeScript intelligent code completion according to claim 2, characterized in that, Parsing the TypeScript type declaration entry file to determine the associated TypeScript type declaration file specifically includes: The TypeScript type declaration entry file is parsed to generate the corresponding entry file Abstract Syntax Tree (AST). Based on the AST (Abstract Syntax Tree) of the entry file, determine whether the TypeScript type declaration entry file imports other TypeScript type declaration files via a relative path or exports other TypeScript type declaration files via a relative path.

4. The code editing method supporting TypeScript intelligent code completion according to claim 1, characterized in that, The method further includes: Based on the AST (Abstract Syntax Tree) of the declaration file, determine the types exported from the TypeScript type declaration file; Determine whether the exported type is also exported by the TypeScript type declaration entry file, and if the exported type is not exported by the TypeScript type declaration entry file, cancel the export of the exported type.

5. A code editing method supporting TypeScript intelligent code completion according to claim 4, characterized in that, The method further includes: Set an alias for types that are not actually exported.

6. A code editing method supporting TypeScript intelligent code completion according to claim 1, characterized in that, Listen to the TypeScript code input by the user, parse out the AST (Abstract Syntax Tree) corresponding to the TypeScript code, specifically including: Listen for the TypeScript code input by the user, and asynchronously parse the AST (Abstract Syntax Tree) corresponding to the TypeScript code through a web worker.

7. A code editing method supporting TypeScript intelligent code completion according to claim 1, characterized in that, Based on the aforementioned TypeScript type declaration file and mapping file, the corresponding dependency closures from the backend server are cached in the code editor, specifically including: In the local directory, determine whether the dependency closure corresponding to the TypeScript type declaration file has been imported. If it is confirmed that the dependency closure corresponding to the imported TypeScript type declaration file has been imported into the local directory, the dependency closure corresponding to the imported TypeScript type declaration file can be directly referenced.

8. A code editing device supporting TypeScript intelligent code completion, characterized in that, The device includes: At least one processor; And, a memory communicatively connected to the at least one processor; The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to: Extract and merge TypeScript type declaration files from commonly used third-party npm packages to generate dependency closures and corresponding mapping files for each dependency closure, and save them to the backend server. When a user is editing code, the mapping file is imported into the code editor, and the user's input of TypeScript code is monitored. The AST (Abstract Syntax Tree) corresponding to the TypeScript code is parsed to determine the user's imported TypeScript type declaration file. Based on the TypeScript type declaration file and the mapping file, the corresponding dependency closures in the backend server are cached in the code editor, and based on the AST abstract syntax tree, prompt information is generated and displayed. After extracting and merging the TypeScript type declaration files from commonly used third-party npm packages to generate dependency closures and their corresponding mapping files, it also includes: Parse each TypeScript type declaration file in the dependency closure to determine the corresponding declaration file's Abstract Syntax Tree (AST). Based on the AST abstract syntax tree of the declaration file, determine the import statements in the TypeScript type declaration file using npm package names; Convert the import statement into a dynamic import and delete the original import statement; Determine whether a cross-npm package class inheritance relationship exists in the TypeScript type declaration file, and if a cross-npm package class inheritance relationship exists, determine whether the class inheritance relationship is used as a parent class; If the class is determined to be a parent class in the inheritance relationship, its corresponding import statement is moved to the outer layer of declaremodule and retained.

9. A non-volatile computer storage medium supporting TypeScript intelligent code editing, storing computer-executable instructions, characterized in that, The computer-executable instructions are set as follows: Extract and merge TypeScript type declaration files from commonly used third-party npm packages to generate dependency closures and corresponding mapping files for each dependency closure, and save them to the backend server. When a user is editing code, the mapping file is imported into the code editor, and the user's input of TypeScript code is monitored. The AST (Abstract Syntax Tree) corresponding to the TypeScript code is parsed to determine the user's imported TypeScript type declaration file. Based on the TypeScript type declaration file and the mapping file, the corresponding dependency closures in the backend server are cached in the code editor, and based on the AST abstract syntax tree, prompt information is generated and displayed. After extracting and merging the TypeScript type declaration files from commonly used third-party npm packages to generate dependency closures and their corresponding mapping files, it also includes: Parse each TypeScript type declaration file in the dependency closure to determine the corresponding declaration file's Abstract Syntax Tree (AST). Based on the AST abstract syntax tree of the declaration file, determine the import statements in the TypeScript type declaration file using npm package names; Convert the import statement into a dynamic import and delete the original import statement; Determine whether a cross-npm package class inheritance relationship exists in the TypeScript type declaration file, and if a cross-npm package class inheritance relationship exists, determine whether the class inheritance relationship is used as a parent class; If the class is determined to be a parent class in the inheritance relationship, its corresponding import statement is moved to the outer layer of declaremodule and retained.

Citation Information

Patent Citations

  • Code editing method and device, server, user equipment and storage medium

    CN112817583A

  • Software development framework for a cloud computing platform

    US20200218634A1