[한 입 크기로 잘라먹는 TypeScript] CH1. 타입스크립트 개론 2(2. TS 동작원리, 3. 설치와 실습, 4. 컴파일러 옵션 설정하기)

2. 타입스크립트의 동작 원리

컴파일: 사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정

AST(추상 문법 트리): 코드 공백, 주석 등 코드 실행에 관계없는 요소를 전부 제거하고 트리 형태의 자료구조에 코드를 저장해 놓은 형태의 트리

AST 이미지

 

 

타입스크립트의 동작 과정

1. 타입스크립트 코드를 AST로 변환
2. AST를 확인하면서 코드 상 타입오류가 없는지 점검
   • 타입에 오류가 있었다면 타입 검사 실패 및 컴파일 중단
   • 타입에 오류가 없다면 타입 검사 통과
3. AST를 자바스크립트 코드로 변환
4. 컴파일 종료

• 타입에 오류가 있는 경우 컴파일 시 타입 검사를 통과할 수 없음 👉 컴파일로 변환된 자바스크립트는 타입 관련한 에러가 없는 안전한 코드
• 타입스크립트의 타입 관련 코드는 자바스크립트로 변환될 때 사라짐 👉 실제 프로그램 실행에 영향을 미치지 않음

 

3. Hello TS World

1️⃣ 실습 폴더 생성

 

2️⃣ 필요한 라이브러리 및 패키지 설치

- Node.js 패키지 초기화

npm init

 

-@types/node (Node.js 내장 기능들의 타입 정보를 담고 있는 패키지) 설치

npm i @types/node

 

 

- tsx (단 한 번의 명령어로 타입스크립트 코드를 실행시켜 주는 도구) 설치

npm i -g tsx

 

- 타입스크립트 컴파일러(TSC: 타입스크립트를 컴파일하기 위한 패키지) 설치

npm i -g typescript

 

 

3️⃣ 타입스크립트 실행

tsx index.ts

실행 결과

 

 

4. 타입스크립트 컴파일러 옵션 설정하기

컴파일러 옵션

컴파일 과정의 세부 사항 (얼마나 엄격하게 타입 오류 체크할 건지 컴파일 결과 생성된 js 코드 버전은 어떻게 할 건지 등등)

 

 

컴파일러 옵션 자동 생성

tsc --init

 

 

컴파일러 옵션 직접 설정하기

😀 include 옵션

tsc에게 컴파일할 타입스크립트 파일의 범위와 위치를 알려주는 옵션

{
  //"include": ["src"] 
  "include": ["./"]
}

👉 tsc 명령어만 입력해도 src 폴더 아래의 모든 타입스크립트 파일이 동시에 컴파일된다

👉 나의 경우 루트 폴더 바로 아래 코드가 들어있으므로 src 폴더가 없다. 따라서 `./`로 경로를 지정해 주었다.

 

tsc

실행결과

 

😀 target 옵션

컴파일 결과 생성되는 js 코드의 버전을 설정하는 옵션

{
  "compilerOptions": {
    "target": "ESNext"//최신 js 버전
  },
  "include": ["./"]
}

ES5문법으로 컴파일 후 결과를 확인하면 ES6문법으로 자바스크립트 코드가 변경된다.

 

 

😀 module 옵션

변환되는 자바스크립트 코드의 모듈 시스템을 설정하는 옵션

1. <module: CommonJS>

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS"
  },
  "include": ["./"]
}

 

hello.ts

export const hello = () => {
  console.log("hello");
};

 

index.ts

import { hello } from "./hello";
console.log(hello);

 

이후 tsc로 컴파일하면, `require` 및 `exports` 등을 사용하는 CommonJS 문법으로 코드가 변환된 것을 확인할 수 있다.

👇

index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const hello_1 = require("./hello");
console.log(hello_1.hello);

 

2. <module: ESNext>

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext" //최신버전으로 변경
  },
  "include": ["./"]
}

module을 최신값으로 변경하고 tsc를 실행하면

👇

index.js

import { hello } from "./hello";
console.log(hello);

ES 모듈 시스템을 사용하도록 코드가 변경되었다.

 

 

😀 outDir 옵션

컴파일 결과 생성할 자바스크립트 코드의 위치를 결정하는 옵션

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist"
  },
  "include": ["./"]
}

tsc로 컴파일하면 결과가 dist 폴더에 생성된다.

 

 

😀 strict 옵션

타입스크립트 컴파일러의 타입 검사 엄격함 수준을 정하는 옵션

{
  "compilerOptions": {
    ...
    "strict": true
  },
  "include": ["./"]
}

ex) 매개변수의 타입을 지정하지 않았을 시 빨간 줄 에러가 뜬다. strict를 설정하지 않을 시 에러가 발생하지 않는다.

 

 

😀 ModuleDetection 옵션

타입스크립트의 모든 파일은 기본적으로 전역 파일(모듈) 취급을 받는다.

따라서 a.ts 파일과 b.ts 파일에서 동일 이름의 변수를 선언하면 오류가 발생한다.

// a.ts
const a = 1; // ❌

// b.ts
const a = 1; // ❌

이럴 때는 각 파일에 모듈 시스템 키워드(export, import)를 최소 한 개 이상 사용해 해당 파일이 전역 모듈이 아닌 로컬(독립) 모듈 취급받도록 해주어야 한다. 이러한 기능을 가진 옵션이 바로 ModuleDetection이다.

{
  "compilerOptions": {
    ...
    "moduleDetection": "force"
  },
  "include": ["./"]
}

• force: 자동으로 모든 타입스크립트 파일을 로컬 모듈(독립 모듈)로 취급받게 처리한다. (=모든 타입스크립트 파일(.ts)에 export 키워드를 자동으로 추가하여 격리된 모듈로 취급되도록 만든다.)

 

---

출처

소개 - 한 입 크기로 잘라먹는 타입스크립트

한 입 크기로 잘라먹는 타입스크립트(TypeScript) | 이정환 Winterlood - 인프런