TypeScript를 사용하는 이유

JavaScript vs TypeScript

코드 량만 보면 굳이 TypeScript를 써야 할까 싶지만, TypeScript를 사용하면 JavaScript와 달리 코드 작성 과정에서 코드를 실시간으로 디버깅할 수 있어 매우 편리합니다. JavaScript와 TypeScript 사용 예를 비교해봅니다.
JavaScript

작성된 함수 코드를 보면 아래 TypeScript 코드보다 간결해보입니다. 하지만 함수 실행 과정에서 전달해야 할 각 인자의 타입을 안내받지 못 할 경우 의도치 않은 문제가 발생할 소지가 있습니다.
```
function ellipsisText(text, limit, symbol='...') {
  return `${String(text).slice(0, limit - 1)}${symbol}`
}
```
아래 함수 실행 예시 코드를 보면 문제가 발생했음에도 오류를 표시하지 않습니다.
```
ellipsisText(100304040202, 30, 101) // 결과 값: "100304040202101"
```

JavaScript + 유효성 검사

오류를 안내하지 않는 함수는 여러 문제를 야기할 수 있으므로 함수 선언 시 다음과 같이 각 매개변수로 전달 받을 값의 유형을 검사해 문제를 해결할 수 있지만 이와 같은 검사 과정을 직접 작성하는 것을 매우 번거롭고 불편합니다.

function ellipsisText(text, limit, sybol='...') {
  if (typeof text !== 'string') throw new Error('1번째 전달인자 유형은 문자여야 함')
  if (typeof limit !== 'number') throw new Error('2번째 전달인자 유형은 숫자여야 함')
  if (typeof symbol !== 'string') throw new Error('3번째 전달인자 유형은 문자여야 함')
  return `${text.slice(0, limit - 1)}${symbol}`
}

아래 함수 실행 예시 코드는 앞서와 달리 문제가 발생 되었음을 오류가 표시합니다.

ellipsisText(100304040202, 30, 101)

//Uncaught Error: 1번째 전달인자 유형은 문자여야 함

TypeScript (비교)

TypeScript로 작성된 코드는 앞서 작성한 JavaScript 함수 코드보다 다소 복잡해보이지만, 작성 후 함수 실행 시, 컴파일 과정에서 실시간으로 타입을 검사하므로 디버깅이 쉽고 안정된 프로그램 작성을 가능하게 합니다.
```
function ellipsisText(text:string, limit:number, symbol:string = '...'):string {
  return `${text.slice(0, limit - 1)}${symbol}`
}
```
TypeScript를 사용한 선언 과정에서 설정된 타입에 의해 컴파일 과정에서 실시간으로 오류를 표시합니다.
```
**ellipsisText(10203010201, 30)

// Argument of type 'number' is not assignable to parameter of type 'string'.**
```