Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue 3 Typescript Class Component - Type 'typeof import(.../node_modules/vue/dist/vue")' is not a constructor function type

Hi I'm using Vue 3 with Typescript and Class Components. I just copy-pasted the example from the docs but it looks like there is an issue with Typescript:

TS1238: Unable to resolve signature of class decorator when called as an expression.
  This expression is not callable.
    Type 'typeof import(".../node_modules/vue-class-component/dist/vue-class-component")' has no call signatures.

TS2507: Type 'typeof import(".../node_modules/vue/dist/vue")' is not a constructor function type.

The docs: https://class-component.vuejs.org/guide/class-component.html

Does anybody know what is missing? Thanks!

The Error

like image 497
Tom Avatar asked Sep 16 '20 19:09

Tom


People also ask

Does Vue 3 support TypeScript?

Now, you should be able to get your Vue app up and running in TypeScript with features like defineComponent , data, props, computed properties, methods, and watchers. Vue 3.0 includes better support for TypeScript out of the box, and the entire Vue code was rewritten in TypeScript to improve maintainability.

What is the type of a Vue component?

One important feature of Vue is the ability to use components. Components are reusable Vue instances with custom HTML elements. Components can be reused as many times as you want or used in another component, making it a child component. Data, computed, watch, and methods can be used in a Vue component.

Does Vue 2 support TypeScript?

Vue 2 already has good support for TypeScript, and the recently published Vue 2.7 backported a lot of useful features from Vue 3, like composition API, <script setup> , and defineComponent , further improving the developer experience of TypeScript in Vue.


1 Answers

Based on this issue there's no need to that decorator and the imports are different for the version 3

<template>
  <div>{{ message }}</div>
 
</template>

<script lang="ts">

import { Vue } from 'vue-class-component'


export default class HelloWorld extends Vue {
  message="Hello World"
}
</script>
like image 165
Boussadjra Brahim Avatar answered Oct 17 '22 09:10

Boussadjra Brahim