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