Using 'title' in a Child Route causes a Type Error

[thron7]

Using 'title' in a Child Route causes a Type Error

[Haprog]

I think this is not an issue in vaadin/router but an issue in how the router is being used in the code generated from https://start.vaadin.com/ which defines:

export type ViewRoute = Route & {
  title?: string;
  icon?: string;
  children?: ViewRoute[];
};

The children?: ViewRoute[]; doesn't have the intended effect as it's not possible to override a field of a parent type/interface so simply in TypeScript. It's basically a bug in the ViewRoute definition in the application code but the TS error you get in this situation is very confusing and hard to debug.

This is why it works when you explicitly cast the type of children. I also ran into this once and then solved it by doing something like children: [ ... ] as ViewRoute[] iirc.

Just now when searching for the problem again I found this https://stackoverflow.com/questions/51591792/typescript-overwrite-a-field-from-an-extended-interface and it seems that it's possible to fix the issue without explicit casting by changing the ViewRoute definition to this (using Omit<>):

export type ViewRoute = Omit<Route, 'children'> & {
  title?: string;
  icon?: string;
  children?: ViewRoute[];
};

I just tried and using this it gets rid of the error that would otherwise happen when you add title into one of the routes under children.

[Haprog]

I created an issue about this in the private repository of start.vaadin.com. This public issue could probably be moved to https://github.com/vaadin/vaadin.com/issues

[thron7]

Ok, so one way to work around this issue is to cast the child object to ViewRoute:

{ path: 'foo',
    component: 'foo-view',
    title: 'Foo',
    children: [
       <ViewRoute>{ path: 'bar',
         component: 'bar-view',
         title: 'Bar'
       }]
  }

But why is this necessary?