Allow component prop validation of 'Array of type' in javascript

[Andrioden]

What problem does this feature solve?

Reading the documentation, searching the web and the issues list here, it seems prop validator for 'Array Of Type' dont exist.

This feature enables the following things:

• Vue out-of-box validation array of types
• Allow PyCharm and other IDE vendors to easily create type hinting based on prop type
• Allow linters to easily validate vue template according to prop type

I understand the answer might be "you should use TypeScript", but I have a fairly decently typed javascript project, and would like to try to keep it that way while praying js types will be approved in the future.

What does the proposed API look like?

Constrained by the javascript language, and your current design, these are my suggestions

import { ArrayOf, Of } from 'vue'

export default {
  props: {
     suggestionA: {
         type: ArrayOf,
         of: SomeClass
     },
     suggestionB: {
         type: Array,
         of: SomeClass
     },
     suggestionC: {
         type: Array,
         arrayOf: SomeClass
     },
     suggestionD: [Array, Of, SomeClass],
     suggestionE: ArrayOf(SomeClass)
  }
}

[Andrioden]

Related: https://stackoverflow.com/questions/55926550/vue-array-prop-jsdoc-typescript-error-in-vs-code-type-arrayconstructor-is-mis (does not work)

[Shyam-Chen]

Use validator?

[Andrioden]

A validator only satisfies 1 of 3

• ✅ Vue out-of-box validation array of types
• ❌ Allow PyCharm and other IDE vendors to easily create type hinting based on prop type
• ❌ Allow linters to easily validate vue template according to prop type

[jacekkarczmarczyk]

Use typescript?

[Andrioden]

Hehe.

I understand the answer might be "you should use TypeScript", but I have a fairly decently typed javascript project, and would like to try to keep it that way while praying js types will be approved in the future.

To add:

While i probably should use TypeScript given the current frontend ecosystem. I prefer not to as its not native to browsers, meaning it require build tools and ads complexity of debugging it in browsers. I also believe and hope we are in a transition period now where we will see this decade that either TypeScript wins, or JavaScript evolves to support typing, or a different language is used. So while waiting, I am trying to see how far I can get with javascript+jsdoc+eslint+typescript-check+IDE-help (in a project that already have alot of javascript), which is pretty far!

My understanding is that Vue aims to be very friendly to javascript (in contrast to other similar frameworks), and thereby adding support for defining array of type is within scope.

[Andrioden]

Updated suggestion list

[rocifier]

Hmm the problem is that native javascript doesn't support this either. Outside of linting what would you expect that using one of the suggested implementations would actually do? Also your second point is essentially a use-case of linting/parsing. For example when would type validation be done?

[Andrioden]

Hmm the problem is that native javascript doesn't support this either.

Yeah, my suggestions are the best i could come up with within the limitations of js.

Outside of linting what would you expect that using one of the suggested implementations would actually do? Also your second point is essentially a use-case of linting/parsing. For example when would type validation be done?

Most realistically; PyCharm then understand the type and can give code completion suggestions, as PyCharm do today for the natively supported typing, ie props: { someObj: SomeClass }

I use the typescript cli to typecheck my js(doc), it does not do any typecheck of prop usage with vue Options api. So i guess its not realistic the suggested changes here will help for anything there. But maybe some make a js(doc) lint/typechecker for vue in the future? 😎

[shamrin]

I've started a related discussion about JSDoc and defineProps() macro: https://github.com/vuejs/rfcs/discussions/584