0

Contexto

Hola, estoy creando una interfaz llamada UseChartProps que como su nombre lo indica, son los props que va a recibir un hook de React (específicamente NextJS), es esta:

export type ChartOptions = 'bar' | 'doughnut' | 'line' | 'pie' | 'polarArea' | 'radar';

export interface UseChartProps {
  type: ChartOptions;
  labels: (string | number)[];
  datasets: ChartDataset<ChartOptions, number[]>[];
  config: {
    width: string;
    horizontal?: boolean;
    heigth?: string;
    titleSize?: number;
    onClick?: (label: string | number, value: number) => any;
    labelsDisplay?: boolean;
  };
}

Problema

Pasa que todavía no he creado la interfaz que necesito, ¿Por qué? pues porque necesito que el compilador reconozca lo siguiente: según el valor que se introduzca en la propiedad type será el tipo de la propiedad datasets, me explico:

Si yo en type introduzco "bar" el tipo de la propiedad datasets debe de ser ChartDataset<"bar", number[]>[]

Soluciones que no me han servido

He tratado de crear la interfaz como un type en vez de una interface de esta manera:

type example {
  type: 'bar'
  datasets: ChartDataset<'bar', number[]>[];
  //demás propiedades...
} | {
  type: 'doughnut'
  datasets: ChartDataset<'doughnut', number[]>[];
  //demás propiedades...
} | {
  //y así sucesivamente
}

Pero eso tampoco me ha funcionado, el compilador me sigue dando error en una parte de mi código porque datasets sigue asiendo alusión a ChartOptions en vez de hacer alusión según lo que ponga en la propiedad type

También intenté algo como esto, porque pensé que podía funcionar pero no:

export interface UseChartProps {
  type: ChartOptions;
  labels: (string | number)[];
  //                     aquí está el cambio
  datasets: ChartDataset<UseChartProps['type'], number[]>[];
  config: {
    width: string;
    horizontal?: boolean;
    heigth?: string;
    titleSize?: number;
    onClick?: (label: string | number, value: number) => any;
    labelsDisplay?: boolean;
  };
}

No sé qué hacer y estoy un tanto desesperado porque es de un proyecto y no quiero estancarme en esto. Gracias de antemano.

Anexo de fotos de lo que dice el compilador con el primer código (el original, el primer código que sale en esta pregunta). Editor de código

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": "src",
    "paths": {
      "@cmpnts/*": ["components/*"],
      "@fcns/*": ["functions/*"],
      "@interfaces/*": ["interfaces/*"],
      "@hooks/*": ["hooks/*"],
      "@styles/*": ["styles/pages/*"],
      "@config/*": ["config/*"],
      "@context/*": ["context/*"],
      "@utils/*": ["utils/*"]
    }
  },
  "exclude": ["node_modules"],
  "include": ["**/*.ts", "**/*.tsx"]
}

1 respuesta 1

0

Agrégale un tipo a la interfaz:

export interface UseChartProps<ChartOptions> {
  type: ChartOptions;
  labels: (string | number)[];
  datasets: ChartDataset<ChartOptions, number[]>[];
  config: {
    width: string;
    horizontal?: boolean;
    heigth?: string;
    titleSize?: number;
    onClick?: (label: string | number, value: number) => any;
    labelsDisplay?: boolean;
  };
}

Y luego la usas así:

let objeto: UserChartProps<'bar'>;
2
  • 1
    La sintaxis sería: UseChartProps<T extends ChartOptions>. De la forma en la que está ahora mismo podrías pasarle cualquier tipo arbitario a la interfaz y no un tipo específico de ChartOptions Commented el 6 ene. 2022 a las 16:59
  • @JoseHermosillaRodrigo efectivamente, es como dices, muchas gracias a los dos Commented el 6 ene. 2022 a las 19:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.