[모던 리액트 Deep Dive] 1장. 리액트 개발을 위해 꼭 알아야 할 자바스크립트

1.7 선택이 아닌 필수, 타입스크립트

동적 언어인 자바스크립트에서 런타임에만 타입을 체크할 수 있는 한계를 극복해 더욱 안전하게 작성하면서도 잠재적인 버그도 크게 줄일 수 있는 기회를 얻을 수 있음

1.7.1 타입스크립트란?

• TypeScript is JavaScript with syntax for types
  • 기존 자바스크립트 문법에 타입을 가미한 것
• 자바스크립트는 기본적으로 동적 타입의 언어이기 때문에 대부분의 에러를 코드를 실행했을 때만 확인할 수 있다는 문제점
• 동적 타입 언어라는 점은 개발자에게 자유를 주기도 하지만 코드의 규모가 커질수록 오히려 발목을 잡는 경우도 많음
• 타입스크립트는 타입 체크를 정적으로 런타임이 아닌 빌드 타입에 수행할 수 있게 해줌
  • 모든 함수와 변수에 이러한 타입 확인 연산자인 typeof를 적용해서 체크하는 것은 너무 번거롭고 코드의 크기를 과도하게 키움
  • 인수가 객체라면 내부 프로퍼티에 대해 모두 체크할 것인가?

function test(a: number, b: number) {
    return a / b
}

test('안녕하세요', '하이')

• 타입스크립트는 자바스크립트의 슈퍼셋으로서 함수의 반환 타입, 배열, enum 등 기존에는 사용하기 어려웠던 타입 관련 작업들을 손쉽게 처리할 수 있음
  • 어디까지나 타입스크립트는 자바스크립트의 슈퍼셋일 뿐이지, 자바스크립트에서 불가능한 일은 타입스크립트에서도 마찬가지로 불가능
• @types/react 라이브러리의 등장으로 타입스크립트에서 Flow에서 제공하는 수준으로 매끄럽게 리액트 코드 작성 가능

1.7.2 리액트 코드를 효과적으로 작성하기 위한 타입스크립트 활용법

• 타입스크립트는 얼마나 타입을 엄격하게, 그리고 적극적으로 활용하느냐에 따라 효용성에 큰 차이를 보임

any 대신 unknown를 사용하자

• 처음 작성할 때 저지르는 실수 중 하나 : any를 자주 사용
  • any는 정말 불가피할 때만 사용해야 하는 타입
  • any를 사용한다는 것은 사실상 타입스크립트가 제공하는 정적 타이핑의 이점을 모두 버리는 것

function doSomething(callback: any) {
    callback()
}

// 타입스크립트에서 에러가 발생하지 않는다. 그러나 이 코드는 실행 시 에러가 발생한다.
doSomething(1)

🔖 doSomething은 callback을 인수로 받는데 이 타입이 any로 돼 있어서 실제로 함수가 아닌 값이 들어가도 타입스크립트가 에러를 발생시키지 않음

• any는 자바스크립트에서 타입스크립트로 넘어가는 과도기와 같은 정말로 예외적인 경우에만 사용하는 것이 좋음
• 타입을 단정할 수 없는 경우 : unknown 사용
• unknown은 모든 값을 할당할 수 있는 이른바 top type으로, 어떠한 값을 할당할 수 있음

function doSomething(callback: unknown) {
    callback() // 'callback' is of type 'unknown'
}

 

🔖 callback은 unknown, 즉 아직 알 수 없는 값이기 때문에 사용할 수 없다는 내용
🔖 unknown으로 선언된 변수를 사용하기 위해서는 type narrowing, 즉 타입이 원래 의도했던 대로 적절히 좁혀야 함

function doSomething(callback: unknown) {
    if (typeof callback === 'function') {
        callback()
        return
    }
    
    throw new Error('callback은 함수여야 합니다.')
}

•