undefined is not a function. JavaScript를 쓰다 보면 누구나 한 번은 마주치는 오류입니다. 코드를 작성할 때는 아무 문제가 없어 보였지만, 실행하는 순간 터집니다. TypeScript는 이 문제를 실행 전에 잡기 위해 만들어졌습니다.
JavaScript는 동적 타입(Dynamic Typing) 언어입니다. 변수에 어떤 타입의 값이든 담을 수 있고, 타입이 맞는지 검사하지 않습니다. 타입 오류는 코드가 실행될 때 비로소 드러납니다.
// JavaScript
function greet(user) {
return "안녕하세요, " + user.name;
}
greet({ name: "철수" }); // "안녕하세요, 철수"
greet(undefined); // 런타임 오류: Cannot read properties of undefined
user가 undefined일 수 있다는 사실은 함수를 작성할 때 알 수 없습니다. 실행해야 알 수 있습니다.
TypeScript는 정적 타입(Static Typing) 언어입니다. 코드를 작성하는 시점에 타입을 명시하거나 추론하여, 실행 전에 타입 오류를 발견합니다.
// TypeScript
interface User {
name: string;
}
function greet(user: User) {
return "안녕하세요, " + user.name;
}
greet({ name: "철수" }); // 정상
greet(undefined); // 컴파일 오류: 'undefined'는 'User' 타입에 할당할 수 없습니다
undefined를 넘기면 코드 편집기에서 즉시 빨간 밑줄이 표시됩니다. 실행하기 전에 오류를 확인할 수 있습니다.
TypeScript는 JavaScript를 완전히 포함합니다. 유효한 JavaScript 코드는 모두 유효한 TypeScript 코드입니다. TypeScript는 기존 JavaScript에 타입 문법을 추가한 언어입니다.
JavaScript ⊂ TypeScript
이 덕분에 기존 JavaScript 프로젝트에 TypeScript를 점진적으로 도입할 수 있습니다. .js 파일을 .ts로 바꾸고, 필요한 곳부터 타입을 붙여나가면 됩니다.
브라우저와 Node.js는 TypeScript를 직접 실행하지 못합니다. TypeScript 코드는 컴파일러(tsc)를 통해 JavaScript로 변환된 뒤 실행됩니다.
TypeScript (.ts)
↓ tsc (타입 검사 + 변환)
JavaScript (.js)
↓
브라우저 / Node.js 실행
컴파일 단계에서 타입 오류가 있으면 경고를 출력합니다. 오류가 있어도 JavaScript 파일을 생성할 수 있지만, 타입 오류가 있는 코드를 배포하는 것은 좋지 않습니다.
tsc(TypeScript Compiler): TypeScript 코드를 JavaScript로 변환하는 공식 컴파일러. tsconfig.json으로 동작을 설정합니다.
function add(a: number, b: number): number {
return a + b;
}
add(1, "2"); // 오류: 'string'은 'number'에 할당할 수 없습니다
런타임이 아닌 작성 시점에 오류를 잡습니다.
타입 정보를 바탕으로 편집기가 프로퍼티와 메서드를 자동 완성해줍니다. 문서를 보지 않아도 어떤 속성이 있는지 바로 알 수 있습니다.
함수 시그니처나 객체 구조를 바꿀 때, 타입 검사가 영향받는 모든 위치를 찾아줍니다. 수동으로 전체 코드를 뒤지지 않아도 됩니다.
TypeScript의 타입 시스템은 구조적 타이핑(Structural Typing) 방식입니다. 타입의 이름이 아니라 구조(형태)가 같으면 같은 타입으로 취급합니다. 이는 타입의 이름으로 동일성을 판단하는 명목적 타이핑(Nominal Typing)과 반대되는 개념입니다.
interface Point {
x: number;
y: number;
}
function printPoint(p: Point) {
console.log(p.x, p.y);
}
// 명시적으로 Point를 구현하지 않아도 구조가 같으면 통과
const coord = { x: 10, y: 20, z: 30 };
printPoint(coord); // 정상 — x, y가 있으므로 Point를 만족
coord는 Point라고 선언하지 않았지만, x와 y를 가지고 있어서 Point 자리에 쓸 수 있습니다.
TypeScript의 타입 시스템은 코드를 실행하기 전에 버그를 발견하고, 개발 도구의 지원을 강화하며, 코드의 의도를 명확히 드러냅니다. 타입을 작성하는 것은 미래의 자신과 팀원을 위한 문서를 남기는 일이기도 합니다.