インデックスシグネチャとkeyofの使い所について書く

[t-yng]

余白の定義を生成するときに使える

type Spaces = {
    xss: string;
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    xxl: string;
};

/**
 * 基準値を元にして余白の定義を生成する
 *
 * 1rem = 16px とした場合
 * xss: 4px
 * xs: 8px
 * sm: 12px
 * md: 20px
 * lg: 32px
 * xl: 52px
 * xxl: 84px
 *
 * @param unit 余白の基準値
 * @return 余白の定義
 */
const createSpaces = (unit: string): Spaces => {
    // コメントの px は 1rem = 16px の場合
    type Scales = { [key in keyof Spaces]: number };
    const scales: Scales = {
        xss: 0.25,
        xs: 0.5,
        sm: 0.75,
        md: 1.25,
        lg: 2,
        xl: 3.25,
        xxl: 5.25,
    };

    const spaces = Object.fromEntries(
        Object.entries(scales).map(([size, scale]) => [
            size,
            `calc(${scale} * ${unit}`,
        ]),
    );

    return spaces as Spaces;
};