TypeScript란 무엇인가?
TypeScript는 자바스크립트 위에 타입 시스템을 얹어 안정성을 높인 언어로, 마이크로소프트에서 만들었습니다. 코드를 작성할 때 변수와 함수의 타입을 미리 정의할 수 있어, 컴파일 과정에서 잘못된 타입 사용을 바로 검출하고 잠재적인 버그를 사전에 막아줍니다. 뿐만 아니라 에디터가 제공하는 풍부한 코드 완성·리팩터링 기능 덕분에 대규모 애플리케이션 개발에서도 보다 빠르고 안전하게 작업할 수 있다는 장점이 있습니다.
- 파일 확장자:
.ts→ 트랜스파일 후.js - 핵심 목표: 타입 안정성, 가독성, 유지보수성 향상
- 호환성: 기존 JS 코드 완벽 호환
- 에디터 지원: VSCode, WebStorm 등에서 강력한 인텔리센스 제공
1. 핵심 이론: 타입 시스템과 호환성
1.1 정적 vs 동적 타입
| 구분 | 동적 타입 (JavaScript) | 정적 타입 (TypeScript) |
|---|---|---|
| 타입 검사 시점 | 런타임 | 컴파일 타임 |
| 에러 발견 시점 | 실행 중 발생 가능 | 사전 방지 |
| 유연성 | 매우 유연 | 엄격한 타입 규칙 적용 |
let x = 123;
x = 'hello'; // 컴파일 에러: 'string'을 'number'에 할당할 수 없음1.2 구조적 타입(Structural Typing)
TypeScript는 구조적 타입 시스템을 사용해, 객체의 프로퍼티 구조(shape)가 호환성을 결정합니다.
interface A { x: number }
interface B { x: number; y: number }
const b: B = { x: 1, y: 2 };
const a: A = b; // OK: B가 A 구조 포함1.3 타입 추론(Type Inference)
컴파일러가 코드 문맥을 분석해 타입을 자동으로 유추합니다.
let message = 'hello'; // message: string
function add(a: number, b: number) {
return a + b; // 반환 타입 number
}2. 컴파일 파이프라인과 내부 구조
- 파싱(Parser): 소스 코드를 토큰 단위로 분해해 AST(Abstract Syntax Tree)로 변환하며, 문법 오류(괄호 불일치·예약어 오·남용 등)를 즉시 검출합니다.
- 타입 체크(Type Checking): 생성된 AST에 변수·함수 등의 타입 정보를 부여하고, 제어 흐름 분석(control-flow analysis)을 통해 타입 추론을 강화합니다. 잘못된 타입 사용 시 컴파일 에러로 보고, 잠재적 버그를 사전에 제거합니다.
- 트랜스파일(Transpilation): 타입 정보를 모두 제거(type erasure)한 뒤 순수 JavaScript로 변환하고, 대상 스펙(ES5, ES2017 등)에 맞춰
async/await나class같은 최신 문법을 다운레벨링합니다.
npx tsc --project tsconfig.json- Declaration 파일(
.d.ts): 라이브러리를 사용할 때 타입 정보를 바로 확인할 수 있도록 도와주는 선언 파일입니다.
--declaration 옵션을 켜 두면 빌드 과정에서 자동 생성되어, 에디터에서 메서드 시그니처나 파라미터·리턴 타입을 자연스럽게 자동 완성하고 리팩터링할 수 있게 해 줍니다.
3. 주요 타입 기능 및 활용
3.1 인터페이스(Interface)
interface Point { x: number; y: number }
function printPoint(p: Point) { console.log(`x:${p.x}, y:${p.y}`) }3.2 제네릭(Generic)
function identity<T>(arg: T): T { return arg }
const num = identity<number>(42)
const str = identity<string>('hello')3.3 유니온(Union) & 인터섹션(Intersection)
type Success = { ok: true; data: string }
type Failure = { ok: false; error: string }
function handle(res: Success | Failure) {
if (res.ok) console.log(res.data)
else console.error(res.error)
}3.4 조건부 타입(Conditional Types)
type NonNullable<T> = T extends null | undefined ? never : T3.5 매핑된 타입(Mapped Types)
type Readonly<T> = { readonly [P in keyof T]: T[P] }3.6 유틸리티 타입(Utility Types)
TypeScript 기본 제공 변환
Partial<T>,Required<T>,Pick<T,K>,Omit<T,K>등
4. 고급 타입
4.1 템플릿 리터럴 타입 (Template Literal Types)
type EventName<T extends string> = `on${Capitalize<T>}`;
// "click" → "onClick"4.2 infer 키워드와 조건부 타입 심화
type ReturnType<T> =
T extends (...args: any[]) => infer R ? R : any;
// 함수 타입의 반환 타입을 자동 추출4.3 satisfies 연산자
const config = {
url: 'https://api.example.com',
method: 'GET',
} satisfies RequestOptions;
// config가 RequestOptions 형태를 만족하는지 컴파일 타임에 검증5. tsconfig.json 설정
{
"compilerOptions": {
"target": "ES2022", // 최종 JS 버전
"module": "ESNext", // 모듈 시스템
"strict": true, // 엄격 모드 일괄 적용
"noImplicitAny": true, // 암묵적 any 금지
"strictNullChecks": true, // null/undefined 체크 강화
"declaration": true, // .d.ts 파일 생성
"sourceMap": true, // 디버깅용 소스맵 생성
"esModuleInterop": true, // CommonJS 호환
"skipLibCheck": true // 라이브러리 타입 검사 생략
}
}
strict는 모든 엄격 모드 활성화 (noImplicitAny,strictNullChecks등)
6. 실전 적용 팁
- IDE 통합: VSCode·WebStorm에서 자동 완성·리팩터링 기능 최대한 활용
- ESLint/Prettier:
@typescript-eslint플러그인으로 코드 스타일·타입 검사 동시 관리 - 점진적 도입: 기존 JS 프로젝트엔
allowJs,checkJs옵션으로 조금씩 TS 적용
7. 릴리즈 노트 하이라이트
- TS 5.0: 컴파일 속도·메모리 사용량·패키지 크기 대폭 개선
- TS 5.5: 제어 흐름 분석이 더 똑똑해져, if (x) 같은 코드 안팎에서 타입 추론이 한층 정확해짐
8. 마치며
이번 글은 TypeScript 컴파일 파이프라인(파싱 → 타입 체크 → 트랜스파일), 주요·고급 타입 기능, tsconfig 설정 팁까지 한 번에 정리했습니다. 정적 타입 덕분에 코드 안정성이 높아지고, AST 기반 타입 체크와 타입 소거 과정을 거쳐 순수 JS 코드가 생성되는 흐름을 명확히 이해할 수 있었습니디. 선언 파일(.d.ts)을 통해 라이브러리 사용자에게 타입 정보를 제공하는 방식도 확인했습니다.
앞으로는 실제 프로젝트에 작은 단위로 적용해 보며 TypeScript의 이점을 몸소 느껴 보고, 기본 기능에 익숙해진 뒤에는 고급 타입과 설정을 하나씩 도입해 워크플로우를 차근차근 개선해 나갈 예정입니다.
