TypeScript | JavaScript 정적 타입 언어

📖 상세 설명

TypeScript는 JavaScript에 정적 타입 시스템을 추가한 프로그래밍 언어입니다. JavaScript의 모든 기능을 포함하면서 타입 어노테이션, 인터페이스, 제네릭 등 강력한 타입 기능을 제공합니다. TypeScript로 작성된 코드는 JavaScript로 컴파일되어 모든 브라우저와 Node.js 환경에서 실행됩니다.

Microsoft가 2012년에 개발하여 오픈소스로 공개한 TypeScript는, Anders Hejlsberg(C#, Delphi 창시자)가 설계를 주도했습니다. 2025년 현재 GitHub에서 두 번째로 빠르게 성장하는 언어이며, Angular, Vue 3, Deno, Next.js 등 주요 프레임워크들이 TypeScript를 기본 또는 권장 언어로 채택하고 있습니다.

TypeScript의 핵심 기능은 컴파일 타임 타입 체크, 인터페이스를 통한 객체 구조 정의, 제네릭을 통한 재사용 가능한 컴포넌트 작성입니다. 또한 유니온 타입, 타입 가드, 조건부 타입, 매핑된 타입 등 고급 타입 기능으로 복잡한 타입 관계도 표현할 수 있습니다.

실무에서 TypeScript의 가장 큰 장점은 IDE 지원입니다. VS Code에서 자동 완성, 실시간 오류 감지, 안전한 리팩토링, 타입 기반 문서화를 제공받을 수 있습니다. 이는 대규모 팀 협업에서 생산성을 크게 높이고, 런타임 에러를 컴파일 타임에 미리 잡아내어 버그를 획기적으로 줄여줍니다.

💻 코드 예제

// 1. 기본 타입 정의
let userName: string = "홍길동";
let userAge: number = 28;
let isActive: boolean = true;
let skills: string[] = ["TypeScript", "React", "Node.js"];

// 타입 추론 - 명시적 타입 없이도 타입 안전성 보장
let score = 100;  // number로 추론
// score = "high";  // 오류! number 타입에 string 할당 불가

// 2. 인터페이스 - 객체 구조 정의
interface User {
    id: number;
    name: string;
    email: string;
    role: "admin" | "user" | "guest";  // 유니온 타입
    createdAt?: Date;  // 선택적 속성
}

function createUser(user: User): User {
    return {
        ...user,
        createdAt: new Date()
    };
}

const newUser = createUser({
    id: 1,
    name: "김개발",
    email: "dev@example.com",
    role: "user"
});

// 3. 제네릭 - 재사용 가능한 컴포넌트
interface ApiResponse<T> {
    data: T;
    status: number;
    message: string;
}

async function fetchData<T>(url: string): Promise<ApiResponse<T>> {
    const response = await fetch(url);
    const data = await response.json();
    return {
        data: data as T,
        status: response.status,
        message: response.ok ? "성공" : "실패"
    };
}

// 사용 예시 - 타입 안전한 API 호출
interface Product {
    id: number;
    name: string;
    price: number;
}

const products = await fetchData<Product[]>("/api/products");
// products.data는 Product[] 타입으로 자동 완성 지원

// 4. 타입 가드와 유니온 타입
type Result = { success: true; data: User } | { success: false; error: string };

function handleResult(result: Result) {
    if (result.success) {
        console.log(`환영합니다, ${result.data.name}님!`);
    } else {
        console.error(`오류: ${result.error}`);
    }
}

🗣️ 실무에서 이렇게 말하세요

💬 회의에서 - JS에서 TS 마이그레이션

"기존 JavaScript 프로젝트를 TypeScript로 마이그레이션하려고 합니다. 한 번에 전부 바꾸는 건 리스크가 크니까, tsconfig에서 allowJs: true로 설정하고 점진적으로 .ts 파일로 전환하는 게 좋겠습니다. 우선 공유 유틸리티와 API 타입 정의부터 시작하죠."

💬 면접에서 - TypeScript 장점

"TypeScript의 가장 큰 장점은 컴파일 타임에 버그를 잡아준다는 점입니다. 예를 들어, API 응답 타입을 인터페이스로 정의하면 IDE에서 자동 완성과 타입 체크를 받을 수 있어서 런타임 에러를 80% 이상 줄일 수 있습니다. 또한 리팩토링할 때 타입 시스템이 영향 범위를 모두 알려주어 대규모 코드 수정도 안전하게 할 수 있습니다."

💬 코드 리뷰에서 - 타입 정의

"이 API 응답 타입에 as any 캐스팅이 있네요. 런타임에 타입이 안 맞으면 에러가 나서 TypeScript 쓰는 의미가 없어져요. zod나 io-ts로 런타임 검증을 추가하거나, 백엔드와 OpenAPI 스펙을 공유해서 타입을 자동 생성하세요. 그리고 이 interface 대신 type을 쓴 이유가 있나요? 확장이 필요하면 interface가 더 적합해요."

⚠️ 흔한 실수 & 주의사항

❌

any 타입 남용 금지

any를 사용하면 TypeScript의 타입 안전성이 무력화됩니다. 타입을 모를 때는 unknown을 사용하고, 타입 가드로 좁혀나가세요. ESLint의 @typescript-eslint/no-explicit-any 규칙을 활성화하면 any 사용을 방지할 수 있습니다.

✅

strict 모드 권장

tsconfig.json에서 "strict": true를 설정하세요. strictNullChecks, noImplicitAny 등 엄격한 타입 검사가 활성화되어 더 안전한 코드를 작성할 수 있습니다. 새 프로젝트라면 처음부터 strict 모드로 시작하는 것이 좋습니다.

✅

점진적 마이그레이션 전략

기존 JavaScript 프로젝트를 마이그레이션할 때는 한 번에 모든 파일을 바꾸지 마세요. allowJs와 checkJs 옵션으로 .js 파일도 함께 사용하면서, 중요한 모듈부터 순차적으로 .ts로 전환하세요.

🔗 관련 용어

📚 더 배우기

📄 TypeScript 공식 문서 🎮 TypeScript Playground (온라인 실습) 🧩 Type Challenges (타입 연습 문제)