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).
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"]
}