打字稿 | Vue3 - 特定的路由参数如何返回字符串数组？

Question

考虑这个构建错误：

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

我试图找到这条路线中的参数：/program/1使用route.params.program.

这怎么能string[]作为一种类型返回呢？

然后我将此值传递给需要字符串的函数：

renderProgramExercises(id: string): VNode {

我该如何修复这个构建错误。

我做了以下工作，但我觉得这是错误的：

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

谢谢你，

Answer 1

当路由配置了可重复参数时，路由参数只能是数组：

\n

const router = createRouter({\n  routes: [\n    {\n      // repeatable (0 or more)        param is `string | string[]` (empty string if param absent)\n      path: \'/programs/:program(\\\\d+)*\', \n\n      // OR:\n      // repeatable (1 or more)        param is `string[]`\n      path: \'/programs/:program(\\\\d+)+\',\n\n      // OR:\n      // non-repeatable (1)              param is `string`\n      path: \'/programs/:program(\\\\d+)\',\n      \xe2\x8b\xae\n    }\n  ]\n})\n

\n

对于*-repeatable 参数，string如果 URL 中不存在该参数，则其类型为string[]其他类型，因此根据其类型获取参数值：

\n

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

\n

对于-repeatable 参数，假设它始终+是a ，并传递第一个数组元素：string[]

\n

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

\n

对于不可重复的参数，假设它始终是 astring，并使用类型断言（as关键字后跟所需的类型）：

\n

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

\n