TypeScript Compiler API: การใช้งาน AST Manipulation และ Code Transformation อย่างเชี่ยวชาญ

TypeScript Compiler API มอบอินเทอร์เฟซที่ทรงพลังสำหรับการวิเคราะห์, จัดการ, และสร้างโค้ด TypeScript และ JavaScript ที่แกนกลางคือ Abstract Syntax Tree (AST) ซึ่งเป็นการแสดงโครงสร้างของซอร์สโค้ดของคุณ การทำความเข้าใจวิธีการทำงานกับ AST จะปลดล็อกความสามารถในการสร้างเครื่องมือขั้นสูง เช่น linters, code formatters, static analyzers และ custom code generators

TypeScript Compiler API คืออะไร?

TypeScript Compiler API คือชุดของอินเทอร์เฟซและฟังก์ชัน TypeScript ที่เปิดเผยการทำงานภายในของคอมไพเลอร์ TypeScript มันช่วยให้นักพัฒนาสามารถโต้ตอบกับกระบวนการคอมไพเลชันได้โดยโปรแกรม, ก้าวข้ามเพียงแค่การคอมไพล์โค้ด คุณสามารถใช้มันเพื่อ:

• วิเคราะห์โค้ด: ตรวจสอบโครงสร้างโค้ด, ระบุปัญหาที่อาจเกิดขึ้น, และดึงข้อมูลความหมาย
• แปลงโค้ด: ปรับเปลี่ยนโค้ดที่มีอยู่, เพิ่มคุณสมบัติใหม่, หรือ refactor โค้ดโดยอัตโนมัติ
• สร้างโค้ด: สร้างโค้ดใหม่ตั้งแต่เริ่มต้นตามเทมเพลตหรืออินพุตอื่นๆ

API นี้มีความสำคัญสำหรับการสร้างเครื่องมือพัฒนาที่ซับซ้อนซึ่งช่วยปรับปรุงคุณภาพโค้ด, ทำให้งานซ้ำๆ เป็นไปโดยอัตโนมัติ, และเพิ่มประสิทธิภาพการทำงานของนักพัฒนา

การทำความเข้าใจ Abstract Syntax Tree (AST)

AST คือการแสดงโครงสร้างโค้ดของคุณในรูปแบบต้นไม้ แต่ละโหนดในต้นไม้แสดงถึงโครงสร้างทางวากยสัมพันธ์ เช่น การประกาศตัวแปร, การเรียกใช้ฟังก์ชัน, หรือคำสั่งควบคุมการไหลของโปรแกรม TypeScript Compiler API มอบเครื่องมือในการท่อง AST, ตรวจสอบโหนด, และปรับเปลี่ยน

พิจารณาโค้ด TypeScript ง่ายๆ นี้:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

AST สำหรับโค้ดนี้จะแสดงถึงการประกาศฟังก์ชัน, คำสั่ง return, template literal, การเรียก console.log และองค์ประกอบอื่นๆ ของโค้ด การเห็นภาพ AST อาจเป็นเรื่องที่ท้าทาย แต่เครื่องมือเช่น AST explorer (astexplorer.net) สามารถช่วยได้ เครื่องมือเหล่านี้ช่วยให้คุณป้อนโค้ดและดู AST ที่สอดคล้องกันในรูปแบบที่เป็นมิตรกับผู้ใช้ การใช้ AST Explorer จะช่วยให้คุณเข้าใจโครงสร้างโค้ดที่คุณจะจัดการ

ชนิดของโหนด AST หลัก

TypeScript Compiler API กำหนดชนิดของโหนด AST ต่างๆ ซึ่งแต่ละชนิดแสดงถึงโครงสร้างทางวากยสัมพันธ์ที่แตกต่างกัน นี่คือชนิดโหนดทั่วไปบางส่วน:

