TypeScript 컴파일러 API: AST 조작 및 코드 변환 마스터하기

TypeScript 컴파일러 API는 TypeScript 및 JavaScript 코드를 분석, 조작 및 생성하기 위한 강력한 인터페이스를 제공합니다. 그 핵심에는 소스 코드의 구조화된 표현인 AST(Abstract Syntax Tree)가 있습니다. AST를 사용하여 작업하는 방법을 이해하면 린터, 코드 포맷터, 정적 분석기 및 사용자 정의 코드 생성기와 같은 고급 툴링을 구축할 수 있습니다.

TypeScript 컴파일러 API란 무엇입니까?

TypeScript 컴파일러 API는 TypeScript 컴파일러의 내부 작동 방식을 노출하는 TypeScript 인터페이스 및 함수의 집합입니다. 이를 통해 개발자는 단순히 코드를 컴파일하는 것 이상으로 컴파일 프로세스와 프로그래밍 방식으로 상호 작용할 수 있습니다. 다음을 수행하는 데 사용할 수 있습니다.

• 코드 분석: 코드 구조를 검사하고 잠재적인 문제를 식별하며 의미 정보를 추출합니다.
• 코드 변환: 기존 코드를 수정하고 새 기능을 추가하거나 코드를 자동으로 리팩터링합니다.
• 코드 생성: 템플릿 또는 기타 입력을 기반으로 처음부터 새 코드를 만듭니다.

이 API는 코드 품질을 개선하고 반복적인 작업을 자동화하며 개발자 생산성을 향상시키는 정교한 개발 도구를 구축하는 데 필수적입니다.

AST(Abstract Syntax Tree) 이해

AST는 코드 구조의 트리와 같은 표현입니다. 트리의 각 노드는 변수 선언, 함수 호출 또는 제어 흐름 문과 같은 구문 구문을 나타냅니다. TypeScript 컴파일러 API는 AST를 탐색하고 해당 노드를 검사하고 수정하는 도구를 제공합니다.

다음의 간단한 TypeScript 코드를 고려해 보세요.

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

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

이 코드에 대한 AST는 함수 선언, return 문, 템플릿 리터럴, console.log 호출 및 코드의 기타 요소를 나타냅니다. AST를 시각화하는 것은 어려울 수 있지만 AST 탐색기(astexplorer.net)와 같은 도구가 도움이 될 수 있습니다. 이러한 도구를 사용하면 코드를 입력하고 해당 AST를 사용자 친화적인 형식으로 볼 수 있습니다. AST Explorer를 사용하면 조작할 코드 구조의 종류를 이해하는 데 도움이 됩니다.

주요 AST 노드 유형

TypeScript 컴파일러 API는 다양한 AST 노드 유형을 정의하며 각 유형은 다른 구문 구문을 나타냅니다. 다음은 몇 가지 일반적인 노드 유형입니다.

• SourceFile: 전체 TypeScript 파일을 나타냅니다.
• FunctionDeclaration: 함수 정의를 나타냅니다.
• VariableDeclaration: 변수 선언을 나타냅니다.
• Identifier: 식별자(예: 변수 이름, 함수 이름)를 나타냅니다.
• StringLiteral: 문자열 리터럴을 나타냅니다.
• CallExpression: 함수 호출을 나타냅니다.
• ReturnStatement: return 문을 나타냅니다.

각 노드 유형에는 해당 코드 요소에 대한 정보를 제공하는 속성이 있습니다. 예를 들어 `FunctionDeclaration` 노드에는 이름, 매개변수, 반환 유형 및 본문에 대한 속성이 있을 수 있습니다.

컴파일러 API 시작하기

컴파일러 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. 소스 파일 읽기: `example.ts`라는 TypeScript 파일의 내용을 읽습니다. 이 작업이 작동하려면 `example.ts` 파일을 만들어야 합니다.
3. SourceFile 만들기: AST의 루트를 나타내는 `SourceFile` 객체를 만듭니다. `ts.createSourceFile` 함수는 소스 코드를 구문 분석하고 AST를 생성합니다.
4. AST 출력: AST를 탐색하고 각 노드의 종류를 출력하는 재귀 함수 `printAST`를 정의합니다.
5. printAST 호출: `printAST`를 호출하여 루트 `SourceFile` 노드에서 AST 출력을 시작합니다.

이 코드를 실행하려면 `.ts` 파일(예: `ast-example.ts`)로 저장하고 일부 TypeScript 코드가 포함된 `example.ts` 파일을 만든 다음 코드를 컴파일하고 실행합니다.

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

