WeniVooks

검색

타입스크립트 베이스캠프

타입스크립트란

1. 강의에 대하여

이 강의는 JavaScript를 알고 있는 사용자를 대상으로 합니다. 만약 JavaScript를 모르신다면 위니북스 교안에 JavaScript 베이스캠프 강의를 먼저 수강하시기 바랍니다.

자바스크립트 베이스캠프

2. 타입스크립트란

타입스크립트는 JavaScript를 기반으로 하는 오픈소스 프로그래밍 언어입니다. Microsoft에서 개발하며 유지 관리를 유지 관리하는 자바스크립트의 '수퍼셋'입니다. '수퍼셋'이란 자바스크립트의 모든 기능을 포함하면서도, 정적 타입, 인터페이스, 제네릭 등과 같은 추가 기능을 제공합니다.

이러한 특성 덕분에 아래와 같은 여러 장점들을 가집니다.

  1. 컴파일 단계에서 코드를 검사하여 오류를 사전에 방지할 수 있습니다.
  2. 어떤 타입의 데이터인지 어떤 데이터가 반환되는지 정보가 코드에 있어 코드의 가독성을 높여줍니다.
  3. 기존 JS 코드에서 사용할 수 없는 새로운 편의 기능을 사용할 수 있습니다.

3. 타입스크립트의 필요성

자바스크립트만으로도 충분한 케이스가 있습니다. 다음의 코드를 참고하겠습니다.

// 버튼 클릭 시 메시지 출력
const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('버튼이 클릭되었습니다!');
});
// 버튼 클릭 시 메시지 출력
const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('버튼이 클릭되었습니다!');
});

위의 코드는 버튼 클릭 시 메시지를 출력하는 간단한 자바스크립트 코드입니다. 이와 같이 코드만 읽어도 어떤 자료형인지 알 수 있거나, 자료형을 알 필요가 없는 코드의 경우에는 타입스크립트를 사용하지 않아도 충분하다고 볼 수 있습니다.

이번에는 다음의 자바스크립트 코드를 참고하겠습니다.

function add(a, b) {
  return a + b;
}
 
const result = add(1, '2');
console.log(result); // '12'
function add(a, b) {
  return a + b;
}
 
const result = add(1, '2');
console.log(result); // '12'

두 개의 '숫자'를 입력 받아 더한 값을 반환해주는 함수를 만들었습니다. 그리고 두 개의 인자로 1과 문자열 '2'를 전달하여 결과값을 받습니다. 이 때 예상하지 못한 결과가 발생합니다.

  1. 두 개의 숫자를 받기 위한 함수는 하나의 숫자와 하나의 문자열을 받게 되었습니다.
  2. 1과 2를 입력하여 결과로 3을 반환 받길 원했지만, 1과 문자열 '2'를 더해서 '12'가 되었습니다.
  3. 함수가 반환하는 값의 자료형이 number이길 원했지만 문자열이 반환됩니다.
  4. 결과적으로 우리는 두 개의 숫자를 더하는 함수를 만들지 않았을 가능성이 보입니다.

해당 함수의 올바른 사용법을 알려주기 위해 다음과 같은 주석을 달아보겠습니다. 이러한 형태의 주석을 JSDoc이라고 부릅니다.

/**
 * 두 수의 차를 구한다.
 * @param {number} a - 첫번째 매개변수 입니다.
 * @param {number} b - 두번째 매개변수 입니다.
 * @returns {number} - 리턴값 입니다.
 */
function add(a, b) {
  return a + b;
}
/**
 * 두 수의 차를 구한다.
 * @param {number} a - 첫번째 매개변수 입니다.
 * @param {number} b - 두번째 매개변수 입니다.
 * @returns {number} - 리턴값 입니다.
 */
function add(a, b) {
  return a + b;
}

이제 VSCode에서 커서를 가져가면 아래와 같이 볼 수 있습니다.

커서를 가져갔을때 파라미터의 타입이 보인다.

이제는 이 함수를 사용하는 사람이 첫번째 매개변수와 두번째 매개변수 그리고 리턴값이 무엇인지 알 수 있게 되었습니다. 조금 더 명확하고 목적에 맞게 쓸 수 있겠네요. 하지만 아쉽게도 모두가 함수의 파라미터가 어떤 형태인지 확인하진 않습니다. 아래처럼 입력을 해도 여전히 에러 없이 동작됩니다.

사용자가 잘못 사용하는 경우

주석을 항상 신뢰할 수 없다는 단점도 있습니다. 주석을 다는 사람이 실수를 했을 경우를 가정해보겠습니다. 아래는 잘못된 주석으로 함수를 오용하는 경우입니다.

주석이 잘못 입력된 경우
3.1 제한해서 해결하기

이러한 문제가 발생되면 더욱 견고한 코드를 작성하기 어렵습니다. 그렇다면 JavaScript에서는 이러한 문제를 어떻게 해결하고 있는지 살펴보도록 하겠습니다. 가장 많이 사용하는 방법으로는 조건문으로 검사를 하는 것입니다. 함수 내에서 인자의 타입이 number가 아니라면 에러를 반환하도록 제한합니다.

function add(a, b) {
  if (typeof a == 'number' && typeof b == 'number') {
    throw new TypeError('인자는 모두 숫자여야 합니다.');
  }
  return a + b;
}
 