• SourceFile: แสดงถึงไฟล์ TypeScript ทั้งหมด
• FunctionDeclaration: แสดงถึงการนิยามฟังก์ชัน
• VariableDeclaration: แสดงถึงการประกาศตัวแปร
• Identifier: แสดงถึงตัวระบุ (เช่น ชื่อตัวแปร, ชื่อฟังก์ชัน)
• StringLiteral: แสดงถึงสตริงลิเทอรัล
• CallExpression: แสดงถึงการเรียกใช้ฟังก์ชัน
• ReturnStatement: แสดงถึงคำสั่ง return

ชนิดของโหนดแต่ละชนิดมีคุณสมบัติที่ให้ข้อมูลเกี่ยวกับองค์ประกอบของโค้ดที่เกี่ยวข้อง ตัวอย่างเช่น โหนด `FunctionDeclaration` อาจมีคุณสมบัติสำหรับชื่อ, พารามิเตอร์, ประเภทการส่งคืน, และเนื้อหา

การเริ่มต้นใช้งาน Compiler API

ในการเริ่มใช้ Compiler API คุณจะต้องติดตั้ง TypeScript และมีความเข้าใจพื้นฐานเกี่ยวกับไวยากรณ์ TypeScript นี่คือตัวอย่างง่ายๆ ที่แสดงวิธีการอ่านไฟล์ TypeScript และพิมพ์ AST:

import * as ts from "typescript";
import * as fs from "fs";

const fileName = "example.ts";
const sourceCode = fs.readFileSync(fileName, "utf8");

const sourceFile = ts.createSourceFile(
  fileName,
  sourceCode,
  ts.ScriptTarget.ES2015, // Target ECMAScript version
  true // SetParentNodes: true to retain parent references in the AST
);

function printAST(node: ts.Node, indent = 0) {
  const indentStr = "  ".repeat(indent);
  console.log(`${indentStr}${ts.SyntaxKind[node.kind]}`);

  node.forEachChild(child => printAST(child, indent + 1));
}

printAST(sourceFile);

คำอธิบาย:

1. นำเข้าโมดูล: นำเข้าโมดูล `typescript` และโมดูล `fs` สำหรับการดำเนินการระบบไฟล์
2. อ่านไฟล์ซอร์ส: อ่านเนื้อหาของไฟล์ TypeScript ที่ชื่อว่า `example.ts` คุณจะต้องสร้างไฟล์ `example.ts` เพื่อให้สิ่งนี้ใช้งานได้
3. สร้าง SourceFile: สร้างอ็อบเจกต์ `SourceFile` ซึ่งแสดงถึงรากของ AST ฟังก์ชัน `ts.createSourceFile` จะแยกวิเคราะห์ซอร์สโค้ดและสร้าง AST
4. พิมพ์ AST: กำหนดฟังก์ชันเรียกซ้ำ `printAST` ที่ท่อง AST และพิมพ์ชนิดของแต่ละโหนด
5. เรียก printAST: เรียก `printAST` เพื่อเริ่มพิมพ์ AST จากโหนดราก `SourceFile`

ในการเรียกใช้โค้ดนี้ ให้บันทึกเป็นไฟล์ `.ts` (เช่น `ast-example.ts`), สร้างไฟล์ `example.ts` พร้อมโค้ด TypeScript บางส่วน จากนั้นคอมไพล์และเรียกใช้โค้ด:

tsc ast-example.ts
node ast-example.js

สิ่งนี้จะพิมพ์ AST ของไฟล์ `example.ts` ของคุณไปยังคอนโซล เอาต์พุตจะแสดงลำดับชั้นของโหนดและชนิดของโหนด ตัวอย่างเช่น อาจแสดง `FunctionDeclaration`, `Identifier`, `Block` และชนิดโหนดอื่นๆ

การท่อง AST

Compiler API มอบหลายวิธีในการท่อง AST วิธีที่ง่ายที่สุดคือการใช้เมธอด `forEachChild` ดังแสดงในตัวอย่างก่อนหน้านี้ เมธอดนี้จะเยี่ยมชมโหนดลูกแต่ละโหนดของโหนดที่กำหนด

