kakasoo

TypeScript 코드는 어떻게 변환되는가? 본문

프로그래밍/TypeScript

TypeScript 코드는 어떻게 변환되는가?

카카수(kakasoo) 2023. 3. 19. 22:20
반응형
import * as ts from "typescript";

// TypeScript 파일을 읽어들입니다.
const sourceFile = ts.createSourceFile(
    "example.ts",
    `
    const num: number = 42;
    const str: string = "Hello, TypeScript!";
    const bool: boolean = true;
  `,
    ts.ScriptTarget.Latest
);

// 타입 체커를 생성합니다.
const program = ts.createProgram({
    rootNames: ["example.ts"],
    options: {
        target: ts.ScriptTarget.ES2015,
        module: ts.ModuleKind.CommonJS,
    },
});

const checker = program.getTypeChecker();

// 'num' 변수의 타입 정보를 추출합니다.
const numVariable = sourceFile.statements[0] as ts.VariableStatement;
const numVariableDeclaration = numVariable.declarationList.declarations[0];
const numType = checker.getTypeAtLocation(numVariableDeclaration);

// 'num' 변수의 타입 정보를 출력합니다.
console.log(numType);

단순 코드를 스트링으로만 생각해볼 때, 타입스크립트 문자열이 자바스크립트 문자열로 변환된다고 볼 수 있다.

타입스크립트는 자바스크립트에 타입이 추가된 컴파일 ( 정확히는 트랜스파일이지만 TS 내부 코드 이름은 compile이었다. ) 언어로,

따라서 타입만 모두 지우고 나면 자바스크립트가 된다고 생각해볼 수 있다.

단, 지울 때는 무작정 타입이라고 지울 게 아니라, 그 흐름을 잘 따라가면서 지울 필요가 있다.

타입도 런타임에 동작하는 코드들과 마찬가지로 일정한 계층 구조를 가지기 마련이다.

정확하지는 않지만, 각 코드 라인을 statement 라고 해보자.

그 코드들은 AST, 즉 Abstact Syntax Tree, 추상구문트리의 형태로 짜여질 수 있다.

이 코드의 흐름을 따라가면서 코드에 명시된 타입을 하나 씩 지워나가면 자바스크립트 코드가 완성된다.

그러면 어차피 지울 거면 왜 타입을 썼는가?

그건 개발 편의를 위해 타입을 사용했지만 실제 동작하는 데에는 타입이 쓸모가 없기 때문이다.

반응형

'프로그래밍 > TypeScript' 카테고리의 다른 글

Flatten  (0) 2023.03.19
DeepReadonly  (0) 2023.03.19
함수의 리턴 타입 알아내기  (0) 2023.03.06
Equal type 설명하기  (1) 2023.03.05
MyAwaited, 프로미스 내부의 타입을 추론해서 꺼내기  (0) 2023.02.25