facing-dev/vue-facing-decorator

Getting type error when using component with VNode "has no properties in common with type IntrinsicAttributes & OptionBuilder"

git-bhanu opened this issue · 1 comments

git-bhanu commented

I have recently moved away from vue-property-decorators to vue-facing-decorators.

I have moved most of the components to use vue-facing-decorators.

I am seeing a lot of issues saying.

TS2559: Type { class: string[]; } has no properties in common with type IntrinsicAttributes & OptionBuilder

For instance, a function inside my component is using VNode to render something.

import { VNode } from 'vue';
import { ActionBar } from '../action-bar';


@Component({
  components: {
    ...,
    ActionBar,
    ...,
  },
  directives: {
    ...,
  },
})
export default class ColorPicker extends ExtendedVue {


// method where this is passed.
return (
  <div class={[`${cssPrefix}__picker-cont`]}>
      <ActionBar class={['flexbox__flex-none']}> // this line has issue - TS2559: Type { class: string[]; } has no properties in common with type IntrinsicAttributes & OptionBuilder
      </ActionBar>
  </div>
) as VNode;

This is how ActionBar Component looks like.

<template><!-- eslint-disable max-len -->
  <div :class="['action-bar', 'flexbox']">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-facing-decorator';
import { ExtendedVue } from '../extended-vue';

@Component({})
export default class ActionBar extends ExtendedVue {
}
</script>

This is one of the many places where I am getting this error.

On research, I found these.
https://github.com/facing-dev/vue-facing-decorator/blob/master/src/optionBuilder.ts#L5
https://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking

Currently the ExtendedVue looks like this.

import { Component, Vue } from 'vue-facing-decorator';
// import { Options, Vue } from 'vue-property-decorator';

/* eslint max-classes-per-file: ["error", 2] */

/** used only in vue-shim.d.ts for typing */
export class ExtendedVueShim extends Vue {
  protected __attr_props__?: any; // eslint-disable-line
  [index: string]: any;
}

@Component({})
export class ExtendedVue extends Vue {
  protected __attr_props__?: any; // eslint-disable-line
}

In the above code, If I extend vue from vue-property-decorator I don't see any more type issues. I think there is some type issue with vue that is being imported here in vue-facing-decorator.

Can someone help ?