Typescript 유틸리티 타입 만들기

1
const primitiveColor: PrimitiveColorType = {
2
  base: { white: '#FFFFFF', black: '#000000' },
3
  orange: {
4
    100: '#FDF0E7',
5
    200: '#FFD8BE',
6
    300: '#FFB17F',
7
    400: '#FF9958',
8
    500: '#E8742A',
9
    600: '#B55B21',
10
  },
11
  transparent: {
12
    white0: '#FFFFFF00',
13
    white10: '#FFFFFF1A',
14
    // 생략...
15
  },
16
  // 생략...
17
} as const;
18

19
const semanticColor: SemanticColorType = {
20
  primary: {
21
    subtle: primitiveColor.orange[100],
22
    default: primitiveColor.orange[400],
23
    strong: primitiveColor.orange[500],
24
    heavy: primitiveColor.orange[600],
25
  },
26
  background: {
27
    state: {
28
      danger: primitiveColor.red[100],
29
      warning: primitiveColor.yellow[100],
30
      info: primitiveColor.blue[100],
31
      success: primitiveColor.green[100],
32
    },
33
    // 생략...
34
  },
35
} as const;
36

37
const color: ColorType = {
38
  primitive: primitiveColor,
39
  semantic: semanticColor,
40
} as const;

1
interface TextProps {
2
  className?: string;
3
  variant?: TypographyKey;
4
  color?: ColorTokenType;
5
  as?: ElementType;
6
  children: React.ReactNode;
7
}
8

9
function Text({
10
  className,
11
  variant = 'body1R',
12
  color,
13
  as = 'span',
14
  children,
15
}: TextProps) {
16
  return (
17
    <S.Text as={as} className={className} $variant={variant} $color={color}>
18
      {children}
19
    </S.Text>
20
  );
21
}

1
// 타입 정의
2
export type ColorType = {
3
  primitive: PrimitiveColorType;
4
  semantic: SemanticColorType;
5
};
6

7
export type ColorTokenType = ColorTokenPath<ColorType>;
8

9
// 사용 예시
10
<Text variant="body1R" color="semantic.text.subtle">
11
	모또와 함께라면 정산 걱정 끝!
12
</Text>

1
/**
2
 * @description
3
 * ColorTokenPath의 재귀 깊이를 줄이기 위한 유틸리티 타입
4
 */
5
type DepthDecrement = [never, 0, 1, 2, 3, 4, 5];
6

7
/**
8
 * @description
9
 * ColorType의 키의 경로를 타입으로 변환하는 유틸리티 타입
10
 * @template T - 디자인 토큰 객체 타입
11
 * @template P - 현재까지의 경로 접두사
12
 * @template D - 최대 재귀 깊이 (기본값: 5)
13
 */
14
type ColorTokenPath<
15
  T,
16
  P extends string = '',
17
  D extends number = 5,
18
> = D extends 0
19
  ? never // 무한 루프를 방지하기 위해 재귀 깊이 제한에 도달하면 종료
20
  : T extends Record<string | number, unknown>
21
    ? {
22
        [K in keyof T]: K extends string | number
23
          ? T[K] extends Record<string | number, unknown> // 객체인 경우에는 재귀적으로 호출
24
            ? ColorTokenPath<T[K], `${P}${K}.`, DepthDecrement[D]> // Decrement[D]로 깊이 감소
25
            : `${P}${K}` // 객체가 아닌 경우(leaf)에는 현재 키를 포함한 경로 반환
26
          : never; // K가 string | number가 아닌 경우는 무시
27
      }[keyof T]
28
    : never; // T가 객체가 아닌 경우는 무시

1
T extends Record<string | number, unknown>
2
? 
3
// 여기서 로직을 실행...
4
: never; // T가 객체가 아닌 경우는 무시

1
{
2
	[K in keyof T]: K extends string | number
3
	  ? T[K] extends Record<string | number, unknown> // 객체인 경우에는 재귀적으로 호출
4
		? ColorTokenPath<T[K], `${P}${K}.`, DepthDecrement[D]> // Decrement[D]로 깊이 감소
5
		: `${P}${K}` // 객체가 아닌 경우(leaf)에는 현재 키를 포함한 경로 반환
6
	  : never; // K가 string | number가 아닌 경우는 무시
7
}[keyof T]

1
export type SemanticColorType = {
2
	primary: {
3
		subtle: string;
4
		default: string;
5
		strong: string;
6
		heavy: string;
7
	};
8
	state: {
9
		danger: string;
10
		warning: string;
11
		info: string;
12
		success: string;
13
	};
14
};

1
{
2
	subtle: string;
3
	default: string;
4
	strong: string;
5
	heavy: string;
6
}

1
ColorTokenPath<T[K], `${P}${K}.`, DepthDecrement[D]>

1
{
2
  primary: 'primary.subtle' | 'primary.default' | 'primary.strong' | 'primary.heavy';
3
  state: 'state.danger' | 'state.warning' | 'state.info' | 'state.success'
4
}

1
{
2
	// 객체 내부 생략...
3
}[keyof T]

1
type ColorTokenType = 
2
	| 'primary.subtle'
3
	| 'primary.default'
4
	| 'primary.strong'
5
	| 'primary.heavy'
6
	| 'state.danger'
7
	| 'state.warning'
8
	| 'state.info'
9
	| 'state.success';

1
/**
2
 * @description
3
 * ColorTokenPath의 재귀 깊이를 줄이기 위한 유틸리티 타입
4
 */
5
type DepthDecrement = [never, 0, 1, 2, 3, 4, 5];

1
DepthDecrement[6] = 5
2
DepthDecrement[5] = 4
3
DepthDecrement[4] = 3
4
DepthDecrement[3] = 2
5
DepthDecrement[2] = 1
6
DepthDecrement[1] = 0 // 재귀 종료
7

8
ColorTokenPath<T[K], `${P}${K}.`, DepthDecrement[D]>

1
type ColorTokenPath<
2
  T,
3
  P extends string = '',
4
  D extends number = 5,
5
> = D extends 0
6
  ? never // 무한 루프를 방지하기 위해 재귀 깊이 제한에 도달하면 종료
7
  : // 로직 이어서...