core icon indicating copy to clipboard operation
core copied to clipboard

Dynamic slot using v-for with typescript implicitly has type 'any'

Open Moonlight63 opened this issue 3 years ago • 14 comments

Version

3.2.28

Reproduction link

github.com

Steps to reproduce

  • Clone the repo,

  • open folder in VSCode,

  • I have included a dev container that npm installs pnpm and vuenext and the volar extension,

  • once in dev container (or on host if you prefer) run pnpm install

  • Optionally run pnpm dev to start vite and open the page to see the rendered table.

What is expected?

For Typescript to not return an error.

What is actually happening?

Typescript is returning an error in (src/components/tabletest/Table.vue) line 84:

https://github.com/Moonlight63/temp-vue-typescript-bug/blob/e723dcd5905bb84f23dd67da3a15f3c465db4ae3/src/components/tabletest/Table.vue#L84

The error is:

'column' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

'column' is created by a v-for loop over a computed property of columns. The type should be inferred, and it normally is. This error only appears when I use any property of column to set the name of the slot dynamically.


I initially thought this was just an eslint error, so I opened an issue with the eslint vue plugin that has more info with pictures: https://github.com/vuejs/eslint-plugin-vue/issues/1773

Also worth noting. The component renders perfectly fine and everything works as expected, with the exception that in the app where I am actually using this functionality my build configuration won't allow the error. Because the error is occurring in the template, I can't just assert the type or otherwise tell typescript to ignore that line (that I know of).

Moonlight63 avatar Jan 24 '22 02:01 Moonlight63