타입스크립트에 대하여 간단히 살펴보기

자바스크립트는 기본적으로 타입을 느슨하게 생각하는, 동적(dynamic) 언어에 속합니다.

예를 들어, C++ 의 경우 변수 앞에 반드시 자료형을 붙여서 선언해야 합니다.

1
2

int a = 10;
b = 5; // error

그러나 자바스크립트는 아래와 같이 자료형을 선언하지 않으며, 에러가 발생하지 않습니다.

1
2

const a = "test"; // String이라고 자동으로 파악
let num = 123; // Number라고 자동으로 파악

ECMAScript 표준에서는 아래와 같이 7가지의 자료형(데이터 타입)을 정의하고 있으며, 자료형을 선언하지 않아도 이 7가지 중에서 한 가지로 알아서 파악해 줍니다.

• Boolean
• Null
• Undefined
• Number
• String
• Symbol(ECMAScript 6~)
• Object

참고 : ECMAScript란? : https://chanhuiseok.github.io/posts/web-7/

그런데 이런 동적 언어가 때로는 단점이 될 수 있습니다. 프로그래머가 생각지 않은 데이터 타입으로 자동 파악하는 경우가 생기는 것인데, 이러면 디버깅을 할 때 골치가 아플 수 있습니다.

자바스크립트는 코드에서 무언가 유효하지 않은 코드가 있더라도 가능하면 최대한 결과를 보여주려고 노력합니다. 그 예시로 다음과 같은 코드를 들 수 있습니다.

1
2

const a = 1 + [];
console.log(a); // 1 (Number 타입)

숫자와 배열을 더했는데, 결과는 알아서 Number 타입인 1로 나오게 됩니다. 사실상 숫자와 배열을 저렇게 더할 일은 없을 텐데 자바스크립트는 최대한 생각해서(?) 결과를 내 주는 상황입니다.

이 외에도 각종 변수나 객체 등을 다룰 때, 자바스크립트로 짜는 경우 undefined 라는 용어를 정말 많이 볼 수 있습니다. 이 undefined 관련 에러도 골치 아프게 하는 요인 중 하나…! 예를 들어, 특정 객체에 없는 프로퍼티를 접근하려고 할 때 에러를 발생시키기보다는 undefined 라고 최대한 결과를 내 주는 상황이 있을 것입니다.

자바스크립트의 이러한 점 때문에 개발자는 실수를 알아차리기 어려울 수 있습니다. 에러를 알려 주는 시점도 코드를 짤 때가 아니라, 프로그램을 실행할 때 알려주기 때문에 인지하기 힘든 것도 있습니다.

그래서 등장한 것이 타입스크립트(TypeScript) 입니다.

타입스크립트는 자바스크립트와 다르게 정적 언어라고 부릅니다. 그리고 자바스크립트 코드를 C++, JAVA 등 자료형을 중요하게 체크하는 언어들처럼 구현할 수 있게 해 줍니다. 쉽게 말하자면 타입 체크 기능이 추가가 되는 것입니다.

간단하게 타입스크립트가 적용된 함수를 예시로 들어보겠습니다.

1
2
3
4
5

function sum(a: number, b: number): number {
  return a + b;
}
console.log(sum("0", 1)); // error!
console.log(sum(1, 2)); // 3

sum 함수는 인자로 a와 b를 받는데, 둘 다 Number type이어야 하며, 반환형은 : 옆에 적습니다.

따라서 첫 번째 사용 예시처럼 문자열과 숫자를 넣을 경우 에러가 발생하고, 두 번째는 에러가 나지 않습니다.

만약 타입스크립트가 아니고 일반 자바스크립트 코드였다면 다음과 같을 것입니다.

1
2
3
4
5

function sum(a, b) {
  return a + b;
}
console.log(sum("0", 1)); // 01 (String)
console.log(sum(0, 1)); // 1 (Number)

만약 sum 함수를 작성한 개발자가 의도한 것은 두 숫자의 합을 반환하는 것이었다면, 첫 번째 사용 예시는 올바르지 않은 것입니다. 하지만 앞서 살펴본 것처럼 자바스크립트는 알아서 데이터 타입을 파악하여 결과를 내 줍니다. 그래서 01 이라는 문자열이 반환된 것입니다.

이처럼 개발자가 의도한 대로, 실수를 방지할 수 있게 해 주는 것이 바로 타입스크립트라고 할 수 있습니다.

앞으로 진행하게 된 타입스크립트 스터디에서 활용하는 책은 타입스크립트 프로그래밍(보리스 체르니 저) 입니다.

늦게 참가를 해서 진도가 많이 밀렸는데… 얼른 1장부터 보면서 정리할 예정입니다.

참고한 사이트 및 서적

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

• 타입스크립트 프로그래밍(보리스 체르니 저, 우정은 옮김)