TypeScript 101: 자바스크립트에 '안전벨트' 채우기
- Development, Frontend
- 26 Jun, 2024
자바스크립트의 배신
자바스크립트(JavaScript)는 세상에서 가장 널리 쓰이는 언어이자, 매우 유연하고 작성하기 쉬운 언어입니다. 하지만 프로젝트 규모가 커지고 복잡해질수록 그 '유연함'은 종종 개발자의 발목을 잡는 치명적인 독이 되곤 합니다.
function addNumbers(a, b) {
return a + b;
}
// 개발자의 의도: 숫자 1과 2를 더해서 3을 기대함
console.log(addNumbers(1, 2)); // 3
// 실수로 문자열을 넣었을 때
console.log(addNumbers("1", "2")); // "12"
위의 코드에서 자바스크립트는 에러를 뿜어내지 않습니다. 묵묵히 문자열 "1"과 "2"를 이어 붙여 "12"라는 엉뚱한 결과를 반환할 뿐입니다. 이 에러는 코드를 실행하는 순간(Runtime)에야 비로소 발견되며, 운이 나쁘면 서비스가 배포된 후 사용자의 화면에서 장애로 터져버립니다.
이러한 동적 타입 언어의 한계를 극복하고, 코드를 '실행하기 전'에 버그를 미리 잡아내기 위해 마이크로소프트(Microsoft)에서 개발한 언어가 바로 **TypeScript(타입스크립트)**입니다.
TypeScript란 무엇인가?
TypeScript는 이름 그대로 "타입(Type)이 추가된 자바스크립트"입니다. 공식적으로는 **JavaScript의 상위 집합(Superset)**이라고 부릅니다. 기존의 자바스크립트 문법을 100% 그대로 지원하면서, 그 위에 정적 타입 검사(Static Type Checking) 기능을 얹은 것입니다.
브라우저나 Node.js 환경은 TypeScript 코드를 직접 읽을 수 없습니다. 따라서 TypeScript 코드는 실행되기 전에 컴파일러(TSC)를 통해 순수한 JavaScript 코드로 변환(Transpile)되는 과정을 거칩니다.
타입스크립트를 쓰면 뭐가 좋나요?
- 실행 전 에러 발견 (안정성): 에디터(VS Code 등)에서 코드를 타이핑하는 순간, 혹은 빌드 과정에서 타입 불일치로 인한 오류를 빨간 줄로 즉각 경고해 줍니다. "런타임 에러"의 공포에서 크게 벗어날 수 있습니다.
- 강력한 자동 완성 (개발 생산성): 객체 안에 어떤 프로퍼티들이 있는지, 함수가 어떤 타입의 인자를 받고 어떤 타입을 반환하는지 에디터가 정확히 알고 있기 때문에 인텔리센스(자동 완성)가 매우 훌륭하게 동작합니다.
- 코드 자체가 훌륭한 명세서 (협업): 다른 사람이 작성한 복잡한 함수를 사용할 때, 그 내부 로직을 다 뜯어보지 않아도 선언된 타입만 보고 사용법을 완벽히 이해할 수 있습니다.
핵심 문법 살짝 맛보기
1. 기본 타입 명시
변수명이나 인자 뒤에 콜론(:)을 붙여 타입을 명시합니다.
// 기본 타입 (Primitive Types)
let userName: string = "Jules";
let age: number = 30;
let isDeveloper: boolean = true;
// 배열 (Array)
let skills: string[] = ["React", "TypeScript", "Node.js"];
// 위에서 보았던 끔찍한 함수에 안전벨트를 채워봅시다.
function addNumbers(a: number, b: number): number {
return a + b;
}
// 이제 에디터가 빨간 줄을 그어주며 실행을 막습니다!
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.
addNumbers("1", "2");
2. 객체의 형태 정의 (Interface & Type Alias)
자바스크립트 개발 시 가장 헷갈리는 것이 객체(Object)에 어떤 데이터가 들어있는지 파악하는 것입니다. TS에서는 interface나 type 키워드를 통해 객체의 뼈대를 미리 설계할 수 있습니다.
// User라는 객체의 타입을 정의합니다.
interface User {
id: number;
name: string;
email: string;
optionalProfileImage?: string; // ?를 붙이면 '있어도 되고 없어도 되는' 선택적 속성이 됩니다.
}
// 변수에 위에서 만든 타입을 부여합니다.
const myProfile: User = {
id: 1,
name: "Jules",
email: "[email protected]"
// optionalProfileImage는 생략해도 에러가 나지 않습니다.
};
// myProfile. 을 치는 순간 id, name, email 속성이 자동 완성됩니다!
3. 유니언 타입 (Union Types)
자바스크립트의 유연함을 어느 정도 허용하고 싶을 때 사용합니다. "A 또는 B 타입이 될 수 있다"고 지정합니다.
// id는 숫자일 수도 있고, 고유한 문자열일 수도 있습니다.
function printId(id: number | string) {
console.log(`Your ID is: ${id}`);
}
printId(101); // OK
printId("UUID-1234"); // OK
printId(true); // Error: boolean은 허용하지 않음
마무리: 그래서 도입해야 할까요?
결론부터 말하자면, "단기 해커톤이나 아주 가벼운 스크립트가 아니라면 무조건 도입하는 것이 이득"입니다.
초기에는 변수마다 타입을 일일이 지정해 주는 것이 코딩 속도를 늦추고 귀찮게 느껴질 수 있습니다. 하지만 프로젝트의 규모가 커질수록, 타입스크립트가 사전에 잡아주는 수많은 버그들과 강력한 자동 완성 기능은 그 초기 비용을 몇 배 이상으로 보상해 줍니다. 2024년 현재 프론트엔드 및 백엔드(Node.js) 생태계에서 TypeScript는 더 이상 선택이 아닌 '기본 소양'으로 자리 잡았습니다.
