[이펙티브 타입스크립트] 아이템 1 - 타입스크립트와 자바스크립트의 관계 이해하기

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

• 타입스크립트는 문법적으로 자바스크립트의 상위집합이다.
  • 자바스크립트 프로그램에 문법 오류가 없다. = 유효한 타입스크립트 프로그램
  • 자바스크립트 프로그램에 이슈 발생 시, 문법 오류가 아니더라도 타입 체커에서 지적당할 가능성이 있다.
  • .js 파일에 있는 코드는 이미 타입스크립트라고 할 수 있다. 때문에 자바스크립트 코드를 타입스크립트로 마이그레이션할 때 좋다.
• 역은 성립하지 않는다. 타입스크립트가 타입을 명시하는 추가적인 문법을 가지기 때문이다.

function greet(who: string) {
  console.log('Hello', who);
}

🔍 타입스크립트 컴파일러 with 타입 체커

타입스크립트의 주요한 동작은 '컴파일' 단계에서 사전 타입 오류를 '타입 체커(TypeChecker)'를 통해서 체크하여 '런타임' 동작에 발생하는 오류에 대해 사전에 찾아낸다. 그리고 타입스크립트 언어는 최종적으로 자바스크립트 언어로 변환되어 런타임 환경에서 동작한다. 단, 컴파일 단계에서 타입스크립트의 '타입 체커'로 해당 문제점을 찾더라도 '런타임' 단계에서 오류없이 지나갈 수 있다. (자바스크립트 내에서 문법 오류가 아니라고 판단하여 런타임 환경에서 수행될 수 있다)

• 타입스크립트는 자바스크립트로 컴파일되며, 실행 역시 타입스크립트가 아닌 자바스크립트로 이루어진다.

• 타입스크립트는 자바스크립트 런타임 동작을 모델링하는 타입 시스템을 가지고 있기 때문에 런타임 오류를 발생시키는 코드를 찾아내려고 한다.

  • 타입스크립트가 '정적' 타입 시스템이라는 것이 바로 이런 특징을 말하는 것이다.
  • 타입 체커가 모든 오류를 찾아내지는 못한다. 타입 체커를 통과하면서도 런타임 오류를 발생시키는 코드는 충분히 존재할 수 있다.

• 타입스크립트는 초기값으로부터 타입을 추론한다.

let city = 'new york city';
console.log(city.toUppercase());	// toUpperCase()에서 대소문자 오타 발생

//🚨'toUppercase' 속성이 'string' 형식에 없습니다. 'toUpperCase'을(를) 사용하시겠습니까?

//💡city의 타입을 string으로 추론하고 있다.

• 의도와 다르게 동작하는 코드를 감지한다.

const states = [
  {name: 'Alabama', capital: 'Montgomery'},
  {name: 'Alaska', capital: 'Juneau'},
  {name: 'Arizona', capital: 'Phoenix'},
  // ...
];
for (conat state of states) {
  console.log(state.capitol);	// capital에서 오타 발생
}
//🚨'capitol' 속성이 ... 형식에 없습니다. 'capital'을(를) 사용하시겠습니까?

//💡자바스크립트 실행 시 undefined로 나올 뿐 문제가 되지는 않지만, 타입스크립트는 의도한 코드가 아닌 오류를 찾아낸다.

interface State {
  name: string;
  capital: string;
}
//💡단, 타입스크립트는 어느 쪽이 오타인지 분간을 못하므로 타입 선언을 통해 명확하게 하면 좋다.

const states:State[] = [
  {name: 'Alabama', capitol: 'Montgomery'}, // capital에서 오타 발생
  {name: 'Alaska', capitol: 'Juneau'},      // capital에서 오타 발생
  {name: 'Arizona', capitol: 'Phoenix'},    // capital에서 오타 발생
  // ...
];
for (conat state of states) {
  console.log(state.capital);
}

• 위의 내용들을 통해 벤다이어그램에 새로운 영역을 추가할 수 있다.
  - 모든 자바스크립트는 타입스크립트이지만, 일부 자바스크립트(그리고 타입스크립트)만 타입 체크를 통과한다.
  

🤔 타입스크립트 채택하는 게 좋을까?

• 자바스크립트의 런타임 동작을 모델링하는 하는 것이 타입스크립트 타입 시스템의 기본 원칙이나, 의도치 않은 이상한 코드가 오류로 이어질 수 있다는 점을 고려해야 한다.

const a = null + 7;
const b = [] + 12;
alert('Hello', 'TypeScript');

//💡모두 런타임 오류가 발생하지 않는 코드이나, 타입 체커는 문제라고 표시한다.

• 타입 체커가 모든 오류를 찾아내지는 못한다. 타입 체커를 통과하면서도 런타임 오류를 발생시키는 코드는 충분히 존재할 수 있다.

const names = ['Alice', 'Bob'];
console.log(names[2].toUpperCase());

//💡타입 체크를 통과해도 런타임에 오류가 발생한다.

• 결론!!! 순전히 여러분들의 선택!

💡 결론

• 타입스크립트는 자바스크립트의 상위 집합이다.
• 타입스크립트는 타입 시스템을 통해 런타임 오류를 발생시키는 코드를 찾아내려고 한다. 그러나 모든 오류를 찾지는 못한다.
• 타입스크립트가 허용하는 문법의 엄격함은 취향 차이이다.

📖 참고 내용 출처

https://adjh54.tistory.com/39