반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- ip
- 프로그래머스
- 쉬운 문제
- Nestjs
- 가천대
- 프로그래머스 레벨 2
- 소켓
- HTTP 완벽 가이드
- 자바스크립트
- 수학
- HTTP
- dp
- 알고리즘
- dfs
- 타입스크립트
- 백준
- typescript
- TCP
- type challenge
- 문자열
- 레벨 1
- javascript
- 타입 챌린지
- Node.js
- Crawling
- 그래프
- 크롤링
- Algorithm
- socket
- BFS
Archives
- Today
- Total
kakasoo
TypeScript 코드는 어떻게 변환되는가? 본문
반응형
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 |