기존의 JavaScript는 자유롭다는 장점이 있지만 동적 타입이라는 이유로 타입 관련 버그가 굉장히 많이 발생했습니다. 실행(런타임)을 해야지 타입이 결정되기 때문에 VS Code 같은 에디터에서 자동완성, 리펙토링을 지원하기 어려웠습니다. 버그를 잡기 어려울 뿐만 아니라 코드 이해가 어려워 파라미터·반환값의 문서화가 필요했고, 팀원 간의 설명이 필요했습니다. 이러한 문제를 해결하고 JavaScript의 유연함을 지키기 위해 TypeScript가 나왔습니다. 이 글에서 타입스크립트에 대해서 간략히 소개해보겠습니다.
1. 정적 타입 vs 동적 타입, 그리고 타입스크립트
📋 정적 타입 시스템 (Static Type System)
- 특징: 코드 실행 전, 컴파일 단계에서 모든 변수의 타입을 고정합니다.
- 대표 언어: C, Java 등
- 장점: 실행 전 오류를 발견할 수 있어 매우 안정적입니다.
- 단점: 변수 선언 시마다 타입을 지정해야 하므로 타이핑 양이 많고 유연성이 떨어집니다.
📋 동적 타입 시스템 (Dynamic Type System)
- 특징: 코드를 실행하면서 변수의 타입을 유동적으로 결정합니다.
- 대표 언어: Python, JavaScript
- 장점: 타입 지정 없이 자유롭게 값을 담을 수 있어 코드 작성이 빠르고 유연합니다.
- 단점: 실행 중에 예상치 못한 타입 오류로 인해 프로그램이 비정상 종료될 위험이 큽니다.
💡 TypeScript: 점진적 타입 시스템 (Gradual Type System)
- 두 시스템의 장점을 결합하여 타입 추론(Type Inference)을 통해 모든 변수에 타입을 일일이 선언하지 않아도 안전성을 확보합니다.
- 변수에 담기는 초기값을 기준으로 타입을 추론하고 지정하여 에러를 미리 찾아서 실행 전에 사용자에게 경고를 줍니다.
2. 동작 원리와 컴파일 과정
타입스크립트는 자바스크립트로 변환되는 트랜스파일(Transpile) 과정을 거칩니다.
- 일반적인 JS: JavaScript → AST(추상 문법 트리) → 바이트 코드
- TypeScript의 과정:
1. TypeScript 코드를 읽어 AST를 생성합니다. (공백, 주석 제거 후 트리 구조화)
2. 타입 검사(Type Checking)를 수행합니다. 이 단계에서 실패하면 컴파일이 종료됩니다.
3. 검사가 통과되면 JavaScript 코드로 변환됩니다.
4. 변환된 JS가 다시 AST를 거쳐 컴퓨터가 이해하는 바이트 코드가 됩니다.
- AST : 소스코드를 해석해 추상 문법 트리(AST)를 만듭니다. (주석, 공백 등 제거)
- 타입 검사 (Type Checking): AST를 바탕으로 타입 오류가 없는지 확인합니다. 에러 발생 시 여기서 중단됩니다.
- JavaScript 변환: 타입 관련 코드가 모두 제거된 순수 자바스크립트 코드가 생성됩니다.
- 실행: 생성된 JS가 엔진(V8 등)에 의해 바이트 코드로 변환되어 실행됩니다.
3. 개발 생산성 혁신
TypeScript는 IDE통합으로 개발 경험을 완전히 바꿔났습니다.
✅ 자동완성(IntelliSense): 함수 파라미터·반환 타입 실시간 표시
✅ 리팩토링 안전: 변수명 변경 → 모든 사용처 자동 업데이트
✅ 네비게이션: Ctrl+클릭으로 정의부 즉시 이동, 호버로 타입 힌트
✅ Quick Fix: 에디터가 타입 에러 자동 수정 제안
// ❌ JS: IDE가 모름(실행 전까지 에러를 못 찾음)
function getUser(id) {
return fetch(`/api/users/${id}`).then(r => r.json())
}
// ✅ TS: 완벽 지원
function getUser(id: number): Promise<User> {
return fetch(`/api/users/${id}`).then(r => r.json())
}JavaScript에서는
id타입을 컴파일러가 알 수 없기에id.toUpperCase()같은 String 메서드를 사용한다면 에러가 안 나옵니다. 실행 후,id에 숫자가 들어오는 즉시 에러가 발생합니다. 그에 반해 TypeScript는 입력 즉시 빨간줄로 수정 제안이 나옵니다.
4. TS vs TSX 차이점
두 확장자의 차이는 .tsx는 JSX 문법을 지원하고, .ts는 순수 TypeScript만 가능합니다.
.tsx는 JavaScript 요소를 넣으면 JavaScript로 변환하고 실행까지 진행하지만, .ts는 이러한 과정이 없습니다.
❌ components/Button.ts // JSX 넣으면 컴파일 에러!
const Button = () => {
return <div>Click me</div> // 빨간줄! ❌
}
✅ components/Button.tsx // 문제없이 동작
const Button = () => {
return <div>Click me</div> // 초록색! ✅
}
✅ utils/api.ts // 순수 로직은 .ts
export function getUser(id: number): Promise<User> {
return fetch(`/api/users/${id}`).then(r => r.json())
}.ts 파일
├── TypeScript → 타입 체크
└── JavaScript 출력
.tsx 파일
├── TypeScript → 타입 체크
├── JSX → React.createElement 변환
└── JavaScript 출력이러한 이유에는 성능과 역할을 명확히 하기 위해서 입니다.
장점1. 빌드 속도 최적화
❌ utils/api.tsx // 불필요한 JSX 변환 과정 발생 → 빌드 20% 느려짐
✅ utils/api.ts // 순수 TS만 → 변환 과정 0개, 빠른 컴파일tsx 컴파일러는 모든 파일에 대해 JSX -> React.createElement 변환을 시도합니다. JSX 없는 파일에서 이 과정은 낭비입니다. 그래서 tsx 파일은 React 컴포넌트를, ts 파일은 API, 타입, 훅 등을 정의해둡니다.
장점2. 코드 역할 즉시 파악
파일명만 봐도 역할 파악 가능:
├── api.ts # API 로직 (순수 TS)
├── types/user.ts # 타입 정의 (순수 TS)
├── hooks/useUser.ts # 커스텀 훅 (순수 TS)
└── UserCard.tsx # React 컴포넌트 (JSX)ts, tsx로 나누는 것은 파일 확장자로 컴포넌트와 로직인지 구분할 수 있다는 장점이 있습니다.
5. AI 시대, TypeScript가 필수인 이유
생성형AI 코드 생성 도구들은 TypeScript를 강력히 선호합니다.
GitHub 2025 Octoverse 공식 통계에 따르면
📈 TypeScript 성장률: 66% (JavaScript 추월 1위)
🤖 GitHub Copilot 사용률: TS 프로젝트 2배 높음
Anders Hejlsberg (TypeScript 설계자): "AI는 타입 있는 언어에서 훨씬 정확하다"
왜 AI가 TypeScript를 좋아하나?
- 명확한 의도 전달
AI → "이 함수는 숫자 ID로 User를 반환한다" 즉시 파악❌ JS: function(id) {} // id 타입? 반환값? ✅ TS: function(id: number): Promise<User> {} // AI가 100% 이해! - 압도적인 정확도 차이
실제로 Copilot과 같은 도구를 사용할 때의 실험 결과에 따르면, 타입의 유무에 따라 제안의 질이 달라집니다.
- 정확도: TS(약 92%) vs JS(약 78%)
- 효과:
- Props 타입 자동완성 정확도 95% 이상
- 리팩토링 및 코드 수정 제안의 안전성 90% 이상 확보
- 반면, JS에서 any 타입을 남발할 경우 부정확한 제안이 약 40%까지 증가할 수 있습니다.
마무리하며
타입스크립트는 이제 단순한 '에러 방지용' 도구를 넘어, AI와 협업하며 생산성을 극대화하기 위한 필수 언어가 되었습니다. 명확한 타입 정의는 나뿐만 아니라 동료 개발자, 그리고 우리가 사용하는 AI 도구에게도 가장 강력한 힌트가 됩니다.
지금 바로 tsconfig.json을 설정하고, AI와 함께 더 정확하고 안전한 코딩을 시작해 보세요! 다음 시간에는 타입스크립트의 핵심 설정 파일인 tsconfig.json에 대해 다루겠습니다.
