TypeScript Academy · 강의

방문자로 AST 순회하기

구문 트리 노드를 순회하며 코드 구조를 분석합니다.

레슨 2/413개 단계

방문자로 AST 순회하기은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

AST란 무엇인가요

TypeScript는 소스 코드를 추상 구문 트리(AST)로 구문 분석합니다. AST는 변수, 함수, 표현식과 같은 언어 구문을 나타내는 노드의 트리입니다.

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

노드 종류

모든 AST 노드에는 해당 노드가 무엇을 나타내는지 보여 주는 kind 속성이 있습니다. 이 속성의 값은 ts.SyntaxKind 열거형 값입니다.

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

forEachChild로 방문하기

ts.forEachChild(node, visitor)는 노드의 각 직속 자식에 대해 방문자 함수를 호출합니다. 전체 트리를 탐색하려면 재귀를 사용하세요.

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

타입 가드 함수

TypeScript는 안전한 노드 타입 좁히기를 위해 ts.isVariableDeclaration 및 ts.isFunctionDeclaration과 같은 타입 가드 함수를 제공합니다.

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

노드 텍스트 가져오기

node.getText(sourceFile)을 사용하면 노드의 정확한 소스 텍스트를 가져올 수 있고, node.getFullText()를 사용하면 부가 정보까지 포함한 텍스트를 가져올 수 있습니다.

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

노드 위치

모든 노드에는 소스에서 노드를 찾는 데 사용할 수 있는 pos 및 end 위치가 있습니다. 이 위치는 문자 오프셋입니다.

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

재귀 도우미로 탐색하기

일반적으로 사용하는 유틸리티로 트리의 모든 노드에 방문자를 재귀적으로 적용하는 walk 함수가 있습니다.

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

모든 함수 호출 찾기

소스 파일에서 모든 호출 표현식을 찾으려면 재귀적 순회를 사용합니다. 이는 API 사용을 감지할 때 유용합니다.

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

부모 노드에 접근하기

AST 노드에는 기본적으로 부모 포인터가 없습니다. ts.setParent(sourceFile)를 호출하거나, 프로그램에서 부모를 자동으로 설정하는 program.getSourceFile을 사용하십시오.

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

노드와 타입 검사기 사용하기

AST 순회와 타입 검사기를 결합하면 모든 표현식 노드의 TypeScript 타입을 확인할 수 있습니다.

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

요약: AST 순회

forEachChild와 타입 가드 함수를 사용하여 TypeScript AST를 순회합니다. 타입 검사기와 결합하면 강력한 정적 분석 및 코드 생성 도구를 만들 수 있습니다.

빠른 확인

TypeScript AST에서 자식 노드를 재귀적으로 방문하는 함수는 무엇입니까?

학습 내용

AST 순회는 ts.forEachChild와 타입 가드 함수를 사용하여 TypeScript 파일의 모든 노드를 순회하고 검사합니다. 타입 검사기와 결합하면 린터, 코드 분석기, 리팩터링 도구를 만들 수 있습니다.

무료로 시작

AI 튜터와 함께 TypeScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스
101
레슨
352

자주 묻는 질문

“방문자로 AST 순회하기” 강의는 무료인가요?

네 — “방문자로 AST 순회하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“방문자로 AST 순회하기”에서 뭘 배우나요?

구문 트리 노드를 순회하며 코드 구조를 분석합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“방문자로 AST 순회하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. API로 TypeScript 프로그램 만들기
  2. 방문자로 AST 순회하기
  3. 사용자 정의 변환기 및 코드 생성
  4. 간단한 린팅 도구 만들기
← TypeScript Academy(으)로 돌아가기