TypeScript Compiler API: Nắm vững Thao tác AST và Chuyển đổi mã

TypeScript Compiler API cung cấp một giao diện mạnh mẽ để phân tích, thao tác và tạo mã TypeScript và JavaScript. Trung tâm của nó là Cây Cú pháp Trừu tượng (AST), một biểu diễn có cấu trúc của mã nguồn của bạn. Hiểu cách làm việc với AST mở ra khả năng xây dựng các công cụ nâng cao, như linter, bộ định dạng mã, bộ phân tích tĩnh và các trình tạo mã tùy chỉnh.

TypeScript Compiler API là gì?

TypeScript Compiler API là một tập hợp các giao diện và hàm TypeScript phơi bày hoạt động bên trong của trình biên dịch TypeScript. Nó cho phép các nhà phát triển tương tác có lập trình với quá trình biên dịch, vượt ra ngoài việc chỉ biên dịch mã. Bạn có thể sử dụng nó để:

• Phân tích mã: Kiểm tra cấu trúc mã, xác định các vấn đề tiềm ẩn và trích xuất thông tin ngữ nghĩa.
• Chuyển đổi mã: Sửa đổi mã hiện có, thêm các tính năng mới hoặc tái cấu trúc mã tự động.
• Tạo mã: Tạo mã mới từ đầu dựa trên các mẫu hoặc đầu vào khác.

API này rất cần thiết để xây dựng các công cụ phát triển phức tạp giúp cải thiện chất lượng mã, tự động hóa các tác vụ lặp đi lặp lại và nâng cao năng suất của nhà phát triển.

Tìm hiểu Cây Cú pháp Trừu tượng (AST)

AST là một biểu diễn dạng cây của cấu trúc mã của bạn. Mỗi nút trong cây đại diện cho một cấu trúc cú pháp, chẳng hạn như khai báo biến, gọi hàm hoặc câu lệnh điều khiển luồng. TypeScript Compiler API cung cấp các công cụ để duyệt AST, kiểm tra các nút của nó và sửa đổi chúng.

Hãy xem xét đoạn mã TypeScript đơn giản này:

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

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

AST cho đoạn mã này sẽ đại diện cho khai báo hàm, câu lệnh return, chuỗi mẫu, lệnh gọi console.log và các yếu tố khác của mã. Việc hình dung AST có thể khó khăn, nhưng các công cụ như AST explorer (astexplorer.net) có thể giúp ích. Các công cụ này cho phép bạn nhập mã và xem AST tương ứng của nó ở định dạng thân thiện với người dùng. Sử dụng AST Explorer sẽ giúp bạn hiểu loại cấu trúc mã mà bạn sẽ thao tác.

Các loại nút AST chính

TypeScript Compiler API định nghĩa nhiều loại nút AST khác nhau, mỗi loại đại diện cho một cấu trúc cú pháp khác nhau. Dưới đây là một số loại nút phổ biến:

• SourceFile: Đại diện cho toàn bộ một tệp TypeScript.
• FunctionDeclaration: Đại diện cho một định nghĩa hàm.
• VariableDeclaration: Đại diện cho một khai báo biến.
• Identifier: Đại diện cho một định danh (ví dụ: tên biến, tên hàm).
• StringLiteral: Đại diện cho một chuỗi ký tự.
• CallExpression: Đại diện cho một lệnh gọi hàm.
• ReturnStatement: Đại diện cho một câu lệnh return.

Mỗi loại nút có các thuộc tính cung cấp thông tin về thành phần mã tương ứng. Ví dụ, một nút `FunctionDeclaration` có thể có các thuộc tính cho tên, tham số, kiểu trả về và nội dung của nó.

Bắt đầu với Compiler API

Để bắt đầu sử dụng Compiler API, bạn cần cài đặt TypeScript và có hiểu biết cơ bản về cú pháp TypeScript. Dưới đây là một ví dụ đơn giản minh họa cách đọc một tệp TypeScript và in AST của nó:

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);

Giải thích:

