Búsqueda de sitios web

vue.js - Typescript | Vue3 - ¿Cómo un parámetro de ruta específico puede devolver un arreglo de cadenas?

Considera este error de compilación:

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);

Estoy tratando de encontrar el parámetro en esta ruta: /program/1 usando route.params.program.

¿Cómo puede esto devolver alguna vez string[] como tipo?

Entonces estoy pasando este valor a una función que está esperando una cadena:

renderProgramExercises(id: string): VNode {

¿Cómo puedo arreglar este error de compilación?

Hice lo siguiente, lo cual funciona, pero siento que está mal:

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

Gracias,

Respuesta #1

Un parámetro de ruta solo puede ser un arreglo cuando la ruta está configurada con un parámetro repetible:

const router = createRouter({
  routes: [
    {
      // repeatable (0 or more)      👇  param is `string | string[]` (empty string if param absent)
      path: '/programs/:program(\\d+)*', 

      // OR:
      // repeatable (1 or more)      👇  param is `string[]`
      path: '/programs/:program(\\d+)+',

      // OR:
      // non-repeatable (1)              param is `string`
      path: '/programs/:program(\\d+)',
      ⋮
    }
  ]
})

Para un parámetro repetible *, su tipo es string si el parámetro está ausente en la URL, o string[] de lo contrario, por lo que obtiene el valor del parámetro según su tipo:

const program = Array.isArray(route.params.program)
                  ? route.params.program[0]
                  : route.params.program;

programStore.renderProgramExercises(program);

Para un parámetro + repetible, asume que es siempre un string[], y pasa el primer elemento del arreglo:

programStore.renderProgramExercises(route.params.program[0]);

Para un parámetro no repetible, asume que siempre es un string, y usa la afirmación de tipo (palabra clave as seguida del tipo deseado):

programStore.renderProgramExercises(route.params.program as string);

Artículos relacionados