vue.js - Typescript | Vue3 - Hur en specifik ruttparameter kan returnera en lista med strängar?

Tänk på detta byggfel:

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

Jag försöker hitta parametern i den här rutten: /program/1 med hjälp av route.params.program.

Hur kan detta någonsin returnera string[] som typ?

Jag skickar sedan detta värde till en funktion som förväntar sig en sträng:

renderProgramExercises(id: string): VNode {

Hur kan jag fixa detta byggfel.

Jag gjorde följande som fungerar men jag känner att det är fel:

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

Tack,

Svar #1

En ruttparameter kan endast vara en array när rutten är konfigurerad med en upprepbar parameter:

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+)',
      ⋮
    }
  ]
})

För en *-upprepbar parameter är typen antingen string om parametern saknas från URL:en, eller string[] annars, så hämta parametervärdet baserat på dess typ:

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

programStore.renderProgramExercises(program);

För en +-upprepbar parameter, anta att det alltid är en string[], och skicka det första arrayelementet:

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

För en icke-upprepbar parameter, anta att det alltid är en string, och använd typnedslagning (as-nyckelordet följt av den önskade typen):

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

Relaterade artiklar