FE/리뷰

[모던 리액트 딥다이브] 1.7장 타입스크립트

따봉치치 2024. 6. 29. 14:06
728x90

타입스크립트란
  • 기존 자바스크립트 문법에 타입을 가미한 것
  • 동적 타입인 자바스크립트와 달리 정적으로 빌드 타임에 타입 체크를 수행함
  • 즉, 자바스크립트의 슈퍼셋으로서 함수의 반환 타입, 배열, enum 등 기존에는 사용하기 어려웠던 타입 관련 작업들을 손쉽게 처리함
  • 리액트에서도 @types/react 라이브러리를 제공해 타입스크립트로 코드를 안정적으로 작성 가능함

 

 

타입스크립트 활용법
  • any 대신 unknown 사용하기
    • any 타입은 정말 불가피할 때만 사용해야 하는 타입
    • any를 사용하는 것은 타입스크립트가 제공하는 정적 타이핑의 이점을 모두 버리게 되는 것
    • 불가피하게 아직 타입을 단정할 수 없는 경우 unknown을 사용하는 것이 좋음
    • unknown은 모든 값을 할당할 수 있는 top type이지만 type narrowing 필요
    • 추가적으로 bottom type인 never이 있음 => 주로 리액트에서 어떠한 props도 받을 수 없도록 처리할 때 사용함
/* any 사용 */
function doSomething(callback : any) {
	callback()
}

doSomething(1) // 타입스크립트에서 에러가 발생하지 않지만 실행 시 에러가 발생함


/* unknown 사용 */
function doSomething(callback : unknown) {
	if(typeof callback === 'function') { // type narrowing 필요
    	callback()
    	return
    }
    
    throw new Error('callback은 함수여야 합니다')
    	
}

doSomething(1)

 

  • 타입 가드를 적극 사용하기
    • 타입을 좁히는 데 도움을 주는 것
    • 조건문과 함께 타입 가드를 사용하면 타입을 효과적으로 좁힐 수 있어 조금 더 명확하게 변수나 함수를 사용 가능함
    • instance of
      • 지정한 인스턴스가 특정 클래스의 인스턴지인지 확인할 수 있는 연산자
    • typeof
      • 특정 요소에 대해 자료형을 확인하는 연산자
    • in
      • property in object로 사용됨
      • 어떤 객체에 키가 존재하는지 확인하는 연산자
      • 타입에 여러 가지 객체가 존재할 수 있는 경우 유용함
interface Student {
	age : number
    score : number
}

interface Teacher {
	name : string
}

function doSchool(person : Studen | Teacher) {
	if('age' in person) {
    	person.age
        person.score
    }
}

 

  • 제네릭
    • 함수나 클래스 내부에서 단일 타입이 아닌 다양한 타입에 대응할 수 있도록 도와주는 도구
    • 제네릭을 사용하면 타입만 다른 비슷한 작업을 하는 컴포넌트를 단일 제네릭 컴포넌트로 선언해 간결하게 작성할 수 있음
    • 리액트에서 제네릭을 사용할 수 있는 코드는 useState
function getFirstAndLast<T>(list : T[]) : [T,T] {
	return [list[0], list[list.length-1]]
}

const [first, last] = getFirstAndLast([1,2,3,4,5])

const [first, last] = getFirstAndLast(['a','b','c','d','e'])

 

  • 인덱스 시그니처
    • 객체의 키를 정의하는 방식
    • 키에 원하는 타입을 동적으로 부여 가능함 => 지양할 것..
/* 객체의 키를 좁히는 방법 */

// record를 사용
type Hello = Record<'hello' | 'hi', string>

const hello : Hello = {
	hello : 'hello',
    hi : 'hi'
}

// 타입을 사용한 인덱스 시그니처
type Hello = { [key in 'hello' | 'hi'] : string}

 

  • Record<Key, value>를 사용하면 객체의 타입에 각각 원하는 키와 값을 넣을 수 있음
  • 인덱스 시그니처에 타입을 사용하면 객체를 원하는 형태로 최대한 좁힐 수 있음

 

 

덕 타이핑(duck typing)
  • 자바스크립트는 다른 언어에 비해 객체가 열려 있는 구조로 만들어져 있어 덕 파이핑으로 객체를 비교해야 함
  • 덕 타이핑이란, 객체의 타입이 클래스 상속, 인터페이스 구현 등으로 결정되는 것이 아니고 어떤 객체가 필요한 변수와 메서드만 지니고 있다면 그냥 해당 타입에 속하도록 인정해 주는 것을 의미
  • 타입스크립트의 핵심 원칙은 타입 체크를 할 때 그 값이 가진 형태에 집중함
  • 따라서 타입스크립트도 자바스크립트처럼 객체의 타입에 열려있는 특징을 맞춰줘야 하기 때문에 객체의 키에 포괄적으로 대응하기 위해 string[]으로 타입을 제공하는 것
728x90