타입스크립트 typeof, keyof와 내 프로젝트에 적용한 방식

Daisy🌼·2022년 12월 15일

typeof 연산자

TypeScript adds a typeof operator you can use in a type context to refer to the type of a variable or property (타입스크립트는 타입 컨텍스트에서 변수나 프로퍼티의 타입을 나타내기 위해 타입 컨텍스트에서 사용할 수 있는 typeof 연산자를 추가합니다.)

자바스크립트에는 이미 typeof 연산자가 존재하는데, 타입을 사용하는 환경에서 typeof 연산자를 사용하면 이를 타입으로 나타낼 수 있다.

let s = "hello"; // s의 타입은 string

// string이라고 표기하지 않고 typeof s로도 표현할 수 있다.
let n: typeof s = "world";

이를 활용하면 특정 객체를 타입으로 사용할 수 있다.

const fruit = {
	red: 'apple',
	yellow: 'banana',
  	purple: 'grape'
}

// 객체인 fruit의 프로퍼티를 전체를 타입으로 사용하겠다고 선언
type Fruit = typeof fruit

// 즉 다음과 같다.
type Fruit {
	red: string,
	yellow: string,
	purple: string
}

// fruit 객체와 똑같은 key명과 타입으로 프로퍼티를 생성해야만 한다.
const fruit2: Fruit = {
	red: 'cherry',
  	yellow: 'lemon',
  	purple: 'plum'
}

keyof 연산자

The keyof operator takes an object type and produces a string or numeric literal union of its keys. (keyof 연산자는 객체 타입을 받아 객체의 key들로 구성된 문자열 또는 숫자 유니온 타입을 생성합니다.)

keyof 연산자는 객체 타입의 프로퍼티 key를 유니온 타입으로 구성해주는 연산자이다.

// 객체 타입
type fruit = {
	red: 'apple',
	yellow: 'banana',
  	purple: 'grape'
}

// 객체 타입의 프로퍼티 key로만 구성 -> 'red' | 'yellow' | 'purple'과 동일
type Color = keyof fruit

const fruitOne: Color = 'red'
const fruitTwo: Color = 'yellow'
const fruitThree: Color = 'purple'

만약 타입이 아니라 실제 객체의 프로퍼티의 key 또는 값을 타입으로 사용하고 싶은 경우가 있다면, 해당 객체를 상수로 만들어 (타입 단언) keyof 연산자와 함께 사용할 수 있다.

✨ 객체 key를 상수 타입으로

// KR, JP보다는 알아보기 쉬운 이름으로 key명을 지어주면 해당 key로 값에 접근할 수 있다.
const countryCode = {
	korea: 'KR',
  	japan: 'JP'
} as const

// typeof는 실제 객체를 객체 타입으로 변환해주고,
// keyof는 변환된 객체 타입의 key를 유니온 타입으로 변환해준다.
type Type = keyof typeof countryCode

const 김코딩의_국적: Type = 'korea'
const 박해커의_국적: Type = 'japan'

✨ 객체 key의 값을 상수 타입으로

const countryCode = {
	korea: 'KR',
  	japan: 'JP'
} as const

type Type = typeof countryCode[keyof typeof countryCode]

const 김코딩의_국적: Type = countryCode.korea
const 박해커의_국적: Type = countryCode.japan

다른 참고 자료들을 보면, 객체의 값을 타입으로 사용할 수 있는 이쪽을 더 많이 활용하는 것 같다.

내 프로젝트에서는 어떻게 활용했을까?

Styled Components에서 활용되었다. 우선 자주 사용하는 스타일 속성들을 Theme Provider를 사용해 전역으로 관리하기 위해 theme.ts라는 파일에 속성 별로 객체를 생성했다. 그리고 typeof 연산자로 각각의 객체 전체를 객체 타입으로 만들어 내보내준다.

이 방식은 'styled components에서 typescript 사용하기' 와 같이 구글링했을 때 나오는 일반적인 방식이었던걸로 기억한다. 처음 타입스크립트를 사용해 개발할 때는 해당 개념들이 와닿지 않았는데, 다시 공부하고 실제 나의 프로젝트로 돌아와 다시 확인해보니 이제는 이해가 된다.

그런 다음 theme에서 생성한 객체의 프로퍼티 key를 props로 전달할 경우, 위에서 export한 객체 타입을 사용해 해당 props를 전달받은 해당 컴포넌트에서 파라미터의 타입을 지정할 때 활용할 수 있다. 이때 keyof 연산자를 사용해 key를 유니온 타입으로 만들었다.