สำหรับสถานการณ์การท่องที่ซับซ้อนมากขึ้น คุณสามารถใช้รูปแบบ `Visitor` ได้ Visitor คืออ็อบเจกต์ที่กำหนดเมธอดที่จะเรียกสำหรับชนิดโหนดเฉพาะ สิ่งนี้ช่วยให้คุณสามารถปรับแต่งกระบวนการท่องและดำเนินการตามชนิดของโหนดได้

import * as ts from "typescript";
import * as fs from "fs";

const fileName = "example.ts";
const sourceCode = fs.readFileSync(fileName, "utf8");

const sourceFile = ts.createSourceFile(
  fileName,
  sourceCode,
  ts.ScriptTarget.ES2015,
  true
);

class IdentifierVisitor {
  visit(node: ts.Node) {
    if (ts.isIdentifier(node)) {
      console.log(`Found identifier: ${node.text}`);
    }

    ts.forEachChild(node, n => this.visit(n));
  }
}

const visitor = new IdentifierVisitor();
visitor.visit(sourceFile);

คำอธิบาย:

1. คลาส IdentifierVisitor: กำหนดคลาส `IdentifierVisitor` ด้วยเมธอด `visit`
2. เมธอด Visit: เมธอด `visit` ตรวจสอบว่าโหนดปัจจุบันเป็น `Identifier` หรือไม่ ถ้าเป็นเช่นนั้น จะพิมพ์ข้อความของตัวระบุ จากนั้นจะเรียกซ้ำ `ts.forEachChild` เพื่อเยี่ยมชมโหนดลูก
3. สร้าง Visitor: สร้างอินสแตนซ์ของ `IdentifierVisitor`
4. เริ่มการท่อง: เรียกเมธอด `visit` บน `SourceFile` เพื่อเริ่มการท่อง

ตัวอย่างนี้แสดงวิธีการค้นหาตัวระบุทั้งหมดใน AST คุณสามารถปรับรูปแบบนี้เพื่อค้นหาชนิดโหนดอื่นๆ และดำเนินการต่างๆ

การแปลง AST

พลังที่แท้จริงของ Compiler API อยู่ที่ความสามารถในการแปลง AST คุณสามารถแก้ไข AST เพื่อเปลี่ยนโครงสร้างและพฤติกรรมของโค้ดของคุณ นี่คือพื้นฐานสำหรับเครื่องมือ refactoring, code generators และเครื่องมือขั้นสูงอื่นๆ

ในการแปลง AST คุณจะต้องใช้ฟังก์ชัน `ts.transform` ฟังก์ชันนี้ใช้ `SourceFile` และรายการของฟังก์ชัน `TransformerFactory` `TransformerFactory` คือฟังก์ชันที่ใช้ `TransformationContext` และส่งกลับฟังก์ชัน `Transformer` ฟังก์ชัน `Transformer` มีหน้าที่ในการเยี่ยมชมและแปลงโหนดใน AST

นี่คือตัวอย่างง่ายๆ ที่แสดงวิธีการเพิ่มความคิดเห็นไปยังจุดเริ่มต้นของไฟล์ TypeScript:

import * as ts from "typescript";
import * as fs from "fs";

const fileName = "example.ts";
const sourceCode = fs.readFileSync(fileName, "utf8");

const sourceFile = ts.createSourceFile(
  fileName,
  sourceCode,
  ts.ScriptTarget.ES2015,
  true
);

const transformerFactory: ts.TransformerFactory<ts.SourceFile> = context => {
  return transformer => {
    return node => {
      if (ts.isSourceFile(node)) {
        // Create a leading comment
        const comment = ts.addSyntheticLeadingComment(
          node,
          ts.SyntaxKind.MultiLineCommentTrivia,
          " This file was automatically transformed ",
          true // hasTrailingNewLine
        );

        return node;
      }

      return node;
    };
  };
};

const { transformed } = ts.transform(sourceFile, [transformerFactory]);

const printer = ts.createPrinter({
  newLine: ts.NewLineKind.LineFeed
});

const result = printer.printFile(transformed[0]);

fs.writeFileSync("example.transformed.ts", result);

คำอธิบาย:

