[TIL] TypeScript에서 Record 타입 활용

 

타입 지정에 어려움이 있어 서치하던 중 Record라는 것을 발견해서 정리해보았다

"Record" 타입은 객체 타입을 정의할 때 사용된다고 한다.

 

- Record<Key, Value>

type RecordEx = Record<string, number>;

위에 예시는, RecordEx는 문자열 키와 숫자 값으로 이루어진 객체를 말한다.

string은 키의 타입이고 number는 값의 타입인 것.

 

대충 주로 이런 식으로 사용되는 것

// 사용자 정보 객체
type User = Record<"id" | "username" | "email", string>;

// 도시별 인구수
type PopulationByCity = Record<"Seoul" | "New York" | "Tokyo", number>;

 

사용자 정보객체와 도시별 인구수에 대한 데이터는

const users: User = {
  user1: { id: "1", username: "Ahri", email:"pop_star@aa.com" },
  user2: { id: "2", username: "Zoe", email:"bubble@aa.com" },
  user3: { id: "3", username: "Izreal", email:"lux@aa.com" },
};

const cityPopulations: PopulationByCity = {
  Seoul: 9720846,    
  New York: 8398748,  
  Tokyo: 13929286     
};

 

이런식으로 되어있을 것인데 이렇게 간단하게 표현이 되는 것이다.

Record를 사용하지 않고 타입을 지정하게 되었다면,

interface User {
  id: string;
  username: string;
  email: string;
// or
  [key: string]: string;
}

interface PopulationByCity {
  [key: string]: number;
}

 

이런식으로 적었을 것이다.

근데 사실 키-밸류가 이렇게 늘 같은 것도 아니고 만약에 id값이 number라면 굳이 Record를 쓰지 않아도 될 것이다

- 동일한 타입을 가진 여러 프로퍼티를 가지는 객체를 생성하거나 정의해야 할 때
- 객체의 키를 동적으로 생성하고, 해당 키와 값을 매핑할 때.

 

더 유용하게 쓰인다. 하지만 뭘 쓰든 자유!

 

동적으로 프로퍼티 생성

function createDynamicRecord(keys: string[]): Record<string, number> {
  const dynamicRecord: Record<string, number> = {};
  keys.forEach((key, index) => {
    dynamicRecord[key] = index;
  });
  return dynamicRecord;
}

const dynamicData = createDynamicRecord(["one", "two", "three"]);

// dynamicData: { one: 0, two: 1, three: 2 }

키-값 쌍을 계속 동적으로 추가할 수 있다.

이것도 마찬가지고 Record를 사용하지 않아도 되지만, 불필요한 반복은 줄일 수 있다.

 

 

키-값 변환

type InvertedRecord<T extends Record<string, any>> = {
  [K in keyof T]: K;
};

const fruitNames = {
  apple: "red",
  banana: "yellow",
  orange: "orange",
};

type InvertedFruitNames = InvertedRecord<typeof fruitNames>;

// InvertedFruitNames: { apple: "apple"; banana: "banana"; orange: "orange"; }

 

기존 객체의 키를 해당 키와 동일한 값으로 변환하는 예시이다.

• InvertedRecord 타입은 제네릭 T를 받아와서 T의 키-값 쌍을 변환
• InvertedFruitNames는 InvertedRecord를 사용하여 fruitNames 객체의 키-값 쌍을 변환한 결과를 저장하는 타입

 

이제 조금 더 익숙하게 Record를 사용할 수 있을 거 같다.