TypeScript Record와 keyof 설명

export type LocaleEntry<TCategoryDefinition extends Record<string, unknown>> = {
  [P in keyof TCategoryDefinition]?: TCategoryDefinition[P] | null;
} & Record<string, unknown>; // Unsupported & custom entries

 

1. 위의 TCategoryDefinition은 Record<string, unknown>을 상속하므로 Record 타입과 동일하게 생각하면 된다.

2. LocalEntry 타입은 key, value 타입의 일반 객체로 key의 경우는 Record에서 나온 key들을 P에 담고 있고 각 키에 대응하는 값의 타입을 값으로 한다.

3. 키가 ?가 붙어 있어 optional이다. keyof는 해당 타입, 객체의 모든 키들을 UNION하여 가져 온다. | 로 묶은 집합이다.

4 마지막 &은 앞의 정의한 타입에 덮어쓰는 부분으로 해당 부분만 예외적으로 적용된다.

 

export type ColorDefinition = LocaleEntry<{
  /**
   * Human-readable color names.
   */
  human: string[];

  /**
   * Color space names.
   */
  space: string[];
}>;

 

5. 위의 블록을 사용하는 코드로 여기서는 ColorDefinition을 정의하고 있다. LocalEntry타입으로 human: string[], space: string[]이 option이 TCategoryDefinition으로 전달되어 human, space가 optional인 타입으로 정의 된다.

 

import type { ColorDefinition } from '../../..';
import space from './space';

const color: ColorDefinition = {
  space,
};

export default color;

 

위의 코드는 ColorDefinition 을 사용하는 부분인데 ColorDefinition 타입의 color에 기본 색상 값 space: string[]를 지정하고 있다.

결국 위의 복잡한 코드로 부터 얻을 수 있는 것은 타입 safety 밖에 없다. over engineering 이지만 이런 코드가 오픈 소스에 너무 많고 이것이 기본 패턴처럼 사용된다.

 

export default [
  'Academy Color Encoding System (ACES)',
  'Adobe RGB',
  'Adobe Wide Gamut RGB',
  'British Standard Colour (BS)',
  'CIE 1931 XYZ',
  'CIELAB',
  'CIELUV',
  'CIEUVW',
  'CMY',
  'CMYK',
  'DCI-P3',
  'Display-P3',
  'Federal Standard 595C',
  'HKS',
  'HSL',
  'HSLA',
  'HSLuv',
  'HSV',
  'HWB',
  'LCh',
  'LMS',
  'Munsell Color System',
  'Natural Color System (NSC)',
  'Pantone Matching System (PMS)',
  'ProPhoto RGB Color Space',
  'RAL',
  'RG',
  'RGBA',
  'RGK',
  'Rec. 2020',
  'Rec. 2100',
  'Rec. 601',
  'Rec. 709',
  'Uniform Color Spaces (UCSs)',
  'YDbDr',
  'YIQ',
  'YPbPr',
  'sRGB',
  'sYCC',
  'scRGB',
  'xvYCC',
];