If you are concerned about the specific keys, you can designate them as a union of string literal types:
type ThemeKeys = "white" | "black" | "grey" | "ligthGrey" |
"headerBackground" | "headerWhite" | "redError" |
"greenSuccess" | "yellow" | "orange" | "peach" | "pink"
| "purpleLight" | "purple" | "violet" | "blue";
Then, create ThemeColors
as a mapped type over those keys with the property type of string
:
type ThemeColors = { [P in ThemeKeys]: string };
This will display as:
/* type ThemeColors = {
white: string;
black: string;
grey: string;
ligthGrey: string;
headerBackground: string;
headerWhite: string;
redError: string;
greenSuccess: string;
yellow: string;
orange: string;
peach: string;
pink: string;
purpleLight: string;
purple: string;
violet: string;
blue: string;
} */
You can also achieve this using Record<ThemeKeys, string>
with the Record
utility type.
If you are not concerned about the keys and simply want to define that the properties are always strings, you can use an index signature like:
type ThemeColors = { [k: string]: string };
This is equivalent to Record<string, string>
, as explained in other answers to this question.
Playground link to code