TypeScript Academy · Pelajaran

Menelusuri AST dengan Visitor

Telusuri node pohon sintaksis untuk menganalisis struktur kode.

Menelusuri AST dengan Visitor adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa Itu AST?

TypeScript mengurai kode sumber menjadi Abstract Syntax Tree (AST) — pohon simpul yang merepresentasikan konstruksi bahasa seperti variabel, fungsi, dan ekspresi.

import ts from "typescript";
const sf = ts.createSourceFile(
  "example.ts",
  "const x = 1;",
  ts.ScriptTarget.Latest
);

Jenis Simpul

Setiap simpul AST memiliki properti kind (nilai enumerasi ts.SyntaxKind) yang menunjukkan hal yang direpresentasikannya.

import ts from "typescript";
// Common kinds:
// ts.SyntaxKind.VariableDeclaration
// ts.SyntaxKind.FunctionDeclaration
// ts.SyntaxKind.Identifier

Mengunjungi dengan forEachChild

ts.forEachChild(node, visitor) memanggil pengunjung Anda untuk setiap anak langsung dari suatu simpul. Gunakan rekursi untuk menelusuri seluruh pohon.

function visit(node: ts.Node) {
  if (ts.isFunctionDeclaration(node)) {
    console.log("Function:", node.name?.text);
  }
  ts.forEachChild(node, visit);
}
visit(sourceFile);

Fungsi Penjaga Tipe

TypeScript menyediakan fungsi penjaga tipe seperti ts.isVariableDeclaration dan ts.isFunctionDeclaration untuk mempersempit tipe simpul dengan aman.

ts.forEachChild(sf, node => {
  if (ts.isClassDeclaration(node)) {
    console.log("Class:", node.name?.getText());
  }
  if (ts.isInterfaceDeclaration(node)) {
    console.log("Interface:", node.name.getText());
  }
});

Mendapatkan Teks Simpul

Gunakan node.getText(sourceFile) untuk mengambil teks sumber persis dari suatu simpul, atau node.getFullText() termasuk trivia.

ts.forEachChild(sf, node => {
  if (ts.isIdentifier(node)) {
    console.log("Id:", node.text);
  }
});

Posisi Simpul

Setiap simpul memiliki posisi pos dan end berupa offset karakter yang dapat Anda gunakan untuk menemukan simpul dalam sumber.

ts.forEachChild(sf, node => {
  console.log(node.kind, "at", node.pos, "-", node.end);
});

Menelusuri dengan Pembantu Rekursif

Salah satu utilitas yang umum adalah fungsi walk yang secara rekursif menerapkan pengunjung ke setiap simpul dalam pohon.

function walk(node: ts.Node, visitor: (n: ts.Node) => void) {
  visitor(node);
  ts.forEachChild(node, child => walk(child, visitor));
}

Menemukan Semua Pemanggilan Fungsi

Gunakan penelusuran rekursif untuk menemukan semua ekspresi pemanggilan dalam berkas sumber—berguna untuk mendeteksi penggunaan API.

walk(sf, node => {
  if (ts.isCallExpression(node)) {
    const expr = node.expression.getText(sf);
    console.log("Call:", expr);
  }
});

Mengakses Simpul Induk

Simpul AST secara bawaan tidak memiliki penunjuk ke induknya. Panggil ts.setParent(sourceFile) atau gunakan program.getSourceFile, yang secara otomatis menetapkan induk untuk program.

// For manually created source files:
// (ts as any).setParents(sf);

Menggunakan TypeChecker dengan Simpul

Gabungkan penelusuran AST dengan pemeriksa tipe untuk menentukan tipe TypeScript dari simpul ekspresi apa pun.

const checker = program.getTypeChecker();
walk(sf, node => {
  if (ts.isExpression(node)) {
    const type = checker.getTypeAtLocation(node);
    console.log(checker.typeToString(type));
  }
});

Ringkasan: Penelusuran AST

Telusuri AST TypeScript dengan forEachChild dan fungsi penjaga tipe. Gabungkan dengan pemeriksa tipe untuk membangun alat analisis statis dan pembuatan kode yang andal.

Pemeriksaan Singkat

Fungsi apa yang mengunjungi simpul anak secara rekursif dalam AST TypeScript?

Yang Anda Pelajari

Penelusuran AST menggunakan ts.forEachChild bersama fungsi penjaga tipe untuk menelusuri dan memeriksa setiap simpul dalam berkas TypeScript. Jika digabungkan dengan pemeriksa tipe, teknik ini memungkinkan pembuatan alat pemeriksa kode, penganalisis kode, dan alat pemfaktoran ulang.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menelusuri AST dengan Visitor” gratis?

Ya — teks lengkap “Menelusuri AST dengan Visitor” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menelusuri AST dengan Visitor”?

Telusuri node pohon sintaksis untuk menganalisis struktur kode. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Menelusuri AST dengan Visitor” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy