資訊專欄INFORMATION COLUMN
摘要：結合上面三個函數，我們可以得到的基本使用方法獲得語法樹獲得選擇器查找節點如果語法樹和選擇器可能被多次使用，則建議使用變量將它們分別保存下來，避免重復解析導致的資源浪費和時間開銷的生成和遍歷還是比較花時間的。
前言
最近在給公司的 web 框架做一個 vscode 的輔助插件，其中有個對需要路由一些文件進行解析，實現配置文件和對應文件的關聯信息顯示和跳轉的功能。既然是對文件進行解析，很自然就會想到使用 ast 的方式來做，加上需要對 TypeScript 也進行支持，我便選擇了使用 TypeScript 自帶的 ast 工具來進行解析。
在一開始我通過 ts 的forEachChild方法遍歷和對比節點的kind屬性來確定是否是我需要處理的節點，但是之后發現這個方式有幾個缺點：
當需要查找滿足條件的子級的 ast 節點時，需要做多次比較
對滿足某一條件的多個不同類型的節點需要比較多次，編寫滿足條件麻煩
對分布在同一文件中的多個同名標識符，不能統一提取和處理
為了解決這些，我找到并引入了tsquery這個庫，它是 TypeScript 版的esquery，能夠讓我們使用 css 選擇器的方式來快速查詢滿足指定條件的 TypeScript ast 節點（也支持 JavaScript）。
比較 demo在介紹tsquery的使用方式之前，我們先來看一個對比。
對下面這段簡單的代碼：
class Animal {
constructor(public name: string) { }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
若我們要查找到Animal這個類的構造函數的所有參數并打印它們的名稱，在使用 tsquery 之前，我們會編寫這樣一段代碼：
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之后，只需要下面這么幾行簡單的代碼：
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()));
怎么樣，是不是對比強烈，讓你迫不及待得想把tsquery用到自己的項目中？
使用方式那么接下來，我就來介紹一下如何去使用tsquery：
APItsquery對象提供了下面幾個方法：
ast:
function ast(source: string, fileName?: string): SourceFile;
ast方法的功能如同其名，就是接收源代碼，返回一個解析后的ast語法樹，實際上就是調用了ts的createSourceFile方法。
parse:
function parse(selector: string, options?: TSQueryOptions): TSQuerySelectorNode;
parse方法接收一個規則字符串，這個字符串會被解析成tsquery的選擇器對象并返回，再被用于下面的match方法中。
match:
