javascript - Vue + Typescript - Import errors with class based decorators - Stack Overflow

admin管理员组

文章数量:1279118

I'm trying to set up Vue 3 with TypeScript and class-based ponents. However, I keep getting on error on importing the Component decorator the Vue constructor:

This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-ponent/dist/vue-class-ponent")'
has no call signatures. Vetur(2349)

mycode.vue:

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-ponent'

@Component // 1st Error '@Component'
export default class ProdItem extends Vue { // 2nd error 'Vue'
  
}
</script>

I'm trying to set up Vue 3 with TypeScript and class-based ponents. However, I keep getting on error on importing the Component decorator the Vue constructor:

This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-ponent/dist/vue-class-ponent")'
has no call signatures. Vetur(2349)

mycode.vue:

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-ponent'

@Component // 1st Error '@Component'
export default class ProdItem extends Vue { // 2nd error 'Vue'
  
}
</script>

• javascript
• typescript
• vue.js
• vuejs3

Share Improve this question Follow edited Oct 10, 2020 at 2:50 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Oct 8, 2020 at 12:46 thelandogthelandog 73411 gold badge1313 silver badges3131 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 12

You might be trying to use the example from the official vue-class-ponent docs, but that's currently for the 7x version, which can only be used with Vue 2.

Vue 3 requires vue-class-ponent 8x, which is not yet documented, but you can refer to vue-class-ponent Issue #406 that describes the changes. The notices relevant to your question:

• @Component will be renamed to @Options.
• @Options is optional if you don't declare any options with it.
• Vue constructor is provided from vue-class-ponent package.

Since your ponent has no options, you could just omit the @Options decorator from your ponent:

// BEFORE:
import Component from 'vue-class-ponent'
@Component
class {}

// AFTER:
/* no options used, so no @Options decorator needed */
class {}

Also, Vue 3 no longer exports the Vue constructor, but vue-class-ponent does, so your ponent would have to extend that instead:

// BEFORE:
import Vue from 'vue'

// AFTER:
import { Vue } from 'vue-class-ponent'

For reference, you can use Vue CLI to generate a Vue 3 + TypeScript project to play with a working example that uses the latest vue-class-ponent as described above.

With a decorator, you don't need ({}). Try

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-ponent'

@Component  // 1st Error '@Component'
export default class ProdItem extends Vue { // 2nd error 'Vue'
  
}
</script>

Based on this issue and this one you could do :

<script lang="ts">

import {vue} from 'vue-class-ponent'


export default class ProdItem extends Vue { 
  
}
</script>

本文标签： javascriptVueTypescriptImport errors with class based decoratorsStack Overflow