1. TransformerFactory: กำหนดฟังก์ชัน `TransformerFactory` ที่ส่งกลับฟังก์ชัน `Transformer`
2. Transformer: ฟังก์ชัน `Transformer` ตรวจสอบว่าโหนดปัจจุบันเป็น `SourceFile` หรือไม่ ถ้าเป็นเช่นนั้น จะเพิ่มความคิดเห็นนำหน้าไปยังโหนดโดยใช้ `ts.addSyntheticLeadingComment`
3. ts.transform: เรียก `ts.transform` เพื่อใช้การแปลงกับ `SourceFile`
4. Printer: สร้างอ็อบเจกต์ `Printer` เพื่อสร้างโค้ดจาก AST ที่ถูกแปลง
5. พิมพ์และเขียน: พิมพ์โค้ดที่ถูกแปลงและเขียนลงในไฟล์ใหม่ชื่อ `example.transformed.ts`

ตัวอย่างนี้แสดงให้เห็นถึงการแปลงอย่างง่าย แต่คุณสามารถใช้รูปแบบเดียวกันนี้เพื่อทำการแปลงที่ซับซ้อนมากขึ้น เช่น การ refactoring โค้ด การเพิ่มคำสั่งการล็อก หรือการสร้างเอกสาร

เทคนิคการแปลงขั้นสูง

นี่คือเทคนิคการแปลงขั้นสูงบางอย่างที่คุณสามารถใช้กับ Compiler API:

• การสร้างโหนดใหม่: ใช้ฟังก์ชัน `ts.createXXX` เพื่อสร้างโหนด AST ใหม่ ตัวอย่างเช่น `ts.createVariableDeclaration` สร้างโหนดการประกาศตัวแปรใหม่
• การแทนที่โหนด: แทนที่โหนดที่มีอยู่ด้วยโหนดใหม่โดยใช้ฟังก์ชัน `ts.visitEachChild`
• การเพิ่มโหนด: เพิ่มโหนดใหม่ไปยัง AST โดยใช้ฟังก์ชัน `ts.updateXXX` ตัวอย่างเช่น `ts.updateBlock` จะอัปเดตคำสั่ง block ด้วยคำสั่งใหม่
• การลบโหนด: ลบโหนดออกจาก AST โดยส่งกลับ `undefined` จากฟังก์ชัน transformer

การสร้างโค้ด

หลังจากแปลง AST คุณจะต้องสร้างโค้ดจาก AST Compiler API มอบอ็อบเจกต์ `Printer` สำหรับวัตถุประสงค์นี้ `Printer` จะใช้ AST และสร้างการแสดงสตริงของโค้ด

ฟังก์ชัน `ts.createPrinter` สร้างอ็อบเจกต์ `Printer` คุณสามารถกำหนดค่าเครื่องพิมพ์ด้วยตัวเลือกต่างๆ เช่น อักขระขึ้นบรรทัดใหม่ที่จะใช้และว่าจะปล่อยความคิดเห็นหรือไม่

เมธอด `printer.printFile` ใช้ `SourceFile` และส่งกลับการแสดงสตริงของโค้ด จากนั้นคุณสามารถเขียนสตริงนี้ไปยังไฟล์

การประยุกต์ใช้งานจริงของ Compiler API

TypeScript Compiler API มีการประยุกต์ใช้งานจริงมากมายในการพัฒนาซอฟต์แวร์ นี่คือตัวอย่างบางส่วน:

