vue-tsx-support
vue-tsx-support copied to clipboard
Computed property fails to infer type (Property does not exist on type CombinedVueInstance)
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...`
},