[Typescript] Show the error close to where it's causes

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;