• Linters: สร้าง linters แบบกำหนดเองเพื่อบังคับใช้มาตรฐานการเขียนโค้ดและระบุปัญหาที่อาจเกิดขึ้นในโค้ดของคุณ
• Code Formatters: สร้าง code formatters เพื่อจัดรูปแบบโค้ดของคุณโดยอัตโนมัติตามแนวทางการเขียนโค้ดเฉพาะ
• Static Analyzers: พัฒนา static analyzers เพื่อตรวจจับข้อบกพร่อง ช่องโหว่ด้านความปลอดภัย และปัญหาคอขวดด้านประสิทธิภาพในโค้ดของคุณ
• Code Generators: สร้างโค้ดจากเทมเพลตหรืออินพุตอื่นๆ ทำให้งานซ้ำๆ เป็นไปโดยอัตโนมัติ และลดโค้ด boilerplate ตัวอย่างเช่น การสร้าง API clients หรือ database schemas จากไฟล์คำอธิบาย
• Refactoring Tools: สร้าง refactoring tools เพื่อเปลี่ยนชื่อตัวแปร, แยกฟังก์ชัน, หรือย้ายโค้ดระหว่างไฟล์โดยอัตโนมัติ
• Internationalization (i18n) Automation: ดึงสตริงที่แปลได้จากโค้ด TypeScript ของคุณโดยอัตโนมัติ และสร้างไฟล์การแปลสำหรับภาษาต่างๆ ตัวอย่างเช่น เครื่องมือสามารถสแกนโค้ดเพื่อหาสตริงที่ส่งไปยังฟังก์ชัน `translate()` และเพิ่มลงในไฟล์ทรัพยากรการแปลโดยอัตโนมัติ

ตัวอย่าง: การสร้าง Linter อย่างง่าย

มาสร้าง linter อย่างง่ายที่ตรวจสอบตัวแปรที่ไม่ได้ใช้ในโค้ด TypeScript linter นี้จะระบุตัวแปรที่ประกาศแต่ไม่เคยใช้

import * as ts from "typescript";
import * as fs from "fs";

const fileName = "example.ts";
const sourceCode = fs.readFileSync(fileName, "utf8");

const sourceFile = ts.createSourceFile(
  fileName,
  sourceCode,
  ts.ScriptTarget.ES2015,
  true
);

function findUnusedVariables(sourceFile: ts.SourceFile) {
  const usedVariables = new Set<string>();

  function visit(node: ts.Node) {
    if (ts.isIdentifier(node)) {
      usedVariables.add(node.text);
    }

    ts.forEachChild(node, visit);
  }

  visit(sourceFile);

  const unusedVariables: string[] = [];

  function checkVariableDeclaration(node: ts.Node) {
    if (ts.isVariableDeclaration(node) && node.name && ts.isIdentifier(node.name)) {
      const variableName = node.name.text;
      if (!usedVariables.has(variableName)) {
        unusedVariables.push(variableName);
      }
    }

    ts.forEachChild(node, checkVariableDeclaration);
  }

  checkVariableDeclaration(sourceFile);

  return unusedVariables;
}

const unusedVariables = findUnusedVariables(sourceFile);

if (unusedVariables.length > 0) {
  console.log("Unused variables:");
  unusedVariables.forEach(variable => console.log(`- ${variable}`));
} else {
  console.log("No unused variables found.");
}

คำอธิบาย:

1. ฟังก์ชัน findUnusedVariables: กำหนดฟังก์ชัน `findUnusedVariables` ที่ใช้ `SourceFile` เป็นอินพุต
2. เซ็ต usedVariables: สร้าง `Set` เพื่อจัดเก็บชื่อของตัวแปรที่ใช้
3. ฟังก์ชัน visit: กำหนดฟังก์ชันเรียกซ้ำ `visit` ที่ท่อง AST และเพิ่มชื่อของตัวระบุทั้งหมดไปยังเซ็ต `usedVariables`
4. ฟังก์ชัน checkVariableDeclaration: กำหนดฟังก์ชันเรียกซ้ำ `checkVariableDeclaration` ที่ตรวจสอบว่าการประกาศตัวแปรไม่ได้ใช้หรือไม่ ถ้าเป็นเช่นนั้น จะเพิ่มชื่อตัวแปรลงในอาร์เรย์ `unusedVariables`
5. ส่งกลับ unusedVariables: ส่งกลับอาร์เรย์ที่มีชื่อของตัวแปรที่ไม่ได้ใช้
6. เอาต์พุต: พิมพ์ตัวแปรที่ไม่ได้ใช้ไปยังคอนโซล

