왜 타입스크립트를 쓰나요?

실무를 경험하면서, 타입스크립트를 사용했지만 정확히 사용해야 하는 이유를 논리적으로 잘 설명하지 못했다. 이참에 확실하게 정리를 해야겠다.

 

타입스크립트는 마이크로소프트가 개발하고 유지하고 있는 오픈소스 프로그래밍 언어이다. 타입스크립트 코드는 자바스크립트로 변환(컴파일)되기 전에 타입스크립트 컴파일러가 모든 타입을 검사한다. 타입스크립트를 사용하면 크게 2가지 관점에서 코드의 품질과 개발 생산성을 높일 수 있다.

 

1. 타입스크립트는 에러를 사전에 방지할 수 있다.

 

아래의 sum() 함수에 숫자가 아닌 문자가 잘못 전달되었다면 자바스크립트는 문자열 덧셈 처리를 하고 의도하지 않았던 결과를 반환하게 된다. 자바스크립트는 변수의 데이터 타입이 런타임에 결정되고, 변수에 할당된 값에 따라 자동으로 타입이 변할 수 있는 동적 타이핑 언어이기 때문이다.

function sum(a, b) {
  return a + b;
}

sum('10', '20') // 1020

 

하지만 타입스크립트는 컴파일 단계에서 에러를 발생시켜 잘못된 호출을 방지한다.

function sum(a: number, b: number) {
  return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

 

2. 백엔드와의 타입 안전한 통신이 가능하다.

 

프론트엔드와 백엔드의 데이터 통신이 이루어질 때, 이 과정에서 타입 불일치가 발생하면 백엔드 서버의 에러를 유발할 수 있다. 백엔드의 경우 DTO가 맞지 않으면 에러가 발생하기 때문에 프론트엔드에서 매개변수 값들의 타입 에러를 사전에 확인할 수 있는 타입스크립트를 활용하는 것이 바람직하다고 생각한다. 실제로도, 실무를 경험하며 타입의 불일치로 인해 500 에러가 발생하여 당황했던 경험이 몇번 있다.

interface User {
    id: number;
    name: string;
    email: string;
    age?: number; // 선택적인 필드
}

export const fetchUser = async (userId: number): Promise<User> => {
    ...
};

 

JavaScript의 동적 타이핑 특성은 코드의 유연성을 제공하지만, 대규모 프로젝트에서는 오류를 사전에 예방하기 어렵다. TypeScript는 JavaScript의 이러한 동적 특성을 보완하여 정적 타입 시스템을 추가함으로써 더 안전하고 유지보수하기 쉬운 코드 작성을 가능하게 한다.