[JS] 타입스크립트의 Record 타입

import {makeRandomCard} './data'
const card = makeRandomCard()
const uuid = card['uuid'] // 색인 연산자로 객체의 'uuid' 속성값 얻기

자바스크립트는 색인 연산자 []를 사용하여 객체의 속성값을 얻을 수 있다. 이러한 형태의 코드는 속성 이름을 잘못 작성하는 실수를 일으킬 수 있다. 또한 이런 오류는 코드가 실행되기 전에는 알 수 없다.

이 때문에 타입스크립트는 기본으로 객체의 속성값을 색인 연산자로 얻을 수 없게 한다. 대신 Record 타입을 제공한다.

 

Record 타입

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

• K: 객체의 키 타입을 지정한다. keyof any는 모든 가능한 키 타입을 의미한다. (예: string, number, symbol)
• T: 각 키에 매핑될 값의 타입을 지정한다.

예제

객체 선언

// 문자열 키와 숫자 값을 갖는 객체
const scores: Record<string, number> = {
  alice: 85,
  bob: 92,
  charlie: 88
};

// 특정 문자열 리터럴 키와 숫자 값을 갖는 객체
type Names = 'alice' | 'bob' | 'charlie';
const scores: Record<Names, number> = {
  alice: 85,
  bob: 92,
  charlie: 88
};

// 중첩된 Record 타입을 사용하여 복잡한 객체 구조를 정의
interface Address {
  city: string;
  postalCode: string;
}

const addresses: Record<string, Address> = {
  home: { city: 'Seoul', postalCode: '12345' },
  office: { city: 'Busan', postalCode: '67890' }
};

상태 관리 예제

// 타입 선언
import type {Action} from "redux";
import {List} from "../commonTypes";
export * from '../commonTypes'

export type State = Record<string, List>

export type AddListAction = Action<'@listEntities/add'> & {
    payload: List
}

export type RemoveListAction = Action<'@listEntities/remove'> & {
    payload: string
}

export type Actions = AddListAction | RemoveListAction

// 리듀서 선언
import type * as T from './types'

const initialState: T.State = {}

export const reducer = (state: T.State = initialState, action: T.Actions) => {
    switch (action.type) {
        case "@listEntities/add":
            return {...state, [action.payload.uuid]: action.payload}
        case "@listEntities/remove": {
            const newState = {...state}
            delete newState[action.payload]
            return newState
        }
    }
    return state
}