1. Nhập Module: Nhập module `typescript` và module `fs` cho các thao tác hệ thống tệp.
2. Đọc tệp nguồn: Đọc nội dung của một tệp TypeScript có tên `example.ts`. Bạn cần tạo một tệp `example.ts` để đoạn mã này hoạt động.
3. Tạo SourceFile: Tạo một đối tượng `SourceFile`, đại diện cho gốc của AST. Hàm `ts.createSourceFile` phân tích cú pháp mã nguồn và tạo AST.
4. In AST: Định nghĩa một hàm đệ quy `printAST` duyệt qua AST và in loại của từng nút.
5. Gọi printAST: Gọi `printAST` để bắt đầu in AST từ nút gốc `SourceFile`.

Để chạy mã này, hãy lưu nó dưới dạng tệp `.ts` (ví dụ: `ast-example.ts`), tạo một tệp `example.ts` với một số mã TypeScript, sau đó biên dịch và chạy mã:

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

Thao tác này sẽ in AST của tệp `example.ts` của bạn ra bảng điều khiển. Đầu ra sẽ hiển thị hệ thống phân cấp của các nút và loại của chúng. Ví dụ, nó có thể hiển thị `FunctionDeclaration`, `Identifier`, `Block` và các loại nút khác.

Duyệt AST

Compiler API cung cấp nhiều cách để duyệt AST. Cách đơn giản nhất là sử dụng phương thức `forEachChild`, như đã trình bày trong ví dụ trước. Phương thức này sẽ truy cập từng nút con của một nút nhất định.

Đối với các tình huống duyệt phức tạp hơn, bạn có thể sử dụng mẫu `Visitor`. Một visitor là một đối tượng định nghĩa các phương thức được gọi cho các loại nút cụ thể. Điều này cho phép bạn tùy chỉnh quá trình duyệt và thực hiện các hành động dựa trên loại nút.

import *s ts from "typescript";
import *s 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);

Giải thích:

1. Lớp IdentifierVisitor: Định nghĩa một lớp `IdentifierVisitor` với một phương thức `visit`.
2. Phương thức Visit: Phương thức `visit` kiểm tra xem nút hiện tại có phải là một `Identifier` hay không. Nếu có, nó sẽ in văn bản của định danh. Sau đó, nó gọi đệ quy `ts.forEachChild` để truy cập các nút con.
3. Tạo Visitor: Tạo một thể hiện của `IdentifierVisitor`.
4. Bắt đầu duyệt: Gọi phương thức `visit` trên `SourceFile` để bắt đầu quá trình duyệt.

Ví dụ này minh họa cách tìm tất cả các định danh trong AST. Bạn có thể điều chỉnh mẫu này để tìm các loại nút khác và thực hiện các hành động khác nhau.

Chuyển đổi AST

Sức mạnh thực sự của Compiler API nằm ở khả năng chuyển đổi AST của nó. Bạn có thể sửa đổi AST để thay đổi cấu trúc và hành vi của mã của mình. Đây là cơ sở cho các công cụ tái cấu trúc mã, trình tạo mã và các công cụ nâng cao khác.

Để chuyển đổi AST, bạn cần sử dụng hàm `ts.transform`. Hàm này nhận một `SourceFile` và một danh sách các hàm `TransformerFactory`. Một `TransformerFactory` là một hàm nhận một `TransformationContext` và trả về một hàm `Transformer`. Hàm `Transformer` chịu trách nhiệm truy cập và chuyển đổi các nút trong AST.

Dưới đây là một ví dụ đơn giản minh họa cách thêm một chú thích vào đầu một tệp TypeScript:

import *s ts from "typescript";
import *s 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 = 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);

Giải thích:

1. TransformerFactory: Định nghĩa một hàm `TransformerFactory` trả về một hàm `Transformer`.
2. Transformer: Hàm `Transformer` kiểm tra xem nút hiện tại có phải là một `SourceFile` hay không. Nếu có, nó sẽ thêm một chú thích dẫn đầu vào nút bằng cách sử dụng `ts.addSyntheticLeadingComment`.
3. ts.transform: Gọi `ts.transform` để áp dụng chuyển đổi cho `SourceFile`.
4. Printer: Tạo một đối tượng `Printer` để tạo mã từ AST đã chuyển đổi.
5. In và Ghi: In mã đã chuyển đổi và ghi nó vào một tệp mới có tên `example.transformed.ts`.

