Example code:
const routingConfig = {
routes: [
{
path: "home",
component: "HomeComponent",
},
{
path: "about",
component: 12,
},
{
path: "contact",
component: "ContactComponent",
},
],
};
const createRoutes = (config: {
routes: {
path: string;
component: string;
}[];
}) => {};
createRoutes(routingConfig);
The error message is kind of hard to read. The key problem is The 'number' is not assignable to type 'string'
, so how to make error message show close to where it's cause?
Solution 1: Inline the object:
createRoutes({
routes: [
{
path: "home",
component: "HomeComponent",
},
{
path: "about",
component: 12,
},
{
path: "contact",
component: "ContactComponent",
},
],
});
Solution 2: Extra a type
type RoutingConfig = {
routes: {
path: string;
component: string;
}[];
}
const routingConfig: RoutingConfig = {
routes: [
{
path: "home",
component: "HomeComponent",
},
{
path: "about",
component: 12,
},
{
path: "contact",
component: "ContactComponent",
},
],
};
const createRoutes = (config: RoutingConfig) => {};
createRoutes(routingConfig);
Solution 3: satisfies
const routingConfig = {
routes: [
{
path: "home",
component: "HomeComponent",
},
{
path: "about",
component: 12,
},
{
path: "contact",
component: "ContactComponent",
},
],
} satisfies RoutingConfig;