이번 포스트에서는 TypeScript(타입스크립트)에 대해서 자세히 알아보겠습니다.
JavaScript(자바스크립트)로 개발하다가 “어? 왜 갑자기 이 변수가 문자열이 됐지?”라는 당황스러운 경험, 한 번쯤은 있으시죠? 분명 숫자를 넣었는데 어느새 문자열로 바뀌어서 계산이 이상하게 나오고… 이런 문제를 겪어보신 분들이라면 오늘 소개할 TypeScript(타입스크립트)가 얼마나 반가운 존재인지 바로 공감하실 거예요.
저도 처음엔 “굳이 JavaScript에 타입을 붙여야 하나?”라고 생각했는데, 막상 써보니 완전히 생각이 바뀌었습니다. 특히 프로젝트 규모가 커질수록 TypeScript의 진가가 드러나더라고요.
1. TypeScript(타입스크립트), 정확히 무엇인가요?
JavaScript에 타입이라는 안전장치를 더한 언어
TypeScript는 2012년 Microsoft에서 발표한 프로그래밍 언어입니다. 핵심은 이겁니다: TypeScript = JavaScript + 타입 시스템
TypeScript 공식 홈페이지에 가보시면 “JavaScript with syntax for types(타입 문법을 가진 JavaScript)”라는 문구가 보여요. 정말 딱 이 한 문장이 TypeScript의 본질입니다.
슈퍼셋(Superset)이라는 의미
TypeScript를 “JavaScript의 슈퍼셋”이라고 부르는데, 이게 무슨 뜻일까요? 쉽게 말하면 JavaScript가 할 수 있는 모든 것을 TypeScript도 할 수 있고, 거기에 타입 기능까지 추가로 제공한다는 뜻입니다.
구체적으로 보면:
- ✅ JavaScript 코드 → 그대로 TypeScript에서 사용 가능
- ✅ TypeScript 코드 → 컴파일하면 JavaScript가 됨
- ✅ JavaScript 기능 + 타입 시스템 = TypeScript
예를 들어볼까요? 이 JavaScript 코드는:
function greet(name) {
return "Hello, " + name;
}
TypeScript 파일에 그대로 복사해도 문제없이 작동합니다. 단지 확장자만 .js에서 .ts로 바꾸면 됩니다. 이게 바로 슈퍼셋의 의미예요.
TypeScript의 작동 원리: 컴파일이 핵심
여기서 중요한 점이 있습니다. 브라우저는 TypeScript를 직접 이해하지 못합니다. 브라우저가 이해하는 건 JavaScript뿐이죠.
그래서 TypeScript는 이런 과정을 거칩니다:
TypeScript 코드(.ts)
↓ [컴파일]
JavaScript 코드(.js)
↓ [실행]
브라우저/Node.js에서 실행
이 컴파일 과정에서 마법이 일어납니다:
- 타입 검사를 통해 오류 발견
- 타입 정보 제거
- 순수 JavaScript 코드 생성
실제 예를 보시죠:
TypeScript 코드 (hello.ts):
function add(a: number, b: number): number {
return a + b;
}
컴파일 후 JavaScript 코드 (hello.js):
function add(a, b) {
return a + b;
}
보시다시피 타입 정보(: number)가 모두 사라지고 순수한 JavaScript만 남습니다. 이 JavaScript는 어떤 브라우저에서든 실행됩니다.
2025년 현재 TypeScript 상황
TypeScript는 계속 진화하고 있습니다. 2025년 10월 현재:
- 최신 버전: TypeScript 5.9.3
- 곧 출시 예정: TypeScript 6.0 (TypeScript 7.0 대비 준비용)
- 흥미로운 소식: TypeScript 7.0은 Go 언어로 재작성되어 10배 빠른 성능을 제공할 예정
Microsoft의 공식 발표를 보면 TypeScript 팀이 얼마나 이 언어에 진심인지 알 수 있어요.
2. 왜 수많은 개발자들이 TypeScript를 선택할까요?
에러를 실행 전에 미리 잡아주는 타입 체크
JavaScript의 가장 큰 문제는 실행해봐야만 오류를 발견한다는 점입니다. TypeScript는 이 문제를 해결합니다.
JavaScript의 문제:
function calculateTotal(price, quantity) {
return price * quantity;
}
// 이 코드들은 모두 실행됩니다
calculateTotal(1000, 2); // 2000 - 정상
calculateTotal("1000", 2); // "10001000..." - 어?
calculateTotal(1000); // NaN - undefined가 곱해짐
calculateTotal(1000, "two"); // NaN - 문자열과 숫자 곱셈
실행 전까지는 문제를 모릅니다. 사용자가 사용할 때 버그가 터지는 거죠.
TypeScript의 해결:
function calculateTotal(price: number, quantity: number): number {
return price * quantity;
}
calculateTotal(1000, 2); // ✅ 정상
calculateTotal("1000", 2); // ❌ 에러! 코드 작성 중에 빨간 밑줄
calculateTotal(1000); // ❌ 에러! 인자가 부족합니다
calculateTotal(1000, "two"); // ❌ 에러! 문자열은 안 됩니다
코드를 작성하는 순간, IDE가 즉시 알려줍니다. 실행도 하기 전에요!
IDE의 막강한 지원: 자동완성이 완전히 달라집니다
TypeScript를 쓰면 Visual Studio Code 같은 에디터가 훨씬 똑똑해집니다.
interface Product {
id: number;
name: string;
price: number;
category: string;
inStock: boolean;
}
const laptop: Product = {
id: 1,
name: "맥북 프로",
price: 2500000,
category: "전자제품",
inStock: true
};
// 점을 찍는 순간 id, name, price, category, inStock이 자동으로 뜹니다!
laptop. // 여기서 자동완성 목록이 정확하게 나타납니다
타입을 알고 있으니 어떤 속성을 사용할 수 있는지 정확히 제안해주죠. 이건 단순히 타이핑을 줄여주는 것 이상입니다. 개발 속도가 정말 빨라져요.
대규모 프로젝트에서의 안정성
프로젝트가 커지면 여러 파일이 복잡하게 연결됩니다. A 파일을 수정했는데 B 파일에서 에러가 나는 일도 흔하죠. TypeScript는 이런 문제를 컴파일 단계에서 미리 잡아냅니다.
실제로 Google, Microsoft, Airbnb, Slack, Shopify 같은 기업들이 TypeScript를 적극 도입했습니다. Slack 개발팀은 “TypeScript로 전환한 후 안정성과 개발자 정신 건강이 크게 향상되었다”고 말할 정도지요.
3. TypeScript 설치하고 시작하기
사전 준비: Node.js 설치
TypeScript를 사용하려면 먼저 Node.js가 필요합니다. Node.js 공식 홈페이지에서 LTS 버전을 다운로드하세요.
설치 확인:
node -v
npm -v
TypeScript 설치
전역 설치 (권장):
npm install -g typescript
설치 확인:
tsc -v
# Version 5.9.3 (2025년 10월 기준)
프로젝트별 설치 (더 권장):
npm install typescript --save-dev
프로젝트마다 버전을 다르게 관리할 수 있어 이 방법이 더 좋습니다.
첫 TypeScript 프로젝트 만들기
1단계: 프로젝트 폴더 생성
mkdir my-first-ts
cd my-first-ts
2단계: 설정 파일 생성
tsc --init
tsconfig.json 파일이 자동 생성됩니다. 이 파일은 TypeScript 컴파일 옵션을 담고 있어요.
3단계: TypeScript 파일 작성
index.ts 파일 생성:
// 사용자 정보 타입 정의
interface User {
id: number;
name: string;
email: string;
}
// 함수의 매개변수와 반환 타입 명시
function createUser(name: string, email: string): User {
return {
id: Math.floor(Math.random() * 1000),
name: name,
email: email
};
}
// 타입을 지정하여 객체 생성
const newUser: User = createUser("김개발", "dev@example.com");
console.log(`사용자 생성: ${newUser.name} (${newUser.email})`);
4단계: 컴파일
tsc index.ts
index.js 파일이 생성됩니다!
5단계: 실행
node index.js
성공하면 “사용자 생성: 김개발 (dev@example.com)” 메시지가 보입니다.
4. TypeScript 핵심 문법 익히기
기본 타입들
// 기본 타입
let age: number = 30;
let name: string = "홍길동";
let isActive: boolean = true;
// 배열
let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["김철수", "이영희"];
// 객체
let person: { name: string; age: number } = {
name: "최개발",
age: 32
};
인터페이스 (Interface)
반복 사용하는 타입은 인터페이스로 정의하면 편합니다:
interface Product {
id: number;
name: string;
price: number;
inStock: boolean;
}
const laptop: Product = {
id: 1,
name: "맥북 프로",
price: 2500000,
inStock: true
};
함수 타입 지정
// 기본 함수
function add(a: number, b: number): number {
return a + b;
}
// 화살표 함수
const multiply = (a: number, b: number): number => a * b;
// 선택적 매개변수
function greet(name: string, greeting?: string): string {
return greeting ? `${greeting}, ${name}!` : `안녕하세요, ${name}!`;
}
유니온 타입과 타입 별칭
// 유니온 타입: 여러 타입 중 하나
type Status = "pending" | "approved" | "rejected";
function updateStatus(status: Status): void {
console.log(`상태: ${status}`);
}
updateStatus("approved"); // ✅
updateStatus("cancelled"); // ❌ 에러!
// 타입 별칭
type Point = {
x: number;
y: number;
};
const location: Point = { x: 10, y: 20 };
5. 실전에서 TypeScript 활용하기
React와 함께 사용하기
React 프로젝트를 TypeScript로 시작:
npx create-react-app my-app --template typescript
간단한 컴포넌트 예제:
import React from 'react';
// Props 타입 정의
interface ButtonProps {
text: string;
onClick: () => void;
disabled?: boolean;
}
// 함수형 컴포넌트
const CustomButton: React.FC<ButtonProps> = ({
text,
onClick,
disabled = false
}) => {
return (
<button onClick={onClick} disabled={disabled}>
{text}
</button>
);
};
export default CustomButton;
React 공식 TypeScript 가이드에서 더 자세한 내용을 확인할 수 있습니다.
Node.js (Express) 백엔드에서 사용하기
import express, { Request, Response } from 'express';
const app = express();
const PORT = 3000;
interface UserResponse {
id: number;
name: string;
email: string;
}
app.get('/api/users/:id', (req: Request, res: Response) => {
const userId = parseInt(req.params.id);
if (isNaN(userId)) {
return res.status(400).json({ error: '잘못된 ID' });
}
const user: UserResponse = {
id: userId,
name: `사용자${userId}`,
email: `user${userId}@example.com`
};
res.json(user);
});
app.listen(PORT, () => {
console.log(`서버 실행 중: ${PORT}번 포트`);
});
6. TypeScript의 장단점
장점
1. 타입 안정성으로 버그 대폭 감소 컴파일 단계에서 오류를 잡아내니 런타임 에러가 확실히 줄어듭니다. 특히 대규모 프로젝트에서 효과가 큽니다.
2. 탁월한 IDE 지원 자동완성, 리팩토링, 코드 네비게이션 모두 JavaScript보다 월등합니다. VS Code는 TypeScript로 만들어져서 특히 궁합이 좋아요.
3. 코드 가독성과 유지보수성 향상 타입 정의 자체가 문서 역할을 합니다. 몇 달 후에 봐도 코드 이해가 쉽죠.
4. 최신 JavaScript 기능 사용 최신 ECMAScript 기능을 쓰면서도 구형 브라우저용 코드로 컴파일됩니다.
단점
1. 초기 학습 곡선 타입 시스템을 이해하는 데 시간이 필요합니다. JavaScript만 하던 개발자에게는 진입장벽이 있어요.
2. 코드량 증가 타입 정의를 추가하다 보니 코드가 길어집니다. 간단한 프로젝트에는 과할 수 있죠.
3. 컴파일 시간 JavaScript는 바로 실행되지만 TypeScript는 컴파일이 필요합니다. 프로젝트가 커지면 시간도 늘어나요.
4. any 타입 남용 위험 타입 지정이 애매할 때 any를 쓰면 TypeScript의 장점이 사라집니다.
7. 어떤 프로젝트에 TypeScript를 써야 할까요?
TypeScript가 특히 빛을 발하는 경우
- 팀 프로젝트: 여러 명이 협업할 때 타입이 소통을 돕습니다
- 대규모 애플리케이션: 코드베이스가 클수록 타입의 가치가 커집니다
- 장기 유지보수: 몇 년간 관리할 프로젝트라면 TypeScript가 큰 도움이 됩니다
- 오픈소스 라이브러리: 사용자들이 API를 쉽게 이해할 수 있습니다
JavaScript만으로 충분한 경우
- 작은 스크립트: 빠르게 만들 일회성 코드
- 간단한 개인 프로젝트: 혼자만 이해하면 되는 작은 프로젝트
- 잘 작동하는 레거시: 이미 안정적인 JavaScript 코드를 굳이 바꿀 필요는 없습니다
8. 자주 묻는 질문(FAQ)
Q: TypeScript를 배우려면 JavaScript를 얼마나 알아야 하나요? 기본 문법(변수, 함수, 객체, 배열)을 이해하고 있으면 시작할 수 있습니다. 오히려 TypeScript를 배우면서 JavaScript를 더 깊이 이해하게 됩니다.
Q: 기존 JavaScript 프로젝트를 전환하기 어렵나요? 점진적 전환이 가능합니다. .js와 .ts 파일을 함께 사용할 수 있어서 중요한 부분부터 하나씩 바꿔가면 됩니다.
Q: 실행 속도가 느려지나요? 아니요. TypeScript는 JavaScript로 컴파일되고, 그 JavaScript가 실행됩니다. 런타임 성능은 동일합니다.
Q: 2025년에도 여전히 인기 있나요? 네! TypeScript는 현재 가장 사랑받는 언어 중 하나입니다. Angular, React, Vue 등 주요 프레임워크가 모두 TypeScript를 지원합니다.
TypeScript는 단순히 JavaScript에 타입을 붙인 언어가 아닙니다. 더 안전하고 유지보수하기 쉬운 코드를 작성하게 도와주는 강력한 도구입니다.
처음엔 타입을 일일이 지정하는 게 번거롭게 느껴질 수 있습니다. 하지만 프로젝트가 커지고, 팀원이 늘어나고, 몇 달 후 코드를 다시 볼 때 그 가치를 실감하게 될 거예요.
모든 프로젝트에 TypeScript가 필요한 건 아니지만, 장기 프로젝트나 팀 작업이라면 초기 학습 비용을 투자할 만한 가치가 충분합니다.
더 깊이 공부하고 싶다면:
작은 프로젝트부터 시작해서 TypeScript를 직접 느껴보세요. “아, 이래서 다들 TypeScript를 쓰는구나!”라는 순간이 분명 올 겁니다. 🙂