TypeScript 101: 자바스크립트에 '안전벨트' 채우기
- Development, Frontend
- Exien
- · 수정
TypeScript(타입스크립트)는 정적 타입이 추가된 자바스크립트로, 타입 오류를 코드 실행 전에 에디터나 빌드 단계에서 잡아 줍니다. 단기 해커톤이나 아주 가벼운 스크립트가 아니라면, 타입을 적는 초기 비용을 감수하고 도입할 가치가 충분합니다.
자바스크립트의 유연함은 왜 버그를 만들까?
자바스크립트(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는 더 이상 선택이 아닌 '기본 소양'으로 자리 잡았습니다.
