Struggling to determine the appropriate TS interface for route links in Vue 3 + Typescript application.
I have a shared component that displays toast messages, which can contain internal and external links.
The HTML structure is as follows:
// Displaying toast messages using v-for loop
{{ toast.message }}
<button
class="my-button-class"
tag="a"
:to="toast.external_url">
{{ toast.call_to_action }}
</button>
Here is the current Typescript definition for these toast messages, allowing for the use of internal_url or external_url:
import type { RouteRecord } from 'vue-router';
export interface Toast {
message: string;
call_to_action: string;
external_url?: string;
interal_url?: RouteRecord; // The issue lies here
}
The challenge lies in defining the correct TS interface for internal_url.
Neither RouteRecord nor RouteLocation from the Vue Router docs seem to be fitting. An example usage scenario would be:
addToast({
message: 'Someone viewed your profile',
call_to_action: 'Review',
internal_url: { name: routeNames.profile, query: { id: current_user.id }}
}
I initially thought RouteLocation was the right choice, but it also leads to errors.
An error sample when using RouteLocation:
Type internal_url is missing the following properties from type 'RouteLocation': matched, fullPath, hash, redirectedFrom, and 3 more.