이렇게 하면 `example.ts` 파일의 AST가 콘솔에 출력됩니다. 출력에는 노드의 계층 구조와 해당 유형이 표시됩니다. 예를 들어 `FunctionDeclaration`, `Identifier`, `Block` 및 기타 노드 유형이 표시될 수 있습니다.

AST 탐색

컴파일러 API는 AST를 탐색하는 몇 가지 방법을 제공합니다. 가장 간단한 방법은 이전 예에서와 같이 `forEachChild` 메서드를 사용하는 것입니다. 이 메서드는 지정된 노드의 각 자식 노드를 방문합니다.

더 복잡한 탐색 시나리오의 경우 `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 클래스: `visit` 메서드가 있는 `IdentifierVisitor` 클래스를 정의합니다.
2. Visit 메서드: `visit` 메서드는 현재 노드가 `Identifier`인지 확인합니다. 그렇다면 식별자의 텍스트를 출력합니다. 그런 다음 `ts.forEachChild`를 재귀적으로 호출하여 자식 노드를 방문합니다.
3. 방문자 만들기: `IdentifierVisitor`의 인스턴스를 만듭니다.
4. 탐색 시작: `SourceFile`에서 `visit` 메서드를 호출하여 탐색을 시작합니다.

이 예제에서는 AST에서 모든 식별자를 찾는 방법을 보여줍니다. 이 패턴을 적용하여 다른 노드 유형을 찾고 다른 작업을 수행할 수 있습니다.

AST 변환

컴파일러 API의 실제 성능은 AST를 변환하는 기능에 있습니다. AST를 수정하여 코드의 구조와 동작을 변경할 수 있습니다. 이는 코드 리팩터링 도구, 코드 생성기 및 기타 고급 툴링의 기초입니다.

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 = 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: `Transformer` 함수를 반환하는 `TransformerFactory` 함수를 정의합니다.
2. Transformer: `Transformer` 함수는 현재 노드가 `SourceFile`인지 확인합니다. 그렇다면 `ts.addSyntheticLeadingComment`를 사용하여 노드에 선행 주석을 추가합니다.
3. ts.transform: `ts.transform`을 호출하여 `SourceFile`에 변환을 적용합니다.
4. 프린터: 변환된 AST에서 코드를 생성하기 위해 `Printer` 객체를 만듭니다.
5. 인쇄 및 쓰기: 변환된 코드를 인쇄하고 `example.transformed.ts`라는 새 파일에 씁니다.

이 예제에서는 간단한 변환을 보여 주지만 동일한 패턴을 사용하여 코드 리팩터링, 로깅 문 추가 또는 설명서 생성과 같은 더 복잡한 변환을 수행할 수 있습니다.

고급 변환 기술

컴파일러 API와 함께 사용할 수 있는 몇 가지 고급 변환 기술은 다음과 같습니다.

• 새 노드 만들기: `ts.createXXX` 함수를 사용하여 새 AST 노드를 만듭니다. 예를 들어 `ts.createVariableDeclaration`은 새 변수 선언 노드를 만듭니다.
• 노드 바꾸기: `ts.visitEachChild` 함수를 사용하여 기존 노드를 새 노드로 바꿉니다.
• 노드 추가: `ts.updateXXX` 함수를 사용하여 AST에 새 노드를 추가합니다. 예를 들어 `ts.updateBlock`은 새 문으로 블록 문을 업데이트합니다.
• 노드 제거: 변환기 함수에서 `undefined`를 반환하여 AST에서 노드를 제거합니다.

코드 생성

AST를 변환한 후에는 AST에서 코드를 생성해야 합니다. 컴파일러 API는 이를 위해 `Printer` 객체를 제공합니다. `Printer`는 AST를 가져와 코드의 문자열 표현을 생성합니다.

`ts.createPrinter` 함수는 `Printer` 객체를 만듭니다. 사용할 줄 바꿈 문자 및 주석을 내보낼지 여부와 같은 다양한 옵션으로 프린터를 구성할 수 있습니다.

`printer.printFile` 메서드는 `SourceFile`을 가져와 코드의 문자열 표현을 반환합니다. 그런 다음 이 문자열을 파일에 쓸 수 있습니다.

컴파일러 API의 실제 응용 프로그램

TypeScript 컴파일러 API는 소프트웨어 개발에서 수많은 실제 응용 프로그램을 가지고 있습니다. 다음은 몇 가지 예입니다.

• 린터: 코딩 표준을 적용하고 코드에서 잠재적인 문제를 식별하기 위해 사용자 지정 린터를 빌드합니다.
• 코드 포맷터: 특정 스타일 가이드에 따라 코드를 자동으로 포맷하는 코드 포맷터를 만듭니다.
• 정적 분석기: 코드에서 버그, 보안 취약점 및 성능 병목 현상을 감지하기 위해 정적 분석기를 개발합니다.
• 코드 생성기: 템플릿 또는 기타 입력에서 코드를 생성하여 반복적인 작업을 자동화하고 상용구 코드를 줄입니다. 예를 들어 설명 파일에서 API 클라이언트 또는 데이터베이스 스키마를 생성합니다.
• 리팩터링 도구: 변수 이름을 자동으로 바꾸거나 함수를 추출하거나 파일 간에 코드를 이동하는 리팩터링 도구를 빌드합니다.
• 국제화(i18n) 자동화: TypeScript 코드에서 번역 가능한 문자열을 자동으로 추출하고 다른 언어에 대한 지역화 파일을 생성합니다. 예를 들어 도구가 `translate()` 함수에 전달된 문자열에 대해 코드를 검색하고 번역 리소스 파일에 자동으로 추가할 수 있습니다.

예: 간단한 린터 빌드

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

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

설명:

1. findUnusedVariables 함수: `SourceFile`을 입력으로 사용하는 `findUnusedVariables` 함수를 정의합니다.
2. usedVariables 집합: 사용된 변수의 이름을 저장하기 위해 `Set`을 만듭니다.
3. visit 함수: AST를 탐색하고 모든 식별자의 이름을 `usedVariables` 집합에 추가하는 재귀 함수 `visit`를 정의합니다.
4. checkVariableDeclaration 함수: 변수 선언이 사용되지 않았는지 확인하는 재귀 함수 `checkVariableDeclaration`을 정의합니다. 그렇다면 변수 이름을 `unusedVariables` 배열에 추가합니다.
5. unusedVariables 반환: 사용되지 않은 변수의 이름이 포함된 배열을 반환합니다.
6. 출력: 사용되지 않은 변수를 콘솔에 출력합니다.

이 예제에서는 간단한 린터를 보여줍니다. 이를 확장하여 다른 코딩 표준을 확인하고 코드에서 다른 잠재적인 문제를 식별할 수 있습니다. 예를 들어 사용되지 않은 가져오기, 지나치게 복잡한 함수 또는 잠재적인 보안 취약점을 확인할 수 있습니다. 핵심은 AST를 탐색하고 관심 있는 특정 노드 유형을 식별하는 방법을 이해하는 것입니다.

모범 사례 및 고려 사항

• AST 이해: AST 구조를 이해하는 데 시간을 투자합니다. AST 탐색기와 같은 도구를 사용하여 코드의 AST를 시각화합니다.
• 유형 가드 사용: 유형 가드(`ts.isXXX`)를 사용하여 올바른 노드 유형으로 작업하고 있는지 확인합니다.
• 성능 고려: AST 변환은 계산 비용이 많이 들 수 있습니다. 코드를 최적화하여 방문하고 변환하는 노드 수를 최소화합니다.
• 오류 처리: 오류를 정상적으로 처리합니다. AST에서 유효하지 않은 작업을 수행하려고 하면 컴파일러 API에서 예외를 throw할 수 있습니다.
• 철저한 테스트: 변환이 원하는 결과를 생성하고 새로운 버그를 발생시키지 않도록 변환을 철저히 테스트합니다.
• 기존 라이브러리 사용: 컴파일러 API에 대한 더 높은 수준의 추상화를 제공하는 기존 라이브러리를 사용하는 것이 좋습니다. 이러한 라이브러리는 일반적인 작업을 단순화하고 작성해야 하는 코드 양을 줄일 수 있습니다. 예로는 `ts-morph` 및 `typescript-eslint`가 있습니다.

결론

TypeScript 컴파일러 API는 고급 개발 도구를 구축하기 위한 강력한 도구입니다. AST를 사용하여 작업하는 방법을 이해하면 코드 품질을 개선하고 반복적인 작업을 자동화하며 개발자 생산성을 향상시키는 린터, 코드 포맷터, 정적 분석기 및 기타 도구를 만들 수 있습니다. API가 복잡할 수 있지만 이를 마스터하면 얻을 수 있는 이점은 상당합니다. 이 종합 가이드는 프로젝트에서 컴파일러 API를 효과적으로 탐색하고 활용하기 위한 토대를 제공합니다. AST Explorer와 같은 도구를 활용하고 노드 유형을 신중하게 처리하며 변환을 철저히 테스트하는 것을 잊지 마십시오. 연습과 헌신을 통해 TypeScript 컴파일러 API의 모든 잠재력을 잠금 해제하고 소프트웨어 개발 환경을 위한 혁신적인 솔루션을 구축할 수 있습니다.

추가 탐색:

• TypeScript 컴파일러 API 문서: [https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API)
• AST 탐색기: [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/)