Access to this.location: Property 'location' does not exist

[abdonrd]

The docs says that we can access to this.location to get the route parameters: https://vaadin.github.io/vaadin-router/vaadin-router/#/classes/Router/demos/demo/index.html

And it works.

But when using TypeScript, I get an error:

Property 'location' does not exist

[vlukashov]

Looks like an interface or a mixin is missing that would make all router-added properties and callbacks known to TypeScript.

What do you think of a syntax like below?

class PageHome extends RouterView(LitElement) {
  ...
}

[abdonrd]

Makes sense!

[abdonrd]

Any news here? Thanks in advance! 😄

[ruanxianzhi]

Having this problem too, any update?

[platosha]

Hi everybody, here is a PR that adds View TypeScript mixin class together Lifecycle interface: https://github.com/vaadin/vaadin-router/pull/426

with this change, for using this.location you would have to merge your class with Router.View:

import {Router} from '@vaadin/router';

class MyView extends HTMLElement {
  connectedCallback() {
    this.location;
  }
}
interface MyView extends Router.View {}

Also, inline casting could be used if merging is not desired:

import {Router} from '@vaadin/router';

class MyView extends HTMLElement {
  connectedCallback() {
    (this as Router.View).location;
  }
}

Mind that accessing this.location early before Vaadin Router sets it for the component (for instance in constructor) results in undefined. With Polymer and LitElement, though, it should work with their typical updates and rendering timing, this.location should be available by the time when first connectedCallback does initial update and rendering, for instance.

[platosha]

I have also considered a mixin function like so:

class PageHome extends RouterView(LitElement) {
  ...
}

the thing is, this compiles the function call to JS, so it requires the implementation. We could a trivial one, but I doubt that it brings any value to have this in runtime:

export const RouterView = (superClass) => superClass;