组件中的类型问题“与 IntrinsicAttributes 和 OptionBuilder 类型没有共同的属性”和 `vue-faceing-decorator`

Question

我最近从

vue-property-decorators

搬到了

vue-facing-decorators

。

我已经移动了大部分组件来使用

vue-facing-decorators

。

我看到很多问题。

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

例如，我的组件内的一个函数正在使用

VNode

来渲染某些内容。

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;

这就是 ActionBar 组件的样子。

<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>

这是我遇到此错误的众多地方之一。

在研究中，我发现了这些。 https://github.com/faceing-dev/vue-faceing-decorator/blob/master/src/optionBuilder.ts#L5 https://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking

目前 ExtendedVue 看起来像这样。

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
}

在上面的代码中，如果我从

vue

扩展

vue-property-decorator

，我不会再看到任何类型问题。我认为在

vue

中导入的

vue-facing-decorator

存在一些类型问题。

有人可以帮忙吗？

Answer 1

我能够解决这个问题。它要求我增加某些包裹。

1. 打字稿从

   5.0.4

   更新为

   4.4.4

   。这与将

   experimentalDecorators: true

   设置为

   false

   一起出现。使用

   stage 3

   装饰器。
2. Vue 更新到最新的

   3.4.3

   ，因为相同的

   no property

   开始在

   .tsx

   文件中弹出。

值得一看的来源：

1. https://github.com/faceing-dev/vue-faceing-decorator/discussions/101
2. NestJs 中所有装饰器的 Eslint 错误“已定义但从未使用”警告