타입스크립트와 자바스크립트의 관계 이해

타입스크립트는 문법적으로도 자바스크립트의 상위집합이다.
자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이라고 할 수 있다.

하지만 문법의 오류가 아니라도 타입 체커에게 지적당할 가능성이 높다. 그러나 문법의 유효성과 동작의 이슈는 독립적인 문제이다. (타입스크립트는 여전히 작성된 코드를 파싱하고 자바스크립트로 변환할 수 있다.)

• main.js 파일을 main.ts로 바꾼다고 해도 달라지는 것이 없다...

이러한 점은 기존 코드를 그대로 유지하면서 일부분에만 타입스크립트를 적용이 가능하기 때문이며 엄청난 이점이다. (migration)

• 모든 자바스크립트 프로그램이 타입스크립트라는 명제는 참이지만, 반대는 성립하지 않음

function whoName(who: string){
  console.log(who)
}

위의 코드는 타입스크립트에서는 유효하지만, 자바스크립트를 구동하는 노드(node) 같은 프로그램으로 출력을 하면 syntaxError를 출력한다.

• :string은 타입스크립트에서 쓰이는 구문이고, 타입 구문을 사용하는 순간부터 자바스크립트는 타입스크립트 영역으로 들어간다.

• 모든 자바스크립트는 타입스크립트이지만, 모든 타입스크립트가 자바스크립트는 아니다.

타입스크립트 컴파일러는 타입스크립트뿐만 아니라 일반 자바스크립트 프로그램에도 유용하다.

let city = 'Tokyo';
console.log(city.tpUppercase());

// 코드를 실행하면 다음과 같은 오류가 발생한다.
// TypeError: city,toUppercase is not a function

앞의 코드에는 타입 구문이 없지만, 타입스크립트의 타입 체커는 문제점을 찾아낸다.

let city = 'Tokyo';
console.log(city.tpUppercase());
			// 'toUppercase' 속성이 'string' 형식에 없습니다.
			// 'toUppercase'을(를) 사용하시겠습니까?

city 변수가 문자열이라는 것을 알려 주지 않아도 타입스크립트는 초깃값으로부터 타입을 추론한다. 타입 추론은 타입스크립트에서 중요한 부분이다.

const states = [
  {name: 'Korea', capital: 'Seoul'},
  // ...
];

for(const state of states){
	console.log(state.capitol);
}

// 출력결과: undefined
// ...

앞의 코드는 유효한 자바스크립트(또한 타입스크립트)이며 어떠한 오류도 없이 실행된다. 그러나 루프 내의 capitol은 의도한 코드가 아닌것은 확실하다. 이런 경우에 타입스크립트의 타입 체커는 추가적인 타입 구문 없이도 오류를 찾아낸다.

for(const state of states){
	console.log(state.capitol);
  				// 'capitol' 속성이 ...형식에 없습니다.
  				// 'capital'을(를) 사용하시겠습니까?
}

하지만 타입스크립트가 제시한 해결책은 잘못되었다. 한곳은 capital, 다른 한곳은 capitol로 오타를 냈지만 어디가 오타인지는 판단하지 못한다. 오류의 원인을 추측할 수는 있지만 항상 정확하지는 않다. 따라서 명시적으로 states를 선언하여 의도를 분명하게 하는 것이 좋다.

interface State {
	name: string;
  capital: string;
}

const states = [
  {name: 'Korea', capitol: 'Seoul'},
  				// 개체 리터럴은 알려진 속성만 지정할 수 있지만 'State' 형식에 'capitol'이(가) 없습니다. 'capital'을(를) 쓰려고 했습니까?
  
for(const state of states){
  console.log(state.capital);
}
];

이제 오류가 어디서에 발생했는지 찾을 수 있고, 제시된 해결책도 올바르다. 의도를 명확하게 해서 타입스크립트가 잠재적 문제점을 찾을 수 있게 했다.

요약

• 타입스크트는 자바스크립트의 상위집합니다. 모든 자바스크립트 프로그램은 이미 타입스크립트 프로그램이다. 하지만 반대로, 타입스크립트는 별도의 문법을 가지고 있기 때문에 일반적으로 유요한 자바스크립트 프로그램은 아니다.

• 타입스크립트는 자바스크립트 런타임 동작을 모델링하는 타입 시스템을 가지고 있기 때문에 런타임 오류를 발생시키는 코드를 찾아내려고 한다. 그러나 모든 오류를 찾지는 않으며, 타입 체커를 통과하면서도 런타임 오류를 발생시키는 코드는 충분히 존재할 수 있다.