자바스크립트와 타입스크립트

타입스크립트는 왜 사용하는가

문법이 비교적 자유로운 자바스크립트의 고질적인 문제는 결과를 예측하기 어렵다는 것이다.

type-check를 엄격하게 하지 않기 때문에 일반적으로 IDE에서 지원되는 compile 시점 혹은 여러 가지 프로그래밍 언어의 runtime 시점에서 발생하는 오류를 미리 알기 어렵다.

그리고 자바스크립트의 '웬만해선 작동해드림' 특성 때문에 오류가 발생했는지 알기 어렵기도 하다.

10 + '20' = '1020'
('b' + 'a' + + 'b' + 'a').toLowerCase() = 'banana' //🍌?

위와 같은 동작 하면 안 되는 코드가 잘 작동하기도 하고...

이런 이유로 Microsoft가 우리에게 타입스크립트를 하사하시었다.

타입스크립트로 프로젝트를 구성하면 위와 같은 사용법은 컴파일 단계에서 오류가 발생해서 사고를 방지할 수 있다

프로젝트 규모가 커질수록 어디서 오류가 발생할지 알기 어렵기 때문에 더욱 타입스크립트가 필요해지는 것 같다.

그런데 최근엔 타입스크립트가 너무 피곤하다고 자바스크립트로 먼저 구현하고 나서 타입스크립트로 리팩토링하기도 한다고 한다.
두 번 일하기?

---

기본 문법 비교

자바스크립트

/**
 * @param {number} a
 * @param {number} b
 * @returns a + b
 */
function sum(a, b) {
  return a + b;
}

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

타입스크립트

/**
 * @param {number} a
 * @param {number} b
 * @returns a + b
 */
function sum(a: number, b: number) {
  return a + b;
}

sum(10, '20'); //error

---

자바스크립트에서 타입스크립트와 유사하게

// @ts-check 
// 파일 상단에 위 decorator 추가
// 자바스크립트에서 타입스크립트와 유사하게 구현 가능
/**
 * @param {number} a
 * @param {number} b
 * @returns a + b
 */
function sum(a, b) {
  return a + b;
}

sum(10, '20'); //error

---

타입스크립트 구성

npm i typescript (-g)

설치할 때 -g 옵션 생략 시 typescript 빌드는 npx tsc *.ts로 실행

//tsconfig.json
{
  "compilerOptions": {
    "allowJs": true, //js 파일 사용
    "checkJs": true, //js 파일 검사
    "noImplicitAny": true //any 타입 금지
    ...
  }
}

기타 옵션에 대해서는 타입스크립트 공식 문서 참조

---

velog는 링크에 {: target="_blank"} 속성이 안 되는구나

귀찮다