Question

我用TypeScript创建了一个vue组件，并且在data()和methods()中遇到了这个错误：

Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {},
{}, {}, Readonly<Record<never, any>>>'.

例如：

33:18 Property 'open' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.
    31 |         methods: {
    32 |             toggle: function () {
  > 33 |                 this.open = !this.open
       |                  ^
    34 |                 if (this.open) {
    35 |                     // Add click listener to whole page to close dropdown
    36 |                     document.addEventListener('click', this.close)

使用this.close()的任何时间也会显示此错误。

这是组件：

<script lang='ts'>
    import Vue from 'vue';
    import axios from 'axios'
    export default Vue.extend({
        data: function () {
            return {
                open: false
            }
        },
        computed: {
            profilePath: function () {
                return "/user/" + this.$store.state.profile.profile.user.id
            }
        },
        methods: {
            toggle: function () {
                this.open = !this.open
                if (this.open) {
                    // Add click listener to whole page to close dropdown
                    document.addEventListener('click', this.close)
                }
            },
            close: function () {
                this.open = false;
                document.removeEventListener('click', this.close)
            }
        }
    })
</script>

是什么导致此错误？它似乎仍在开发中并带有错误，但是当我部署到生产环境时，它们会引起问题。

Answer 1

您需要以正确的方式使用function来保留对此的引用。

methods: {
            toggle() {
                this.open = !this.open
                if (this.open) {
                    // Add click listener to whole page to close dropdown
                    document.addEventListener('click', this.close)
                }
            },
            close() {
                this.open = false;
                document.removeEventListener('click', this.close)
            }
        }

Answer 2

我收到以下错误： Property 'doThisInput' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

而且还doThisClick给出了同样的错误。

解决方案： 我已将 declaration 添加到组件中。

<script lang="ts">
  import Vue from 'vue';

  // Add below code sample to your component
  declare module 'vue/types/vue' {
    interface Vue {
      fields: Field[];
      doThisClick: () => void;
      doThisInput: () => void;
    }
  }

  export default Vue.extend({
    name: 'form-builder',
    data() {
      return {
        fields: [
          {
            name: 'name',
            events: { click: this.doThisClick, input: this.doThisInput },
          },
        ],
      };
    },
    methods: {
      doThisClick(field: Field): void {
        console.log('click', field, event);
      },
      doThisInput(field: Field): void {
        console.log('Input', field, event);
      },
    },
  });
</script>

Answer 3

这似乎是由于使用this.$store来计算profilePath的返回值，加上其声明中未指定的返回类型而引起的。

一种解决方法是将返回类型指定为string：

profilePath: function(): string {

已在macOS Mojave上使用Vue CLI 3.7.0通过npm run serve和npm run build进行了验证

GitHub demo

Answer 4

如Vue文档的Typescript Support部分所述：

由于Vue声明文件的循环性质，TypeScript可能难以推断某些方法的类型。出于这个原因，您可能需要在诸如render之类的方法上的返回值类型和计算类型中的方法添加注释。

在您的情况下，应将profilePath: function () {更改为profilePath: function (): string {

如果具有不带: VNode批注的返回值的render（）方法，则可能会遇到相同的错误。

Answer 5

此处描述了相同的问题 https://www.gitmemory.com/issue/vuejs/vue/9873/485481541

由于TS 3.4.x存在问题，3.9.6现在对我来说非常好

Answer 6

临时解决方案是降级到以前的版本，直到此问题得到修复。将 vuter 版本降级到 0.26.0 并且可以正常工作。

Answer 7

试试这个：

(this as any).open

这也适用于注入的属性：

(this as any).injectedProp

和$refs：

(this as any).$refs.myElement

编译器可以显示警告，但可以工作

Answer 8

我在使用 VS Code 编辑器时遇到了这个错误。

我已经在 vs code 上安装了 Vetur 插件，Vetur 将 vue 文件处理为 typescript 文件，所以我已经修复它以编辑 settings.json 文件

.vscode/settings.json

"vetur.experimental.templateInterpolationService": false

Answer 9

对于遇到此问题的任何人。我在使用打字稿时看到它爬了几次。我不确定这是 vue-tsc 还是其他问题，但这是解决 linter 警告/错误的解决方案。（它可能发生在 Vue 之外，但那是我见过的地方。我相信解决方案对于任何其他库/框架都是相同的。）

通常问题看起来像这样......

TS2339: Property 'title' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

解决方案是定义一些类型，以便 Vue 知道要在组件中定义的内容。

示例：

interface IData {
  title: string;
}
interface IProps {

}
interface IComputed {

}
interface IMethods {
 
}

定义组件

export default Vue.extend<IData, IMethods, IComputed, IProps>({
   data() {
      title: "Some title"
   }
});

另请注意，传递类型参数的顺序很重要。顺序遵循 DMCP（数据、方法、计算、道具）。

希望这会有所帮助。如果有人有任何其他具体问题，请给我发电子邮件。我的电子邮件也在我的 Github 上。

属性'XXX'在类型'CombinedVueInstance <vue，{}，=“” {}，=“” {}，=“” readonly <record <never，=“” any =“” >>>'上不存在

9 个答案:

示例：

定义组件