TypeScript における SyntaxKind の調べ方

個人開発で TypeScript Graph というものを作っています。

github.com

TyeScript Graph はTSファイルの依存関係を視覚化するものです。 その機能に加えて、コードの複雑度を計測して表示できたら良いなと考え、現在色々試しています。

そのために、構文をどう解析して複雑度の計測処理を組み立て行くのかのヒントとするため、各構文要素の SyntaxKind を調べています。 良い感じに調査できるコードを書けたので残しておきます。

シンプルな解析コード

const a = false ?? true; を TypeScript Compiler API を用いて分解し、それぞれの SyntaxKind を見ていきます。

  import ts from 'typescript';
  const sourceFile = ts.createSourceFile(
    'sample.ts',
    'const a = false ?? true;',
    ts.ScriptTarget.ESNext,
  );
  const visit = (depth: number) => (node: ts.Node) => {
    console.log(
      [depth, node.getText(sourceFile), ts.SyntaxKind[node.kind]].join('|'),
    );
    ts.forEachChild(node, visit(depth + 1));
  };
  console.log('depth|code|SyntaxKind');
  console.log('--|--|--');
  visit(0)(sourceFile);

実行すると以下がコンソールに出力されます。

depth	code	SyntaxKind
0	const a = false ?? true;	SourceFile
1	const a = false ?? true;	FirstStatement
2	const a = false ?? true	VariableDeclarationList
3	a = false ?? true	VariableDeclaration
4	a	Identifier
4	false ?? true	BinaryExpression
5	false	FalseKeyword
5	??	QuestionQuestionToken
5	true	TrueKeyword
1		EndOfFileToken

※マークダウンが壊れることがあります。

その他のツール

こういうツールもありました。

astexplorer.net