[이펙티브 타입스크립트] Item1: 타입스크립트와 자바스크립트의 관계

item1.md

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

TL; DR

• 자바스크립트 코드를 작성할때도 타입체커는 유용하다.
• 타입스크립트로 코드를 작성하게 되면, 코드의 의도를 분명하게하고 타입체커를 이용해 훨씬 더 많은 오류를 찾아낼 수 있다.

---

타입스크립트는 자바스크립트의 상위집합(super set)이다. 따라서 모든 자바스크립트 코드는 타입스크립트코드이지만 그 반대는 성립하지 않는다.

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

타입스크립트 컴파일러가 자바스크립트 프로그램에도 유용한 이유

1. 자바스크립트 프로그램에서 런타임에 발생할 수 있는 오류를 미리 찾아낸다.

const city = 'new york'
console.log(city.toUppercase()) // 런타임에러를 발생시키는 코드. 타입체커가 오류로 표시

한계: 런타임에 발생할 수 있는 모든 오류를 찾아내지는 못한다.

const states = [{name:"정자"}]
console.log(states[1].name) // 런타임에러를 발생시키는 코드. 타입체커가 오류로 표시하지 않음

2. 오류를 발생하지는 않지만 의도와 다르게 동작하는 코드를 찾아낸다.

const states = [{name:"정자"}]
console.log(states[0].nome) // 에러를 발생시키진 않지만 타입체커가 오류로 표시

const a = [] + 3 // 에러를 발생시키진 않지만 타입체커가 오류로 표시
alert('hello', 'world') // 에러를 발생시키진 않지만 타입체커가 오류로 표시

한계: 오류를 발생하지는 않지만 의도와 다르게 동작하는 모든 코드를 찾진 못한다

const states = [{name:"정자"}, {nome:"미금"}]
states.forEach(state => console.log(state.name)) // 에러를 발생시키진 않지만 의도와 다르게 동작해도 타입체커가 오류로 표시하지 않음

const x = 2 + '3' // 에러를 발생시키진 않지만 의도와 다르게 동작해도 타입체커가 오류로 표시하지 않음

타입스크립트로 프로그램을 작성하게 되면

위에서 말한 1, 2의 장점을 자연스럽게 가지게 되고,

타입스크립트 프로그램은 타입을 추가하므로 코드의 '의도’가 무엇인지 알려줄 수 있다.(자바스크립트 프로그램의 2번의 한계를 개선)

interface State {name:string}
const states: State[]= [{name:"정자"}, {nome:"미금"}] // 타입체커가 오류로 표시
states.forEach(state => console.log(state.name))

한계: 타입 체크를 통과하더라도 여전히 런타임에 오류가 발생할 수 있다.(자바스크립트 프로그램의 1번의 한계와 동일) 이유는 타입스크립트가 이해하는 값의 타입과 실제 값에 차이가 있기 때문이다. 타입 시스템이 정적 타입의 정확성을 보장해 줄 것 같지만 그렇지 않다.

interface State {name:string}
const states: State[] = [{name:"정자"}]
console.log(states[1].name) // 런타임에러를 발생시키는 코드. 타입체커가 오류로 표시하지 않음

결론

• 자바스크립트 코드를 작성할 때에도 타입체커는 유용하다.
• 타입스크립트를 사용하면 런타임 오류를 발생시키는 코드를 일부 찾아낼 수 있지만, 타입체커를 통과하더라도 런타임 오류가 발생할 수 있다.
• 타입스크립트를 사용하면 타입을 추가해서 코드의 의도를 분명하게 하고, 타입체커를 이용해 훨씬 더 많은 오류를 미리 찾아낼 수 있다.