const defaultThemeColors = {
primary: [
"#00000010",
"#00000020",
"#00000030",
"#00000040",
"#00000050",
"#00000060",
"#00000070",
"#00000080",
"#00000090",
],
secondary: [
"#FFFFFF10",
"#FFFFFF20",
"#FFFFFF30",
"#FFFFFF40",
"#FFFFFF50",
"#FFFFFF60",
"#FFFFFF70",
"#FFFFFF80",
"#FFFFFF90",
]
};
type ColorNums = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
type ThemeColors = {
[x in keyof typeof defaultThemeColors]: string;
};
// "primary" | "secondary"
這就是我能夠做到的：
type PrimaryType = `primary${ColorNums}`;
// "primary1" | "primary2" | "primary3" | "primary4" | "primary5" | "primary6" | "primary7" | "primary8" | "primary9"
但是，我想用數字迭代主題顏色并期望這樣的回報：
"primary1" | "primary2" | "primary3" | "primary4" | "primary5" | "primary6" | "primary7" | "primary8" | "primary9" | "secondary1" | "secondary2" | "secondary3" | "secondary4" | "secondary5" | "secondary6" | "secondary7" | "secondary8" | "secondary9"
有什么辦法嗎？可以使用映射型別和模板文字型別來完成嗎？
uj5u.com熱心網友回復：
你很親密。你只需要對屬性的名稱做同樣的事情，就像你對ColorNums:
type ColorNames = `${keyof typeof defaultThemeColors}${ColorNums}`;
游樂場鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/419744.html
標籤：
下一篇：如何在反應打字稿中使用React.ChangeEventHandler<HTMLInputElement>獲取輸入值