Home > Software engineering >  Typescript | Vue3 - How a specific route param can return a array of strings?
Typescript | Vue3 - How a specific route param can return a array of strings?

Time:07-03

Consider this build error:

src/views/IndividualProgramView.vue:18:63 - error TS2345: Argument of type 'string | string[]' is not assignable to parameter of type 'string'.
  Type 'string[]' is not assignable to type 'string'.

18 const ProgramForm = () => programStore.renderProgramExercises(route.params.program);

I'm trying to find the param in this route: /program/1 using route.params.program.

How can this ever return string[] as a type?

I am then passing this value to a function which is expecting a string:

renderProgramExercises(id: string): VNode {

How can I fix this build error.

I did the following which works but I feel that is it wrong:

renderProgramExercises(id: string | string[]): VNode {

Thank you,

CodePudding user response:

A route parameter can only be an array when the route is configured with a repeatable parameter:

const router = createRouter({
  routes: [
    {
      // repeatable (0 or more)                 
  • Related