ตัวอย่างนี้แสดงให้เห็นถึง linter อย่างง่าย คุณสามารถขยายเพื่อตรวจสอบมาตรฐานการเขียนโค้ดอื่นๆ และระบุปัญหาที่อาจเกิดขึ้นอื่นๆ ในโค้ดของคุณ ตัวอย่างเช่น คุณสามารถตรวจสอบการนำเข้าที่ไม่ได้ใช้, ฟังก์ชันที่ซับซ้อนเกินไป, หรือช่องโหว่ด้านความปลอดภัยที่อาจเกิดขึ้น กุญแจสำคัญคือการทำความเข้าใจวิธีการท่อง AST และระบุชนิดโหนดเฉพาะที่คุณสนใจ

แนวทางปฏิบัติที่ดีที่สุดและข้อควรพิจารณา

• ทำความเข้าใจ AST: ใช้เวลาในการทำความเข้าใจโครงสร้างของ AST ใช้เครื่องมือเช่น AST explorer เพื่อเห็นภาพ AST ของโค้ดของคุณ
• ใช้ Type Guards: ใช้ type guards (`ts.isXXX`) เพื่อให้แน่ใจว่าคุณกำลังทำงานกับชนิดโหนดที่ถูกต้อง
• พิจารณาประสิทธิภาพ: การแปลง AST อาจใช้ต้นทุนในการคำนวณสูง ปรับโค้ดของคุณให้เหมาะสมเพื่อลดจำนวนโหนดที่คุณเยี่ยมชมและแปลง
• จัดการข้อผิดพลาด: จัดการข้อผิดพลาดอย่างราบรื่น Compiler API สามารถโยนข้อยกเว้นได้หากคุณพยายามดำเนินการที่ไม่ถูกต้องบน AST
• ทดสอบอย่างละเอียด: ทดสอบการแปลงของคุณอย่างละเอียดเพื่อให้แน่ใจว่าการแปลงเหล่านั้นให้ผลลัพธ์ตามที่ต้องการและไม่นำข้อบกพร่องใหม่ๆ มาใช้
• ใช้ไลบรารีที่มีอยู่: พิจารณาใช้ไลบรารีที่มีอยู่ซึ่งให้การใช้งานระดับสูงกว่า Compiler API ไลบรารีเหล่านี้สามารถลดความซับซ้อนของงานทั่วไปและลดปริมาณโค้ดที่คุณต้องเขียนได้ ตัวอย่างเช่น `ts-morph` และ `typescript-eslint`

บทสรุป

TypeScript Compiler API เป็นเครื่องมือที่ทรงพลังสำหรับการสร้างเครื่องมือพัฒนาขั้นสูง โดยการทำความเข้าใจวิธีการทำงานกับ AST คุณสามารถสร้าง linters, code formatters, static analyzers และเครื่องมืออื่นๆ ที่ปรับปรุงคุณภาพโค้ด, ทำงานซ้ำๆ เป็นไปโดยอัตโนมัติ, และเพิ่มประสิทธิภาพการทำงานของนักพัฒนา แม้ว่า API จะมีความซับซ้อน แต่ประโยชน์ของการใช้งานอย่างเชี่ยวชาญนั้นมีนัยสำคัญ คู่มือที่ครอบคลุมนี้ให้พื้นฐานสำหรับการสำรวจและใช้ Compiler API อย่างมีประสิทธิภาพในโครงการของคุณ อย่าลืมใช้ประโยชน์จากเครื่องมือเช่น AST Explorer จัดการชนิดโหนดอย่างระมัดระวัง และทดสอบการแปลงของคุณอย่างละเอียด ด้วยการฝึกฝนและการอุทิศตน คุณสามารถปลดล็อกศักยภาพทั้งหมดของ TypeScript Compiler API และสร้างโซลูชันที่เป็นนวัตกรรมใหม่สำหรับภูมิทัศน์การพัฒนาซอฟต์แวร์

การสำรวจเพิ่มเติม:

• เอกสาร TypeScript Compiler API: [https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API)
• AST Explorer: [https://astexplorer.net/](https://astexplorer.net/)
• ไลบรารี ts-morph: [https://ts-morph.com/](https://ts-morph.com/)
• typescript-eslint: [https://typescript-eslint.io/](https://typescript-eslint.io/)