Week 13. TypeScript의 동작 원리 및 d.ts 타입 정의 파일

TypeScript의 동작 원리

TypeScript는 JavaScript의 상위 집합(Superset)으로, 정적 타입 검사 기능을 추가한 프로그래밍 언어입니다.

컴파일 단계에서 타입 오류를 검출하고, 작성된 TypeScript 코드는 트랜스파일(transpile) 과정을 통해 일반 JavaScript로 변환됩니다.

 

TypeScript의 동작 원리를 단계별로 설명하면 다음과 같습니다.

1. 코드 작성
   • .ts 또는 .tsx 파일로 작성.
   • 정적 타입(Type Annotations), 인터페이스(Interface), 제네릭(Generics), 열거형(Enum) 등을 사용하여 타입 안정성 강화.
2. 타입 검사 (Type Checking)
   • 타입스크립트 컴파일러(tsc)는 작성된 코드를 파싱하여 AST(Abstract Syntax Tree)를 생성
   • 컴파일러(tsc)가 타입 불일치, 잘못된 코드 사용을 컴파일 단계에서 검출.
   • 타입 정보는 런타임에서 제거됨.
   • cf AST (Abstract syntax tree) - 코드의 구조를 트리 형태로 표현한 데이터 구조. 변수 선언, 함수 호출, 조건문 등의 코드요소가 트리의 노드로 변환
3. 트랜스파일 (Transpile)
   • TypeScript 코드를 표준 JavaScript로 변환.
   • 변환된 JavaScript는 브라우저, Node.js 등 런타임 환경에서 실행 가능.
4. 컴파일 설정 (tsconfig.json)
   • 주요 설정
     • 타겟 JavaScript 버전 : ES2017, ES6, ESNext 등
     • 모듈 형식 : CommonJS, ES Module 등
     • 엄격 모드: strict 활성화.
     • 소스맵 및 출력 디렉토리 지정.
5. 결과 실행
   • 컴파일된 JavaScript는 런타임에서 실행.
   • TypeScript의 타입 정보는 실행에 영향을 미지지 않으며, 순수한 JavaScript 코드만 실행

 

 

d.ts 타입 정의 파일이란?

d.ts 파일은 TypeScript에서 타입 정보만 선언하는 파일로, JavaScript 환경에서 부족한 타입 정보를 보완하거나 기존 객체의 타입을 확장할 때 사용됩니다.  예를 들어 Express의 Request 객체에 사용자 정의 속성을 추가하려면 d.ts 파일을 작성하여Request 객체에 사용자 정의 속성을 안전하게 추가할 수 있습니다.

 

d.ts 파일 작성 방법

1. 파일 확장자:
   • .d.ts로 저장.
2. 타입 선언 키워드:
   • declare를 사용해 구현 없이 타입만 선언.
3. 저장 위치:
   • 프로젝트 루트 디렉터리 또는 types/ 디렉터리에 저장.
4. 컴파일러 설정:
   • tsconfig.json의 typeRoots를 통해 포함할 경로를 설정할 수 있습니다. 

    "typeRoots": [
      "./types",
      "./node_modules/@types"
    ],

 

Express의 Request 객체 확장 예

// express.d.ts

import Express from 'express';
import { User } from '@prisma/client';

// 전역 네임스페이스 확장
declare global {
  namespace Express {
    interface Request {
      User?: User; // Prisma의 User 타입 (선택적 속성)
      userId: string; // 사용자 ID (필수 속성)
    }
  }
}

 

사용 예

1. 미들웨어에서 사용자 정의 속성 추가

import { Request, Response, NextFunction } from 'express';

const authenticateUser = (req: Request, res: Response, next: NextFunction) => {
  req.userId = '12345'; // 사용자 ID 추가
  req.User = { id: 1, name: 'John Doe', email: 'john@example.com' }; // 사용자 정보 추가
  next();
};

 

2. 라우트 핸들러에서 사용자 정의 속성 사용

app.get('/profile', (req: Request, res: Response) => {
  if (!req.User) {
    return res.status(401).send('Unauthorized');
  }
  res.json({
    userId: req.userId,
    userName: req.User.name,
  });
});