简介
在进行前端开发时，TypeScript 是一种强类型语言，可以提高代码的可读性和可维护性，在大型项目中也能有效地减少代码的错误和调试时间。而 @typescript-eslint/typescript-estree 是一个 npm 包，能够做到将 TypeScript 代码转化为 ESTree 包含的 AST（Abstract Syntax Tree）树。
安装及使用
首先，我们需要确保 npm 环境已经初始化，如果不是，请使用以下命令进行初始化：
npm init
接着，我们可以使用以下命令在项目中安装 @typescript-eslint/typescript-estree:
npm install @typescript-eslint/typescript-estree
之后，我们可以在项目的 TypeScript 文件中使用 @typescript-eslint/typescript-estree 包，将 TypeScript 代码转化为 ESTree AST 树。代码如下：
-- -------------------- ---- ------- ------ - ----- - ---- --------------------------------------- ----- ---- - - -------- ------ ------- -- -------- ------ - ------ - - -- - -- ----- --- - ------------ -----------------
参数解析
在 @typescript-eslint/typescript-estree 包中，parse() 函数有两个参数：代码字符串和配置对象。配置对象可以配置 @typescript-eslint/parser 的解析器选项和 @typescript-eslint/typescript-estree 的转换器选项。例如：
-- -------------------- ---- ------- ------ - ----- - ---- --------------------------------------- ----- ---- - - -------- ------ ------- -- -------- ------ - ------ - - -- - -- ----- --- - ----------- - ----------- --------- ------------ ----- ---------------- ------------------------- -------- ------------------------- ------ ----- ---- ----- ------- ----- --------- ----- --- -----------------
参数配置如下：
- sourceType: String, 指定代码的来源，可选择 "module" 或 "script"
- ecmaVersion: Number, 指定代码的 ECMAScript 版本号，最高支持 2022 版本
- tsconfigRootDir: String, 指定 tsconfig.json 的根目录
- project: String, 指定 TypeScript 项目的 tsconfig.json 文件
- range: Boolean, 指定是否支持范围（range）属性。默认值为 false
- loc: Boolean, 指定是否支持 loc 属性。默认值为 false
- tokens: Boolean, 指定是否支持 tokens 属性。默认值为 false
- comments: Boolean, 指定是否支持 comments 属性。默认值为 false
AST 树解析
在将 TypeScript 代码转化为 ESTree AST 树后，我们可以通过解析 AST 树来对代码进行分析、操作、优化等操作。以下是针对上面示例代码的 AST 树：
-- -------------------- ---- -------
-
------- ----------
------------- ---------
-------- -
--
--
--
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
------- -
-
------- ----------------------
----- -
------- -------------
------- ------
-------- -
--
--
--
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
-
--
--------- -
-
------- -------------
------- ----
-------- -
---
--
--
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
----------------- -
------- -----------------
-------- -
---
--
--
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
----------------- -
------- ------------------
-------- -
---
--
--
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
-
-
-
--
-
------- -------------
------- ----
-------- -
---
--
--
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
----------------- -
------- -----------------
-------- -
---
--
--
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
----------------- -
------- ------------------
-------- -
---
--
--
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
-
-
-
-
--
------- -
------- -----------------
-------- -
---
--
--
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- -
-
--
------- -
-
------- ------------------
-------- -
---
--
--
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
----------- -
------- -------------------
-------- -
---
--
--
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
------- -
------- -------------
------- ----
-------- -
---
--
--
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
-
--
----------- ----
-------- -
------- -------------
------- ----
-------- -
---
--
--
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
-
-
-
-
-
--
-------- -
--
--
--
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
------------- -
------- -----------------
-------- -
---
--
--
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
----------------- -
------- ------------------
-------- -
---
--
--
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
-
-
-
-
--
----------------- ----
-我们可以通过对 AST 树进行逐层解析，获取代码的详细信息，并进行相关操作，例如：
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
----- ---- - -
-------- ------ ------- -- -------- ------ -
------ - - --
-
--
----- --- - ------------
-- -----
---------------------------------
-- ------
-----------------------------------------------------------------------
-- -------
--------------------------------------------------------
-- ----
-------- ---------- ---- -
-----------------------
-- ----------- -
--- ---- ----- -- ---------- -
------------
-
-
-
----------总结
通过使用 @typescript-eslint/typescript-estree 包，我们可以将 TypeScript 代码转化成 ESTree AST 树，利用 AST 树的结构分析、修改代码实现一些特定的需求。同时，@typescript-eslint/typescript-estree 包的安装及参数配置也十分简单，可以帮助我们更快地对 TypeScript 代码进行分析。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/99333