Typescript ( tsconfig.json )

Typescript

• Microsoft에서 개발한 오픈소스 언어로, JavaScript에 정적 타입 시스템과 객체지향 프로그래밍 개념을 추가한 언어입니다.
• JavaScript의 상위 집합(Superset)으로, 정적 타입(Type System)을 추가한 프로그래밍 언어입니다.
• 자바스크립트의 유연함은 그대로 유지하면서, 정확성과 개발 생산성을 높일 수 있게 해줍니다.

 

특징

• 정적 타입 검사가 가능합니다.
  • 컴파일 단계에서 타입 오류를 미리 발견할 수 있어, 런타임 오류를 사전에 방지할 수 있다.

// typescript
function add(a: number, b: number): number {
  return a + b;
}

add("1", 2); // ❌ 오류 발생 (string은 number에 할당 불가)


// javascript
function add(a, b) {
  return a + b;
}

add("1", 2); // → "12" (버그가 있어도 실행됨)

• 타입 정보가 명시되어 있으므로 VSCode 같은 IDE에서 자동완성, 타입 추론, 오류 표시가 가능합니다. 
• 클래스, 인터페이스, 추상 클래스, 접근 제어자 등 객체지향 기능을 공식적으로 지원하뎌 객체 지향 프로그래밍이 가능합니다.
• interface, type, namespace, module, enum 등을 통해 구조적이고 유지보수 쉬운 코드 작성 가능합니다.

 

컴파일 작동 과정

• Parser - 코드를 분석해서 AST(Abstract Syntax Tree) 생성
  • 모든 컴파일 과정의 기준이 될 AST (추상 구문 트리)를 만들어 냅니다. Scanner, Parser 를 거쳐 AST를 생성합니다.
    • Scanner : TS로 작성된 코드 문자열들을 각각 예약어, 클론 부호 등의 토큰으로 분리시키는 역할을 수행합니다.
    • Parser : Scanner가 분리해준 토큰을 구문의 구조에 따라 Tree 구조로 만드는 역할을 수행합니다. 이 과정에서 코드가 올바른 문법인지 분석하여 구문 오류를 잡아내는 역할도 수행합니다.
• Binder - 변수, 타입, 스코프 등 연결
  • 생성된 AST를 읽으며 타입 검사에 필요한 데이터를 수집하는 과정입니다. 각 Node 별로 identifier를 구분하고 식별자가 어느 위치에 정의되었는지, 어떤 플래그를 적용할 것인지 구분하여 Node-Symbol 형태로 만듭니다. 이 때, Symbol은 각 Node의 타입 정보를 저장하는 메타데이터 입니다.
• Type Checker -  타입 검증 수행
  • 위에서 만들어 낸 AST와 Node-Symbol 정보들을 기준으로 타입 검사를 시행합니다.
  • 타입 검사는 구조적 타이핑 (Structural Typing) 으로 진행됩니다.
    • 구조적 타이핑 (Structural Typing) : 객체의 구조가 같다면, 같은 타입으로 간주
    • 먼저 이 값이 object 형태인지 확인하고, 다음은 필드, 마지막으로 값의 타입이 일치하는 지를 비교합니다.
• Emitter - 타입 제거 후 JavaScript 코드 생성
  • 먼저 TS AST를 JS AST로 변환합니다. 즉, TS AST에서 타입을 나타내는 keyword syntax를 제거하는 과정입니다.
  • 그 후, tsConfig.json 설정에 따라 각 문법 버전에 맞춰 asset flag를 지정합니다. transformer은 이를 기준으로 js 코드와 타입만을 정의된 d.ts 파일을 생성합니다. 
    • d.ts 은 컴파일러를 통해 타입 추론에 사용됩니다.

 

tsConfig.json

{
  "compilerOptions": {
   	"baseUrl": ".", // 모듈 해석의 기준 경로
    "target": "ES2017", // JavaScript 버전
    "lib": ["dom", "dom.iterable", "esnext"], // TypeScript가 사용할 내장 타입 라이브러리
    "allowJs": true, // .js 파일도 컴파일 및 타입 검사 대상에 포함시킵니다.
    "skipLibCheck": true, // 외부 라이브러리 타입 검사 건너뜀 (속도 ↑)
    "strict": true,
    "noEmit": true, // TypeScript가 코드를 컴파일하지 않고, 타입 검사만 수행하도록 설정
    "esModuleInterop": true, // CommonJS 모듈을 ES6처럼 import 가능
    "module": "esnext", // 어떤 모듈 시스템 사용할지
    "moduleResolution": "bundler", // 모듈 해석 방식을 최신 번들러(예: Vite, Next.js, Webpack 5) 스타일로 지정
    "resolveJsonModule": true, // .json 파일 import 허용 여부
    "isolatedModules": true // 모든 파일을 개별 모듈로 처리하겠다는 의미
    "jsx": "preserve", // JSX 구문을 그대로 유지 (<div />)한 채로 JS로 출력
    "incremental": true, // 이전 컴파일 결과를 캐싱하여, 이후 컴파일 속도 개선
    "plugins": [
      {
        "name": "next"
      }
    ],
    "forceConsistentCasingInFileNames": true, // 파일 이름 대소문자 불일치로 인한 문제를 방지
    "removeComments": true, // 주석 제거
  },
  "include": ["src"], // 컴파일할 파일/폴더 지정
  "exclude": ["node_modules", "dist"] // 제외할 파일/폴더 지정
}