My function is composed to return an array of objects, while another function takes a string as input and does not return anything.
The code below functions without any errors:
import { ref } from "vue";
import { useRoute } from "vue-router";
interface RouterHelper {
children: any;
getChildrenOf: (name: string) => void;
}
export const routerHelper = (): RouterHelper => {
const route = useRoute();
const children = ref();
const getChildrenOf = (name: string) => {
children.value = route?.matched
?.find((r) => r.name === name)
?.children.filter((c) => c.alias);
};
return { children, getChildrenOf };
};
However, it requires some adjustment for accuracy. For instance, when initializing the children ref, it should be :
const children = ref([]);
Attempting this change results in the following error:
TS2322: Type 'RouteRecordRaw[] | undefined' is not assignable to type 'never[]'.
Furthermore, in the interface, I had to resort to using any instead of the correct type of [] for the children property.
As a newcomer to Typescript, I understand that my terminology might not be accurate.
Is there a way to enhance this code without relying on generic types like any?
Thank you!