vue-tsx-support icon indicating copy to clipboard operation
vue-tsx-support copied to clipboard

Computed property fails to infer type (Property does not exist on type CombinedVueInstance)

Open Maxim-Mazurok opened this issue 2 years ago • 0 comments

Consider this example:

import * as tsx from "vue-tsx-support";
import { VApp } from "vuetify/lib";

type RouterTab = {
  name: string;
  path: string;
};

const topLevelMenuItems = {
  dashboard: {
    name: "Dashboard",
    path: "/dashboard",
  },
  settings: {
    name: "Settings",
    path: "/settings",
  },
} as const;

const getActiveRouteItem = <T extends { [key: string]: RouterTab }>(tabs: T, defaultTabKey: keyof T): keyof T => {
  return defaultTabKey;
};

export default tsx.component({
  name: "App",
  computed: {
    activeTopLevelMenuItem() {
      return getActiveRouteItem(topLevelMenuItems, "dashboard");
    },
    activeTopLevelMenuItemComponent(): string {
      return topLevelMenuItems[this.activeTopLevelMenuItem].name;
    },
  },
  render() {
    return <VApp></VApp>;
  },
});

It works fine.

But, if I remove explicit type declaration from computed property - it'll start failing:

-activeTopLevelMenuItemComponent(): string {
+activeTopLevelMenuItemComponent() {
Property 'activeTopLevelMenuItem' does not exist on type 'CombinedVueInstance<Vue & { _tsx?: DeclareProps<{} & {}> | undefined; }, unknown, unknown, unknown, Readonly<unknown>>'.
Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ readonly dashboard: { readonly name: "Dashboard"; readonly path: "/dashboard"; }; readonly settings: { readonly name: "Settings"; readonly path: "/settings"; }; }'.

Basically, now it pretends that it doesn't know that activeTopLevelMenuItem computed property exists.

What is funny, is that if I try to use it before the return statement - it works fine and recognises it just fine:

activeTopLevelMenuItemComponent() {
  console.log(this.activeTopLevelMenuItem); // works, TS knows that it's `(property) activeTopLevelMenuItem: "dashboard" | "settings"`
  return topLevelMenuItems[this.activeTopLevelMenuItem].name; // doesn't work `Property 'activeTopLevelMenuItem' does not exist on type 'CombinedVueInstance...`
},

Maxim-Mazurok avatar Apr 14 '22 03:04 Maxim-Mazurok