Add warning for illegal initializers for props

I have component

import { Vue, Prop, Component } from 'av-ts'

@Component({name: 'best-girl'})
class BestGirl extends Vue {
  @Prop name:string = "Asuka"
  @Prop isBest:boolean = true
}

I try to use it:

<best-girl @click="hello" girl="Rem" :isBest="false"/>

I get error:

Uncaught TypeError: Cannot create property 'type' on string 'Asuka'

We can trace the error back to prop.ts:

Component.register(PROP_KEY, function(proto, instance, options) {
  let propKeys: string[] = proto[PROP_KEY]
  let props = options.props = options.props || createMap()

  for (let key of propKeys) {
    let prop: PropOptions = {}
    if (instance[key] != null) {
      prop = instance[key]
      delete instance[key]
    }
    // refill type if not existing, do we need this?
    if (!prop.type) { // Error happens here because we can't set .type on numbers, booleans and strings
      prop.type = getReflectType(proto, key)
    }
    props[key] = prop
  }
  options.props = props
})

I guess I should have wrapped the property in a magic p function. But that’s not really obvious. Should you not at least provide a warning that we can’t use primitive types like this, or else wrap the value in an object for the user’s sake?

[HerringtonDarkholme]

Hmm, it seems hard to do that because my test code already exploit custom p function.

The ROI is quite low for this functionality, I think.

[HerringtonDarkholme]

In general, it is not enough. Because users can pass custom objects to props. To tell a real prop returned by p from others we need an additional field, say for example ‘someWeirdPropertyNameOnlyPFunctionReturn’ or return an object we can check with instanceof, that’s one more overhead.