우리는 왜 타입스크립트를 사용하는가?

왜 타입스크립트인가?

결정적으로 자바스크립트가 가지고 있지 않은 타입 안정성 을 제공하게 된다.

• 좋은 개발자 경험
  • 파라미터, 인수 등에 대한 헷갈림을 없애고 많은 부분 intellisense 를 지원할 수 있게 된다.
• 런타임 에러의 방지
  • 런타임 시 발생하여 프로덕션에 치명적일 수 있는 에러를 코드 작성 타임에 알려준다.

자바스크립트의 문제는 무엇이었는가?

• 모든 방면에서 개발자를 이해하려 한다.
  • 언어 내부에서 최대한 에러를 보여주지 않으려 노력하고 있다.
• 개발자의 실수를 제대로 짚어주지 못할 수 있다.

말도 안되는 연산 수행

console.log([1, 2, 3, 4] + false); // it logs '1,2,3,4false'

위 코드의 결과는 '1,2,3,4false' 가 된다. 타입만 놓고 보자면, number[] 에 boolean 을 더한 것이다.

이러한 연산을 의도하는 개발자가 실제로 있을까? 실수일 확률이 높지만, 자바스크립트는 실수를 짚어주기 어렵다.
"왜 array 타입에 boolean 을 더하려고 하는거야!?" 라고 알려줄 수는 없을까?

말도 안되는 연산 수행: 타입스크립트 버전

바로 에러가 발생한다.

Errors in code
Operator '+' cannot be applied to types 'number[]' and 'boolean'.

해당 타입에 + 연산을 적용할 수 없다고 에러가 발생하여, 미연에 런타임 에러를 예방할 수 있다.

잘못된 함수 사용

function divide(a, b) {
  return a / b;
}

• divide 함수는 오직 number 타입이 들어온 경우에만 유효할 것이다.
  • 그렇다면 개발자가 실수로 string 타입을 넣었을 때는 작동하지 않는다고 알려주면 좋지 않을까?
• a 와 b 라는 파라미터가 필수 값인지도 알 수 없다.

divide("abc"); // NaN

일반 자바스크립트는 실행 전에 에러를 탐지해주진 않고, 런타임에 NaN 을 반환한다.

잘못된 함수 사용: 타입스크립트 버전

function divide(a: number, b: number): number {
  return a / b;
}

위와 같이 파라미터와 반환 값의 타입이 number 라고 명시해주었다.

• number 가 들어오지 않은 경우 잘못된 타입이 들어왔다고 에러를 낸다.
• number 타입이 맞더라도 인자가 1개만 들어오면 또 인자 숫자가 잘못되었다고 에러를 낸다.

런타임 에러가 치명적인 이유

• 자바스크립트는 하나의 스레드만 가지고 있다.
• 브라우저에서 런타임에 에러가 발생하면, 자바스크립트 엔진이 더이상 해석을 멈춘다.

const me = { name: "jake" };
me.greet();

위의 코드는 런타임에러를 유발한다. me 오브젝트에는 greet() 이라는 메서드가 존재하지 않기 때문이다. 만일 이렇게 런타임에 에러가 났다는 것을 알려주는 것이 아니라, 코드를 작성할 때 알려줬다면, 런타임에 일어날 수 있는 에러를 예방할 수 있지는 않았을까?

타입스크립트는 무엇을 해결하는가?

• array 타입에 boolean 을 더하는 일반적이지 않은 연산에 대해 경고한다.
• 함수의 파라미터나 반환 값에 대한 타입을 명시하여 개발자가 해당 함수를 올바르게 이용할 수 있도록 돕는다.
• 오브젝트에 존재하지 않는 메서드를 실행시키려 할 때, 코드 작성 시점부터 미리 경고하여 런타임 에러를 예방한다.