Vue.js is unable to recognize this type when used with TypeScript

Question

Vue.js is unable to recognize this type when used with TypeScript

In my code snippet, I am trying to set a new value for this.msg but it results in an error saying

Type '"asdasd"' is not assignable to type 'Function'

. This issue persists both in Visual Studio and during webpack build. It seems like TypeScript is not recognizing the type correctly even though I am using Vue.extend. What could be causing this problem?

This is my tsconfig.json configuration:

{
  "compilerOptions": {
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "allowSyntheticDefaultImports": true,
  },
  "include": [
    "./ViewModels/**/*"
  ]
}

I have also removed all references to TypeScript from my .csproj file because Visual Studio was having trouble building TypeScript (and since I use webpack for building, I decided to exclude TypeScript from the project).

You can find my webpack config here: https://gist.github.com/archeg/743348021c59563a9d479993bc0c349f

visual-studio typescript webpack vue.js

Answer 1

Answer №1

If you are encountering the same problem, I found a solution by switching to

https://github.com/vuejs/vue-class-component

which resolved the issue.

Using vue-class-component, the code snippet that I previously shared will appear like this:

import Vue from "vue";
import Component from 'vue-class-component';

@Component({})
class Example extends Vue {
    msg = "Hello";
    greet(): void {
      this.msg = "asdasd"; //This is a proper here.
      return this.msg + ' world';
    }
}

Answer 2

If you are encountering the same problem, I found a solution by switching to

https://github.com/vuejs/vue-class-component

which resolved the issue.

Using vue-class-component, the code snippet that I previously shared will appear like this:

import Vue from "vue";
import Component from 'vue-class-component';

@Component({})
class Example extends Vue {
    msg = "Hello";
    greet(): void {
      this.msg = "asdasd"; //This is a proper here.
      return this.msg + ' world';
    }
}

Vue.js is unable to recognize this type when used with TypeScript

Answer №1

Similar questions

Unable to replicate the function

Can we establish communication between the backend and frontend in React JS by utilizing localstorage?

Updating the Nuxt3 editing page with useFetch and $fetch for fetching data, along with a typed storage object that prevents loading issues

The Angular Material side navigation module is not being acknowledged

Elevate your frontend development game with the powerful combination of Vue js 3

How can I transform this statement into a higher-order function that offers a resource instead of using an object for initialization and destruction?

`In NestJS Nested Schema, the @Prop decorator and mongoose options are not applied as expected

CPU usage spikes after launching a Cordova project in Visual Studio 2015 RTM

How can I use Angular2 to draw a square [input] number of times?

Performing calculations on two properties of an observable object in Angular 8 and then storing the result in a new property

Utilize dynamic inline styling to pass asset image paths as background images in Nuxt.js

Unable to bring in Angular2 bootstrap function

Unable to determine model dependency in Nest

Can callback argument types be contingent on certain conditions? For example, could argument 0 be null if argument 1 is a string?

Using Typescript to Convert JSON Data into Object Instances

Pass additional parameter while calling a function in Vue

Creating a Vue single file component in conjunction with Laravel 5.5

Share the component with css and font via npm

Having trouble importing the hash-set module in TypeScript/SystemJS?

Tips for specifying types in protractor.conf.js while utilizing the @ts-check feature