Ví dụ này minh họa một phép chuyển đổi đơn giản, nhưng bạn có thể sử dụng cùng một mẫu để thực hiện các phép chuyển đổi phức tạp hơn, chẳng hạn như tái cấu trúc mã, thêm câu lệnh ghi nhật ký hoặc tạo tài liệu.

Các kỹ thuật chuyển đổi nâng cao

Dưới đây là một số kỹ thuật chuyển đổi nâng cao mà bạn có thể sử dụng với Compiler API:

• Tạo nút mới: Sử dụng các hàm `ts.createXXX` để tạo các nút AST mới. Ví dụ, `ts.createVariableDeclaration` tạo một nút khai báo biến mới.
• Thay thế nút: Thay thế các nút hiện có bằng các nút mới bằng cách sử dụng hàm `ts.visitEachChild`.
• Thêm nút: Thêm các nút mới vào AST bằng cách sử dụng các hàm `ts.updateXXX`. Ví dụ, `ts.updateBlock` cập nhật một câu lệnh khối với các câu lệnh mới.
• Xóa nút: Xóa các nút khỏi AST bằng cách trả về `undefined` từ hàm transformer.

Tạo mã

Sau khi chuyển đổi AST, bạn sẽ cần tạo mã từ nó. Compiler API cung cấp một đối tượng `Printer` cho mục đích này. `Printer` nhận một AST và tạo ra một biểu diễn chuỗi của mã.

Hàm `ts.createPrinter` tạo một đối tượng `Printer`. Bạn có thể cấu hình trình in với nhiều tùy chọn khác nhau, chẳng hạn như ký tự xuống dòng để sử dụng và có nên phát ra các chú thích hay không.

Phương thức `printer.printFile` nhận một `SourceFile` và trả về một biểu diễn chuỗi của mã. Sau đó, bạn có thể ghi chuỗi này vào một tệp.

Các ứng dụng thực tế của Compiler API

TypeScript Compiler API có nhiều ứng dụng thực tế trong phát triển phần mềm. Dưới đây là một vài ví dụ:

• Linters: Xây dựng các linter tùy chỉnh để thực thi các tiêu chuẩn mã hóa và xác định các vấn đề tiềm ẩn trong mã của bạn.
• Bộ định dạng mã: Tạo các bộ định dạng mã để tự động định dạng mã của bạn theo một hướng dẫn kiểu cụ thể.
• Bộ phân tích tĩnh: Phát triển các bộ phân tích tĩnh để phát hiện lỗi, lỗ hổng bảo mật và tắc nghẽn hiệu suất trong mã của bạn.
• Trình tạo mã: Tạo mã từ các mẫu hoặc đầu vào khác, tự động hóa các tác vụ lặp đi lặp lại và giảm mã mẫu. Ví dụ, tạo ứng dụng khách API hoặc lược đồ cơ sở dữ liệu từ một tệp mô tả.
• Công cụ tái cấu trúc: Xây dựng các công cụ tái cấu trúc để tự động đổi tên biến, trích xuất hàm hoặc di chuyển mã giữa các tệp.
• Tự động hóa quốc tế hóa (i18n): Tự động trích xuất các chuỗi có thể dịch từ mã TypeScript của bạn và tạo tệp bản địa hóa cho các ngôn ngữ khác nhau. Ví dụ, một công cụ có thể quét mã để tìm các chuỗi được truyền cho hàm `translate()` và tự động thêm chúng vào tệp tài nguyên dịch.

Ví dụ: Xây dựng một Linter đơn giản

Hãy cùng tạo một linter đơn giản kiểm tra các biến không được sử dụng trong mã TypeScript. Linter này sẽ xác định các biến được khai báo nhưng không bao giờ được sử dụng.

import *s ts from "typescript";
import *s 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();

  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.");
}

Giải thích:

