資訊專欄INFORMATION COLUMN
摘要：結(jié)合上面三個(gè)函數(shù)，我們可以得到的基本使用方法獲得語法樹獲得選擇器查找節(jié)點(diǎn)如果語法樹和選擇器可能被多次使用，則建議使用變量將它們分別保存下來，避免重復(fù)解析導(dǎo)致的資源浪費(fèi)和時(shí)間開銷的生成和遍歷還是比較花時(shí)間的。
前言
最近在給公司的 web 框架做一個(gè) vscode 的輔助插件，其中有個(gè)對(duì)需要路由一些文件進(jìn)行解析，實(shí)現(xiàn)配置文件和對(duì)應(yīng)文件的關(guān)聯(lián)信息顯示和跳轉(zhuǎn)的功能。既然是對(duì)文件進(jìn)行解析，很自然就會(huì)想到使用 ast 的方式來做，加上需要對(duì) TypeScript 也進(jìn)行支持，我便選擇了使用 TypeScript 自帶的 ast 工具來進(jìn)行解析。
在一開始我通過 ts 的forEachChild方法遍歷和對(duì)比節(jié)點(diǎn)的kind屬性來確定是否是我需要處理的節(jié)點(diǎn)，但是之后發(fā)現(xiàn)這個(gè)方式有幾個(gè)缺點(diǎn)：
當(dāng)需要查找滿足條件的子級(jí)的 ast 節(jié)點(diǎn)時(shí)，需要做多次比較
對(duì)滿足某一條件的多個(gè)不同類型的節(jié)點(diǎn)需要比較多次，編寫滿足條件麻煩
對(duì)分布在同一文件中的多個(gè)同名標(biāo)識(shí)符，不能統(tǒng)一提取和處理
為了解決這些，我找到并引入了tsquery這個(gè)庫，它是 TypeScript 版的esquery，能夠讓我們使用 css 選擇器的方式來快速查詢滿足指定條件的 TypeScript ast 節(jié)點(diǎn)（也支持 JavaScript）。
比較 demo在介紹tsquery的使用方式之前，我們先來看一個(gè)對(duì)比。
對(duì)下面這段簡(jiǎn)單的代碼：
class Animal {
constructor(public name: string) { }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
若我們要查找到Animal這個(gè)類的構(gòu)造函數(shù)的所有參數(shù)并打印它們的名稱，在使用 tsquery 之前，我們會(huì)編寫這樣一段代碼：
import { ClassDeclaration, createSourceFile, Node, ScriptTarget, ConstructorDeclaration, SyntaxKind } from "TypeScript";
import { code } from "./code";
const sourceFile = createSourceFile("fileName", code, ScriptTarget.Latest, true);
sourceFile.forEachChild(findClass);
function findClass(node: Node): void {
if (node.kind === SyntaxKind.ClassDeclaration) {
const { name } = node as ClassDeclaration;
if (name && name.text === "Animal") {
node.forEachChild(findConstructor);
return;
}
}
node.forEachChild(findClass);
}
function findConstructor(node: Node): void {
if (node.kind === SyntaxKind.Constructor) {
printParameters(node as ConstructorDeclaration);
}
}
function printParameters(node: ConstructorDeclaration) {
node.parameters.forEach(parameter => {
console.log(parameter.name.getText());
})
}
而在我們引入了tsquery之后，只需要下面這么幾行簡(jiǎn)單的代碼：
import { tsquery } from "@phenomnomnominal/tsquery";
import * as ts from "TypeScript";
import { code } from "./code";
const parameters = tsquery.query(code, "ClassDeclaration[name.name="Animal"] > Constructor > Parameter");
parameters.forEach(param => console.log(param.name.getText()));
怎么樣，是不是對(duì)比強(qiáng)烈，讓你迫不及待得想把tsquery用到自己的項(xiàng)目中？
使用方式那么接下來，我就來介紹一下如何去使用tsquery：
APItsquery對(duì)象提供了下面幾個(gè)方法：
ast:
function ast(source: string, fileName?: string): SourceFile;
ast方法的功能如同其名，就是接收源代碼，返回一個(gè)解析后的ast語法樹，實(shí)際上就是調(diào)用了ts的createSourceFile方法。
parse:
function parse(selector: string, options?: TSQueryOptions): TSQuerySelectorNode;
parse方法接收一個(gè)規(guī)則字符串，這個(gè)字符串會(huì)被解析成tsquery的選擇器對(duì)象并返回，再被用于下面的match方法中。
match:
