Экспорт цветов в React с использованием TypeScript

Question

Привет, поэтому я использую React с Typescript, и я создал библиотеку цветов для хранения всех наших цветов, чтобы их можно было вызывать, импортировав LibraryColors, а затем, например, выполнить LibraryColors.orange.primary. Я хочу, чтобы это было легко использовать для моей команды, и поэтому я хочу дать им смысл при использовании. Я верю, что это возможно с интерфейсом, но я понятия не имею, как будет выглядеть этот интерфейс.

interface ILibraryColors{

}
const LibraryColors: ILibraryColors = {
    black: {
        primary: "#000000",
    },
    green: {
        light: {
            60: "#40C0C0",
        },
        primary: "#00AEA9",
        dark: {
            40: "#00867C",
        }
    },
    grey: {
        light: {
            80: "#fafafa",
            70: "#dddddd",
            60: "#C4C7C5",
        },
        primary: "#707373",
        dark: {
            40: "#353735"
        }
    },
    orange: {
        light: {
            60: "#FFBB11",
        },
        primary: "#FAA21B",
        dark: {
            40: "#F58220"
        }
    },
    red: {
        light: {
            60: "F15B5D",
        },
        primary: "#E63E51",
        dark: {
            40: "#BC3A4B",
        }
    },
    white: {
        primary: "#ffffff",
    },
    pink: {
        primary: "#f434ed",
    },
    purple: {
        primary: "#1E4286",
    },
    blue: {
        light: {
            60: "#6BC3E7",
        },
        primary: "#06A7E0",
        dark: {
            40: "#005DA6",
        }
    }
}

Любая помощь очень ценится, спасибо! Также я знаю, что могу забыть основной, темный и светлый и просто сделать 0-100 для цветов, но я думаю, что легче запомнить, какой путь становится светлее и темнее.

Answer 1

interface aColor {
  [key: number]: string;
}

interface oColorVariant {
  primary: string;
  light?: aColor;
  dark?: aColor;
}

interface ILibraryColors{
  [key: string]: oColorVariant;
}

Answer 2

Вы можете сделать что-то вроде этого:

interface IColor {
    [key: number]: string;
}

interface IColorVariant {
    light?: IColor;
    dark?: IColor;
    primary?: string;
}

interface ILibraryColors{
    [key: string]: IColorVariant;
}

Но если вы предпочитаете более явный вариант цвета, используйте это:

interface IColor {
    10?: string;
    20?: string;
    30?: string;
    40?: string;
    50?: string;
    60?: string;
    70?: string;
    80?: string;
    90?: string;
    100?: string;
}

interface IColorVariant {
    light?: IColor;
    dark?: IColor;
    primary?: string;
}

interface ILibraryColors{
    [key: string]: IColorVariant;
}