≪이펙티브 타입스크립트≫ (댄 밴더캄 지음, 장원호 옮김, 인사이트, 2021)

1장. 타입스크립트 알아보기 (아이템1 ~ 아이템 5)

1장에서는 타입스크립트의 전체적인 내용을 이해하는데 도움이 되는 내용을 다룹니다.

• 타입스크립트란?
• 자바스크립트와의 관계
• 타입스크립트의 타임에 관해
• 덕 타이핑 가능여부
• 기타 등등.

아이템1. 타입스크립트와 자바스크립트의 관계 이해하기

타입스크립트는 자바스크립트의 슈퍼 셋(Super Set, 상위 집합)입니다.

원티드 프리온보딩 챌린지 프로그램이나 다른 타입스크립트 강의에서 위의 요약문을 들었던 적이 몇 번 있었습니다. 이번 아이템1.을 통해서 이를 명확하게 이해할 수 있었습니다.

JS와 TS는 밀접하게 연결된 관계이며, TS는 문법적으로도 JS의 상위집합입니다.

문법 오류가 없는 JS 프로그램은 유효한 TS 프로그램 입니다.

반대로, JS 프로그램에 문법 오류를 포함하거나 다른 이슈가 발생했을 때에는, TS의 타입 체커에게 지적당할 가능성이 높습니다. (문법의 유효성과 동작의 이슈는 독립적인 문제)

타입체커에게 지적당하더라도, TS는 JS로 파싱하고 변환할 수 있습니다.

JS와 TS의 확장자

JS는 .js 확장자를, TS는 .ts 확장자를 사용합니다.
JS의 문법은 TS에서도 유효하므로, JS->TS로의 마이그레이션은 비교적 간단합니다. (전체 코드를 그대로 사용하고, 필요한 부분에만 TS를 적용할 수 있기 때문에)

TS 사용 예시

// 예시 1. 
let city = "Seoul"
console.log(city.toUppercase()) // toUpperCase()의 대,소문자 오류 시

위 예시 1에서, JS와 TS에서 모두 정상적인 동작을 하지는 않습니다. 하지만, JS에서는 에러를 따로 출력하지 않고, TS에서는 string 타입에는 toUppercase() 메소드가 없다는 에러를 출력하고 대안을 추천해줍니다.

이 때, city에 타입을 명시해주지 않아도, 타입 체커는 문자열(string) 타입이라는 것을 알 수 있습니다. 이때 사용되는 개념이 타입 추론입니다.
타입 체커는 위 선언문 let city = "Seoul"에서 city 변수의 타입을 string이라고 추론했습니다.

// 예시 2.
const states = [
  {name : "Jeon", hometown : "Mokpo"},
  {name : "Hwang", hometown : "Busan"},
  {name : "Lee", hometown : "Seoul"}
]

for(const state of states){
  console.log(state.hometonw) // hometown 오탈자
}

위 예시 2에서, JS에서는 각 출력 라인에 undefined를 출력할 것입니다.. 반면 TS에서는 에러를 발생시키고, 비슷한 프로퍼티명을 자동으로 찾아 추천해주어 사용자의 실수를 바로 잡아줍니다.

이와 같이 별도의 타입 구분 없이도 타입 체커는 코드 상의 오류를 지적해줄 수 있습니다.. 여기에 타입 구문을 추가한다면, 훨씬 더 많은 에러를 찾아낼 수도 있습니다.

타입 시스템의 목표

런타임에 오류를 발생시킬 코드를 미리 찾아내는 것.

타입스크립트는 정적 타입 시스템입니다.

요약

타입스크립트는 자바스크립트의 상위 집합입니다.
모든 JS 프로그램은 이미 TS 프로그램입니다. 반면, TS는 별도의 문법을 가지고 있기에, 모든 TS 프로그램이 JS 프로그램은 아닙니다.

타입스크립트는 자바스크립트 런타임 동작을 모델링하는 타입시스템을 가지고 있습니다.
따라서 런타임 오류를 발생시키는 코드를 찾아내려고 합니다. 하지만 모든 오류를 찾아내진 않습니다.

타입스크립트의 타입 시스템은 전반적으로 자바스크립트 동작을 모델링 합니다
문법이 매우 자유로운 JS에 비해, TS는 비교적 엄격한 문법을 적용합니다. 예시로, 잘못된 매개변수를 호출하는 것은 JS에서는 허용되지만 TS에서는 허용되지 않습니다.