Reactjs 使用TypeScript导出React中的颜色

嘿，我正在使用React with Typescript，我创建了一个颜色库来存储我们所有的颜色，这样就可以通过导入LibraryColor然后执行LibraryColor.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，但我认为这样更容易记住哪种颜色会变得越来越亮。

你可以这样做：

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;
}

---

你能确定你的头衔吗？它没有提供关于这个问题的任何信息。类似于“在React中导出颜色”的内容会提供更多信息。我来这里是想问一个哲学问题，关于用打字机脚本或类似的东西来编写更高级的态射……我建议从第一个实现开始，然后回来问你是否有具体的问题。这里解释了如何编写接口-看看80:“xy”属性的索引类型部分。很抱歉这个标题，我是堆栈溢出新手，没有想到这会让我走上正确的轨道！唯一的问题是intellisense将始终显示10-100个选项，而不管实际存在什么。再次感谢，虽然这给了我一个很棒的起点，但我对堆栈溢出问题还不太熟悉，所以如果有点草率，很抱歉。没问题，如果您对此有任何问题，请再次提问。

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

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

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