Transitioning to Vue 3 has introduced a change where prop types are now classified

During the process of migrating the application from Vue 2 to Vue 3 by following this guide: , I encountered an issue related to Props and their types. All props were marked as type unknown by the linter, even though no errors were shown in the template itself.

For example, I have a prop called "cancelText" defined like this:

cancelText: {
            type: String as PropType<string>,
            default: "",
        },

And then I used this prop inside a computed property like this:

cancelButtonText(): string {
            return this.cancelText || this.$t("PRODUCT.ACTION_BAR.BACK");
        },

When hovering over the variable, the type is shown correctly, indicating that it understands the type: https://i.sstatic.net/R6KPQ.png

However, when serving the application, I encountered this error in the terminal:

TS2322: Type 'unknown' is not assignable to type 'string'.

https://i.sstatic.net/ddjaV.png

It seems like either some package is not compatible or certain linting rules need to be updated specifically for Vue 3.

Here are the dependencies being used:

    "dependencies": {
    // List of dependencies
},
"devDependencies": {
    // List of dev dependencies
},

And the ESLint rules being followed:

module.exports = {
// Configuration for ESLint rules
},

Answer №1

Attempt

Execute this.$t("<key>") and store as a string

When transitioning to Vue 3, it is recommended to utilize composition/vue as numerous plugins have ceased to support outdated APIs like this.$t, including vue-auth3 and vue-i18n

Answer №2

Uninstall the 'fork-ts-checker-webpack-plugin' plugin

from the webpack configuration

replace it with:

config.plugins.delete('fork-ts-checker').end()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for finding GitHub users with a specific string in their name by utilizing the GitHub API

I'm looking to retrieve a list of users whose usernames contain the specific string I provide in my query. The only method I currently know to access user information is through another endpoint provided by the GitHub API, which unfortunately limits t ...

typescript's JSON.stringify function includes internal fields but omits public interface values

I'm currently grappling with some confusion surrounding serialization in TypeScript using JSON.stringify and interfaces. My goal is to create an export format for serializing certain objects back to their server-side representation, focusing solely on ...

Why is it that the HttpClient constructor in Angular doesn't require parameters when instantiated through the constructor of another class, but does when instantiated via the 'new' keyword?

I am trying to create a static method for instantiating an object of a class, but I have encountered a problem. import { HttpClient } from '@angular/common/http'; export MyClass { // Case 1 public static init(): MyClass { return this(new ...

Break free/Reenter a function within another function

Is there a way to handle validation errors in multiple task functions using TypeScript or JavaScript, and escape the main function if an error occurs? I am working in a node environment. const validate = () => { // Perform validation checks... // ...

Storing Vuex updates for multiple tabs - Tips and tricks

I am encountering an issue with my Vue app that uses Vuex. When I have multiple tabs open, any changes made to the store in one tab do not reflect in the other. Is there a way to ensure that the store/data is synchronized instantly across all tabs? const ...

Node corrupting images during upload

I've been facing an issue with corrupted images when uploading them via Next.js API routes using Formidable. When submitting a form from my React component, I'm utilizing the following functions: const fileUpload = async (file: File) => ...

Incorporating lodash in a project with TypeScript and jspm

I seem to be missing something in my setup and would appreciate any assistance. I am working with TypeScript 2 + JSPM. I have tried various configurations in tsconfig using typeRoots and types (including adding the version number in the type name). Despite ...

Guide on executing .ts script file and building angular 5 with NPM

I am facing an issue with running a file that has a .ts extension before executing npm run build to build my Angular 5 project. package.json "scripts": { "ng": "ng", "start": "ng serve", "compile": "npm-run-all myts build", "myts": "ts-no ...

Breaking down large reducer into smaller reducers

I am currently working on a feature reducer (slice reducer) called animals. My goal is to separate these reducers into categories such as mammals, birds, fishes, and more. Initially, I thought this would be a smooth process using the ActionReducerMap. How ...

Discover the data type of a class attribute's accessor methods in TypeScript

Since TypeScript 4.3 introduced the ability for class properties to have getters and setters of different types since 4.3, I am unsure how to correctly retrieve the types of a property's getter and setter. === Since a class property is treated as a ...

Debugger for Visual Code unable to locate URL in Microsoft Office Add-in

I recently installed the Microsoft Office Add-in Debugger VS code extension, but I'm having trouble getting it to work despite following the instructions. Every time I try, an error message pops up: https://i.sstatic.net/h2FYs.png Upon inspecting my ...

Converting a JSON array into a TypeScript array

Looking to convert a JSON array into a TypeScript variable array. The JSON data retrieved from http://www.example.com/select.php: { "User":[ {"Name":"Luca M","ID":"1"}, {"Name":"Tim S","ID":"2"}, {"Name":"Lucas W","ID":"3"} ...

A Error occurs if ReactQuill is used without defining the document object

Recently, I embarked on a journey with both next.js and ReactQuill. However, upon running yarn build, an unexpected obstacle arose: info Creating an optimized production build - info Compiled successfully - info Linting and checking validity of types - in ...

The React Native Flatlist encountered an error due to a mismatch in function overloads

I'm currently working on a React Native app using Typescript, and I've encountered an issue with the Flatlist renderItem function. As someone who is new to both Typescript and React Native, I received the following error message: No overload ma ...

The Nuxt3 application is experiencing technical issues when running in production

My app performs well in development mode when using "npm run dev". However, once I build it with "npm run build" and then launch it with "npm run start", it starts to malfunction. Specifically, the dynamic styles that control whether a button should be d ...

Steps to displaying the result

new Vue({ data: { folders : [{ name : 'folder1', isActive : 1, }, { name : 'folder2', isActive : 0, }, ] } } }) Is there a way to access the active val ...

Turning Elasticsearch JSON data into interactive links using Vue.js

Hello everyone! I'm currently working on setting up a search engine using elasticsearch, node.js, express, and vue.js. My goal is to have the search results display as clickable links, however, they are only showing as non-clickable HTML text. I' ...

Is there a method to initiate a 'simple' action when dispatching an action in ngrx?

Here's the scenario I'm facing: When any of the actions listed below are dispatched, I need to update the saving property in the reducer to true. However, currently, I am not handling these actions in the reducer; instead, I handle them in my ef ...

The module located at "c:/Users//Desktop/iooioi/src/main/webapp/node_modules/rxjs/Rx" does not have a default export available

I am currently delving into the realm of RxJs. Even after installing rxjs in package.json, why am I still encountering an error that says [ts] Module '"c:/Users//Desktop/iooioi/src/main/webapp/node_modules/rxjs/Rx"' has no default export ...

Mapping a TypeScript tuple into a new tuple by leveraging Array.map

I attempted to transform a TypeScript tuple into another tuple using Array.map in the following manner: const tuple1: [number, number, number] = [1, 2, 3]; const tuple2: [number, number, number] = tuple1.map(x => x * 2); console.log(tuple2); TypeScript ...