1. Hàm findUnusedVariables: Định nghĩa một hàm `findUnusedVariables` nhận một `SourceFile` làm đầu vào.
2. Tập hợp usedVariables: Tạo một `Set` để lưu trữ tên các biến đã được sử dụng.
3. Hàm visit: Định nghĩa một hàm đệ quy `visit` duyệt qua AST và thêm tên của tất cả các định danh vào tập hợp `usedVariables`.
4. Hàm checkVariableDeclaration: Định nghĩa một hàm đệ quy `checkVariableDeclaration` kiểm tra xem một khai báo biến có bị bỏ đi không. Nếu có, nó sẽ thêm tên biến vào mảng `unusedVariables`.
5. Trả về unusedVariables: Trả về một mảng chứa tên của bất kỳ biến nào không được sử dụng.
6. Đầu ra: In các biến không được sử dụng ra bảng điều khiển.

Ví dụ này minh họa một linter đơn giản. Bạn có thể mở rộng nó để kiểm tra các tiêu chuẩn mã hóa khác và xác định các vấn đề tiềm ẩn khác trong mã của mình. Ví dụ, bạn có thể kiểm tra các import không sử dụng, các hàm quá phức tạp hoặc các lỗ hổng bảo mật tiềm ẩn. Điều quan trọng là phải hiểu cách duyệt AST và xác định các loại nút cụ thể mà bạn quan tâm.

Các Thực hành Tốt nhất và Lưu ý

• Hiểu AST: Dành thời gian để hiểu cấu trúc của AST. Sử dụng các công cụ như AST explorer để hình dung AST của mã của bạn.
• Sử dụng Type Guard: Sử dụng các type guard (`ts.isXXX`) để đảm bảo rằng bạn đang làm việc với các loại nút chính xác.
• Xem xét hiệu suất: Các chuyển đổi AST có thể tốn kém về mặt tính toán. Tối ưu hóa mã của bạn để giảm thiểu số lượng nút bạn truy cập và chuyển đổi.
• Xử lý lỗi: Xử lý lỗi một cách duyên dáng. Compiler API có thể ném ngoại lệ nếu bạn cố gắng thực hiện các thao tác không hợp lệ trên AST.
• Kiểm tra kỹ lưỡng: Kiểm tra kỹ lưỡng các chuyển đổi của bạn để đảm bảo rằng chúng tạo ra kết quả mong muốn và không gây ra lỗi mới.
• Sử dụng Thư viện hiện có: Cân nhắc sử dụng các thư viện hiện có cung cấp các trừu tượng cấp cao hơn trên Compiler API. Các thư viện này có thể đơn giản hóa các tác vụ phổ biến và giảm lượng mã bạn cần viết. Ví dụ bao gồm `ts-morph` và `typescript-eslint`.

Kết luận

TypeScript Compiler API là một công cụ mạnh mẽ để xây dựng các công cụ phát triển tiên tiến. Bằng cách hiểu cách làm việc với AST, bạn có thể tạo ra các linter, trình định dạng mã, bộ phân tích tĩnh và các công cụ khác giúp cải thiện chất lượng mã, tự động hóa các tác vụ lặp đi lặp lại và nâng cao năng suất của nhà phát triển. Mặc dù API có thể phức tạp, nhưng lợi ích của việc nắm vững nó là rất đáng kể. Hướng dẫn toàn diện này cung cấp một nền tảng để khám phá và sử dụng Compiler API một cách hiệu quả trong các dự án của bạn. Hãy nhớ tận dụng các công cụ như AST Explorer, xử lý cẩn thận các loại nút và kiểm tra kỹ lưỡng các chuyển đổi của bạn. Với sự luyện tập và cống hiến, bạn có thể khai thác toàn bộ tiềm năng của TypeScript Compiler API và xây dựng các giải pháp sáng tạo cho bối cảnh phát triển phần mềm.

Tìm hiểu thêm:

• Tài liệu 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/)
• Thư viện ts-morph: [https://ts-morph.com/](https://ts-morph.com/)
• typescript-eslint: [https://typescript-eslint.io/](https://typescript-eslint.io/)