Estoy tratando de definir este tipo de objeto.
colors: { text: "#343D48", // body color and primary color text_secondary: "#02073E", // secondary body color heading: "#565F67", // primary heading color heading_secondary: "#0F2137", // heading color background: "#FFFFFF", // body background color background_secondary: "#F9FBFD", // secondary background color border_color: "#E5ECF4", // border color primary: "#78F0AC", // primary button and link color secondary: "#29CC5F", // secondary color - can be used for hover states muted: "#7B8188", // muted color dark: "#343D48", accent: "#609", // a contrast color for emphasizing UI yellow: "#F6C416", error: "#F65241", // highlight a background color for highlighting text modes: { dark: { text: "#fff", background: "#000", primary: "#0cf", secondary: "#09c", muted: "#111", }, }, },Esto es lo que escribí hasta ahora, no estoy seguro de cómo definir objetos anidados con TypeScript. ¿Cómo defino el tipo para el código anterior? Esto es lo que tengo hasta ahora:
export type Color = { [colorName: string]: string; };En su definición de tipo actual, tiene lo siguiente:
export type Color = { [colorName: string]: string; };El código anterior es lo mismo que decir:
export type Color = Record<string, string> En su lugar, debe definir claramente cada campo en la definición de tipo. La definición de un Record especifica el tipo de clave y el tipo de valor para el objeto, pero no especifica el nombre de cada clave o el tipo de cada valor (en caso de que algunas claves tengan otro tipo de datos).
En este caso, usted está buscando una interfaz:
export interface ColorDefinition { text: string; text_secondary: string; heading: string; heading_secondary: string; background: string; background_secondary: string; border_color: string; primary: string; secondary: string; muted: string; dark: string; accent: string; yellow: string; error: string; modes: { dark: { text: string; background: string; primary: string; secondary: string; muted: string; }; }; } export type { ColorDefinition }; De la misma manera, también puede usar el type para definir una interfaz:
type ColorDefinition = { primary: string; ... } export type { ColorDefinition };Si desea escribir esta interfaz (ya que tiene pares clave-valor repetidos) correctamente, escribiría su definición de tipo como tal:
interface SimpleColorDefinition { text: string; background: string; primary: string; secondary: string; muted: string; } interface UIColorDefinition extends SimpleColorDefinition { text_secondary: string; heading: string; heading_secondary: string; background_secondary: string; border_color: string; dark: string; accent: string; yellow: string; error: string; modes: { dark: SimpleColorDefinition; }; } Si desea que la clave de modes sea un objeto con cualquier valor para los nombres de clave, puede hacer esto en su lugar:
modes: Record<string, SimpleColorDefinition>