feat(types): expose ElementAttributesProperty for TSX

[andoshin11]

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Descriptions

With current type definitions, it's extremely difficult for developers to pass props to children components when writing TSX since there's no exposed property that JSX can handle as element attributes properties.

This PullRequest achieves 2 things.

• Creates new property _attrs to the ExtendedVue type so it can be used inside JSX.ElementAttributesProperty.(Examples are below)
• Transform non-required props into optional properties of props interface.

Example

Given these 2 children components...

// PrimaryButton.tsx
import Vue from 'vue'

export default Vue.extend({
  name: 'Primary Button',
  props: {
    label: {
      type: String,
      required: true as true
    },
    color: String
  },
  computed: {
    style(): string {
      return `color: ${this.color || 'blue'};`
    }
  },
  render() {
    return <button style={this.style}>{this.label}</button>
  }
})

// SecondaryButton.tsx
import Vue from 'vue'

export default Vue.extend({
  name: 'Secondary Button',
  props: ['color', 'label'],
  computed: {
    style(): string {
      return `color: ${this.color || 'blue'};`
    }
  },
  render() {
    return <button style={this.style}>{this.label}</button>
  }
})

and prepare shims-tsx.d.ts like this

// shims-tsx.d.ts
import Vue, { VNode } from 'vue'

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface ElementAttributesProperty {
      _attrs: any
    }
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

Property completion works as expected.

Type error warned as expected.

and no more errors with correct props declaration 👍

[andoshin11]

oops... fixing errors

[ktsn]

Thanks for your amazing work! I briefly looked into it and it would be so useful for TSX users!
Only thing I'm concerning is that it will make type parameters of component more complicated. I'm not sure if we can directly declare the required/optional info into Props type parameter but I think it is ideal. I'll take a look if we can simplify the type declaration more.

As a side note, in Vue v3, we can declare Props type by hand. So we may include required/optional info in Props type directly.

[skyrpex]

Any chance of this working along with https://github.com/kaorun343/vue-property-decorator? It's the only way I found to enable typehinting and autocompletion in my editor.

[skyrpex]

Maybe we can't use the @Prop decorator but use some sort of Vue.extend to define the props and then make the class component extend it (something similar to what React users need to do).

import { Vue, Component, Prop } from 'vue-property-decorator'

const YourComponentProps = Vue.props({
    propA: Number,
    propB: { type: String, default: 'default value' },
    propC: [String, Boolean],
});

@Component
export default class YourComponent extends Vue<YourComponentProps> {
    get text() {
        return `${this.propA} ${this.propB} ${this.propC}`;
    }
}

[mbostwick]

@baocancode did you see the conflicting file blocking the automated checks?

[andoshin11]

I left this PR wondering for too much time. I'll close this until Vue 3 comes along.
Thx for all of your feedbacks! much appreciated :)