const result = add(1, '2'); //에러발생! TypeError('인자는 모두 숫자여야 합니다.')
console.log(result);
function add(a, b) {
  if (typeof a == 'number' && typeof b == 'number') {
    throw new TypeError('인자는 모두 숫자여야 합니다.');
  }
  return a + b;
}
 
const result = add(1, '2'); //에러발생! TypeError('인자는 모두 숫자여야 합니다.')
console.log(result);

위의 코드에서 add 함수는 두 개의 인자 a와 b가 모두 숫자인지 확인한 후 더한 값을 반환합니다. 만약 인자 중 하나라도 숫자가 아니라면 TypeError를 발생 시킵니다.

이렇게 자바스크립트에서도 타입 검사를 수행할 수 있지만, 코드가 복잡해지고 가독성이 떨어집니다. 그리고 여전히 함수 자체에서 a, b가 number가 아닌데도 함수 실행이 가능합니다. 직접 작성한 throw new TypeError('인자는 모두 숫자여야 합니다.'); 에러 메시지가 아니라면 개발자는 어떤 문제로 이러한 문제가 발생되는지 찾아야 하며 문제마다 타입에 대해서 예외사항을 만들어야 합니다.

1.2 타입스크립트의 등장

앞서 자바스크립트에서 발생하는 불편한 부분을 해결하는 것은 간단합니다. 타입이 number가 아니라면 애초에 a와 b에 할당할 수 없음을 알리는 것입니다. 그리고 한 번 정해진 a와 b의 타입은 변하지 않습니다.

하나의 변수의 타입이 계속 바뀌는 자바스크립트의 타입 형태를 동적 타입이라고 부릅니다. 그리고 한번 정해진 변수의 타입이 바뀌지 않는 타입 형태를 정적 타입이라고 합니다.

그럼 타입스크립트에서는 앞서 살펴본 add 함수를 어떤 식으로 작성하고, 위와 같이 의도한 형태로 타입을 사용하지 않았을 때 어떻게 오류를 잡는지 살펴보겠습니다.

// a, b가 number타입임을 명시
// 이 함수가 반환하는 값이 number임을 명시
function add(a: number, b: number): number {
  return a + b;
}
 
const result = add(1, '2'); // 에러: 인자 '2'의 타입이 'number'가 아님
console.log(result);
// a, b가 number타입임을 명시
// 이 함수가 반환하는 값이 number임을 명시
function add(a: number, b: number): number {
  return a + b;
}
 
const result = add(1, '2'); // 에러: 인자 '2'의 타입이 'number'가 아님
console.log(result);

여기서 a: number, b: number 부분으로 a와 b가 number 타입임을 명시하고 있습니다. 그리고 : number 부분으로 이 함수가 반환하는 값이 number임을 명시하고 있습니다. 이렇게 타입을 명시함으로써 함수를 사용하는 사람이 함수의 사용법을 더 명확하게 알 수 있습니다.

이렇게 타입스크립트는 어떠한 값에 대해 타입을 명시적으로 작성할 수 있는 기능을 제공하고 있습니다. 이러한 점을 이용하여 코드를 작성하게 되면 이 함수를 사용하는 개발자는 '함수 add가 문자열을 합치는 것인지?', '숫자를 더해주는 함수인지?'에서 주는 혼란에서 탈출할 수 있게 됩니다.

이렇게 타입을 제대로 작성하는 것만으로 많은 것들을 해결할 수 있고 편리함도 생길 수 있습니다. 앞서 자바스크립트코드에서 타입을 알리기 위해 주석을 작성했습니다.

이 주석은 함수 사용법에 대한 문서로 생각할 수도 있습니다. 그런데 우리는 이런 정보 전달을 타입스크립트에서 주석 없이 코드로만 작성했습니다. 코드만 작성했을 뿐인데 하나의 문서와 같은 역할 또한 하게 될 수 있습니다. 타입스크립트에서는 잘 만든 코드 자체가 문서가 될 수 있습니다. 그리고 타입을 넣어서 조금 더 문서처럼 작성하는 주석을 줄일 수도 있겠습니다.

이렇게 타입을 작성하는 것 만으로 많은 것을 전해 줄 수 있습니다.

4. 타입스크립트의 단점

타입스크립트를 회사 프로젝트에서 제외하는 경우도 종종 발생됩니다. 이번에는 타입스크립트를 사용하지 않는 이유에 대해 알아보겠습니다.

  1. 학습 곡선: 자바스크립트 개발자에게 타입스크립트의 타입 시스템은 처음에 복잡하게 느껴질 수 있습니다. 타입스크립트의 고급 기능들(제네릭, 인터페이스, 네임스페이스 등)을 익히는 데 시간이 필요합니다.
  2. 개발 시간 증가: 코드에 타입을 명시해야 하기 때문에, 개발 초기 단계에서는 작성 시간이 더 걸릴 수 있습니다. 이는 특히 테스트용 프로토타입, MVP(Minimum Viable Product)를 빠르게 만들어야 하는 상황에서 단점이 될 수 있습니다.
TypeScript 퇴출 논란 JS와 TS 사용 현황
1장 타입스크립트 소개1.2 타입스크립트 시작하기