TypeScript Academy · Pelajaran

Membangun Alat Lint Sederhana

Buat alat diagnostik khusus menggunakan API compiler.

Membangun Alat Lint Sederhana adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Alat Pemeriksa Kode?

Alat pemeriksa kode menganalisis kode sumber untuk melaporkan masalah gaya atau kebenaran. Dengan menggunakan API kompilator TypeScript, Anda dapat membangun aturan yang memahami tipe, sesuatu yang tidak dapat dicapai oleh pengaya ESLint secara mandiri.

// Goal: warn when console.log is called in TypeScript files

Penyiapan Proyek

Buat skrip Node.js yang memuat program TypeScript, menelusuri AST, dan melaporkan diagnostik.

import ts from "typescript";
import path from "path";

const files = ["src/index.ts"];
const program = ts.createProgram(files, { strict: true });

Mendefinisikan Aturan

Aturan adalah fungsi yang menerima simpul AST dan mengembalikan pesan diagnostik opsional jika aturan tersebut dilanggar.

type Diagnostic = { file: string; line: number; message: string };

function noConsoleLog(node: ts.Node, sf: ts.SourceFile): Diagnostic | null {
  if (!ts.isCallExpression(node)) return null;
  const expr = node.expression.getText(sf);
  if (expr !== "console.log") return null;
  const { line } = sf.getLineAndCharacterOfPosition(node.pos);
  return { file: sf.fileName, line: line + 1, message: "No console.log allowed" };
}

Menelusuri AST

Tulis penelusuran rekursif yang menerapkan semua aturan ke setiap simpul dalam setiap berkas sumber.

function walk(
  node: ts.Node,
  sf: ts.SourceFile,
  rules: ((n: ts.Node, sf: ts.SourceFile) => Diagnostic | null)[]
): Diagnostic[] {
  const diags: Diagnostic[] = [];
  for (const rule of rules) {
    const d = rule(node, sf);
    if (d) diags.push(d);
  }
  ts.forEachChild(node, child => diags.push(...walk(child, sf, rules)));
  return diags;
}

Menjalankan Alat Pemeriksa Kode

Ulangi untuk semua berkas sumber, terapkan aturannya, lalu cetak diagnostik.

const rules = [noConsoleLog];
const allDiagnostics: Diagnostic[] = [];

for (const sf of program.getSourceFiles()) {
  if (!sf.isDeclarationFile) {
    allDiagnostics.push(...walk(sf, sf, rules));
  }
}

allDiagnostics.forEach(d =>
  console.log(`${d.file}:${d.line} — ${d.message}`)
);

Menambahkan Aturan yang Memahami Tipe

Gunakan pemeriksa tipe untuk membangun aturan yang bergantung pada tipe TypeScript dari suatu ekspresi.

const checker = program.getTypeChecker();

function noAnyReturn(node: ts.Node, sf: ts.SourceFile): Diagnostic | null {
  if (!ts.isFunctionDeclaration(node)) return null;
  const sig = checker.getSignatureFromDeclaration(node);
  if (!sig) return null;
  const ret = checker.getReturnTypeOfSignature(sig);
  if (ret.flags & ts.TypeFlags.Any) {
    const { line } = sf.getLineAndCharacterOfPosition(node.pos);
    return { file: sf.fileName, line: line + 1, message: "Function returns any" };
  }
  return null;
}

Kode Keluar untuk CI

Kembalikan kode keluar bukan nol saat diagnostik ditemukan agar alur CI dapat menggagalkan pembangunan.

if (allDiagnostics.length > 0) {
  console.error(`${allDiagnostics.length} lint error(s)`);
  process.exit(1);
}
process.exit(0);

Aturan: Variabel yang Tidak Digunakan

API kompilator menyediakan diagnostik variabel yang tidak digunakan melalui ts.getPreEmitDiagnostics, sehingga aturan khusus Anda dilengkapi dengan pemeriksaan bawaan.

const preEmit = ts.getPreEmitDiagnostics(program);
preEmit.forEach(d => {
  const msg = ts.flattenDiagnosticMessageText(d.messageText, "
");
  console.log(msg);
});

Aturan: Wajibkan Tipe Pengembalian

Aturan yang memberikan peringatan saat fungsi tidak memiliki anotasi tipe pengembalian yang eksplisit membantu menegakkan disiplin dokumentasi.

function requireReturnType(node: ts.Node, sf: ts.SourceFile): Diagnostic | null {
  if (!ts.isFunctionDeclaration(node)) return null;
  if (!node.type) {
    const { line } = sf.getLineAndCharacterOfPosition(node.pos);
    return { file: sf.fileName, line: line + 1, message: "Missing return type" };
  }
  return null;
}

Membandingkan dengan ESLint

Alat pemeriksa kode khusus Anda melengkapi ESLint. Gunakan ESLint untuk aturan gaya dan alat API kompilator TypeScript Anda untuk aturan yang memahami tipe dan tidak dapat dinyatakan oleh ESLint.

// ESLint: stylistic and common pattern rules
// Compiler API linter: deep type reasoning, custom constraints

Ringkasan: Membangun Alat Pemeriksa Kode

Alat pemeriksa kode berbasis API kompilator TypeScript membuat program, menelusuri AST dengan aturan, secara opsional meminta informasi dari pemeriksa tipe, lalu keluar dengan kode bukan nol jika terjadi kesalahan. Pendekatan ini memungkinkan aturan pemeriksaan kode yang benar-benar memahami tipe.

Pemeriksaan Singkat

Apa yang membuat alat pemeriksa kode berbasis API kompilator lebih unggul daripada ESLint?

Yang Anda Pelajari

Anda telah membangun alat pemeriksa kode TypeScript sederhana menggunakan API kompilator: memuat program, menelusuri AST, menerapkan aturan (yang secara opsional memahami tipe), dan melaporkan diagnostik. Ini menjadi dasar untuk analisis statis khusus dalam proyek TypeScript apa pun.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Alat Lint Sederhana” gratis?

Ya — teks lengkap “Membangun Alat Lint Sederhana” 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 “Membangun Alat Lint Sederhana”?

Buat alat diagnostik khusus menggunakan API compiler. 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 4 dari 4.

Berapa lama pelajaran “Membangun Alat Lint Sederhana” 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