[TypeScript] 객체의 타입 정의, keyof typeof 사용법

 

1. 키(Key)와 프로퍼티(Property)

객체(Object)는 여러 개의 데이터를 하나로 묶어 표현하는 데이터 구조이다.

객체 안의 각 데이터 요소를 프로퍼티라고 부르며, 프로퍼티는 이름(키)과 값으로 구성된다.

const person = {
  name: 'Alice',
  age: 30,
  job: 'Engineer'
};

name, age, job은 key이고 Alice, 30, Engineer은 프로퍼티의 값이라고 부른다.

 

 

 

2. 타입(Type)

타입은 변수, 매개변수, 함수 등에 어떤 종류의 값이나 데이터가 들어갈 수 있는지를 명시하는 역할을 한다.

TypeScript에서는 타입을 사용하여 변수나 함수의 인자 등의 값이 어떤 형태를 가져야 하는지를 명확하게 지정할 수 있습니다.

const age: number = 25; // age 변수는 숫자(number) 타입의 값을 가짐
const name: string = 'Bob'; // name 변수는 문자열(string) 타입의 값을 가짐

 

 

 

3. 키와 값, 프로퍼티와 타입의 사용

객체의 프로퍼티는 키: 값 형태로 정의되며, TypeScript에서는 프로퍼티의 값에 해당하는 데이터 타입도 명시할 수 있다.

const person: {
  name: string,
  age: number,
  job: string
} = {
  name: 'Alice',
  age: 30,
  job: 'Engineer'
};

 

 

 

4. keyof와 typeof, 사용 예제

 

먼저 LANGDIV라는 객체를 정의해보자.

as const 는 객체의 프로퍼티의 값을 상수로 만든다.

export const LANGDIV = {
    JAVASCRIPT: '00',
    TYPESCRIPT: '01',
    PYTHON: '02',
    JAVA: '03',
    CPP: '04',
} as const;

 

LANGDIV를 이용하여 타입 A와 B를 선언해보자.

type A = typeof LANGDIV;
type B = keyof A; // type B = keyof typeof LANGDIV; 와 같다.

type A는 LANGDIV 객체의 타입을 가리킨다.

type B는 A 타입의 프로퍼티 이름(key) 중 하나를 나타내는 타입을 가리키게 된다. 

 

아래의 코드가 이해가 되는가? 

type C = (typeof LANGDIV)[B];

1. (typeof LANGDIV)
(typeof LANGDIV)는 LANGDIV 객체의 타입을 나타낸다.
즉, LANGDIV의 프로퍼티 이름(키)와 해당 값의 타입을 가지고 있는 타입이다.

 

2. [B]
B는 keyof A 에서 정의한 타입이다. 이는  LANGDIV 객체의 key 중 하나를 가리키는 타입이다.

 

3. (typeof LANGDIV)[B]
즉, 이 코드는 B 타입에 해당하는 프로퍼티 값을 나타내는 타입이다.
B가 'PYTHON'이라면 (typeof LANGDIV)['PYTHON')은 '02'가 된다.

 

따라서 type C는 '00' | '01' | '02' | '03' | '04' 와 같은 유니온 타입을 가지게 된다. 

LANGDIV 객체의 프로퍼티 값들을 모두 포함하는 타입이 되는 것이다. 

 

 

 

5. 예제 확장

export const LANGDIV = {
    JAVASCRIPT: '00',
    TYPESCRIPT: '01',
    PYTHON: '02',
    JAVA: '03',
    CPP: '04',
} as const;
export type LANGUAGE = keyof typeof LANGDIV;
export type LANGUAGE_NUM = (typeof LANGDIV)[keyof typeof LANGDIV];

이렇게 타입을 선언해준 상황이라고 할 때 아래의 코드를 어떻게 바꿔줄 수 있을까?

 

<option
 key={item.num}
 value={item.num}
 disabled={ (dev?.front && ['03', '04'].includes(item.num)) }
>

먼저 이 코드의 문제점은 '03', '04'가 가독성이 떨어진다는 데에 있다.

개발자들은 이 코드를 보고 기획안을 따로 찾아봐야만 03과 04의 의미가 JAVA와 CPP 라는 것을 알게 될 것이다.

 

아래와 같이 선언한 타입을 이용한다면 이 코드의 가독성을 크게 향상시킬 수 있다.

<option
 key={item.num}
 value={item.num}
 disabled={ (dev?.front && ['JAVA', 'CPP'].includes(item.num as LANGUAGE)) }
>

아래의 코드도 물론 동작한다. 기존 코드보다는 as LANGUAGE_NUM 을 활용해줌으로써 가독성과 안정성이 향상되었다고 볼 수 있다.

<option
 key={item.num}
 value={item.num}
 disabled={ (dev?.front && ['03', '04'].includes(item.num as LANGUAGE_NUM)) }
>