使用 TypeScript 在 React 中导出颜色答案

【问题标题】：Exporting Colors In React using TypeScript使用 TypeScript 在 React 中导出颜色
【发布时间】：2020-02-18 16:57:54
【问题描述】：

嘿，所以我正在使用带有 Typescript 的 React，并且我创建了一个颜色库来存储我们所有的颜色，以便可以通过导入 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，但我认为更容易记住哪种方式会变得更亮和更暗。

【问题讨论】：

你能修正你的标题吗？它没有提供有关该问题的任何信息。类似于“在 React 中导出颜色”的内容会提供更多信息。我来到这里期待一个关于在 TypeScript 中编写更高种类的态射的哲学问题或类似的东西......
我建议从第一个实现开始，然后再回来询问您是否有具体问题。此处解释了如何编写接口typescriptlang.org/docs/handbook/interfaces.html - 查看您的 80: "xy" 属性的索引类型部分。
对不起标题，我是堆栈溢出的新手，没想到哈哈

标签： reactjs typescript interface

【解决方案1】：

你可以这样做：

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

【讨论】：

感谢这绝对让我走上正轨！唯一的问题是，无论实际存在什么，智能感知将始终显示 10-100 个选项。再次感谢，虽然这给了我一个很棒的起点，但我是新来的关于堆栈溢出的问题，如果有点草率，我很抱歉。
没问题，如果您对此有任何疑问，请再次询问。

【解决方案2】：

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

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

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

【讨论】：