typescript keyof

const spaces = {
  xxxs: "xxxs",
  // 4px
  xxs: "xxs",
  // 8px
  xs: "xs",
  // 12px
  sm: "sm",
  // 16px
  md: "md",
  // 24px
  lg: "lg",
  // 32px
  xl: "xl",
  // 48px
  xxl: "xxl",
  // 72px
  xxxl: "xxxl",
  // 96px
} as const;

export default Object.freeze(spaces);

import React from "react";
import Spacing from "../../foundation/Spacing";

interface ColorProps {
  hexCode: string;
  width?: keyof typeof Spacing;
  height?: keyof typeof Spacing;
}

const Color: React.FC<ColorProps> = ({
  hexCode,
  width = Spacing.sm,
  height = Spacing.sm,
}) => {
  const className = `dse-width-${width} dse-height-${height}`;
  return (
    <div
      className={className}
      style={{
        backgroundColor: hexCode,
      }}
    ></div>
  );
};

export default Color;

• keyof operator : keyof + 타입에서 타입의 키를 Union 타입으로 변환한 타입
  • https://www.typescriptlang.org/docs/handbook/2/keyof-types.html

e.g.

type Point = { x: number; y: number };
type P = keyof Point; // "x" | "y"