Use Vue 2 with TypeScript to prevent directly changing Props in a class-based component using vue-property-decorator

Question

Use Vue 2 with TypeScript to prevent directly changing Props in a class-based component using vue-property-decorator

Is there a way to declare a Prop using vue-property-decorator in a class-based component without the need to initialize it?

Currently, I'm facing a dilemma:

If I don't provide an initializer, TypeScript throws an error during compilation:

"TS2564 (TS) Property 'parentData' has no initializer and is not definitely assigned in the constructor."

On the other hand, if I do initialize the property, VueJS issues a warning at runtime:

"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders."

The current solution works, but dealing with the warning is bothersome and leaves me wondering if there's a better approach:

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { Client } from '../../../../domainmodels/client';

@Component({})
export default class SearchLocationsComponent extends Vue {

     @Prop() 
     parentData: Client = new Client();

}


My dependencies:   
"devDependencies": {
    "@types/webpack-env": "^1.13.0",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^3.0.0",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.7",
    "vue": "^2.2.2",
    "vue-loader": "^11.1.4",
    "vue-property-decorator": "^5.0.1",
    "vue-router": "^2.3.0",
    "vue-template-compiler": "^2.2.2",
    "webpack": "^2.2.0",
    "webpack-cli": "^3.3.2",
    "webpack-hot-middleware": "^2.12.2"   
}

typescript vue.js

Answer 1

Answer №1

If you do not set a value for a property during the construction phase, it is important to explicitly state that it may be undefined:

parentData: Client | undefined;

To assign a default value for a member decorated with @Prop, make sure to use the decorator's default parameter:

@Prop({ default: () => new Client}) 
parentData: Client | undefined;

Alternatively, although not recommended, you can include

"strictPropertyInitialization": false

in your TypeScript compiler options.

Update 1:

The best solution for such scenarios is to utilize the definite assignment assertion modifiers, which were introduced in TypeScript 2.7. By combining this with default initialization using the Prop decorator, you should be able to solve the issue:

@Prop({ default: () => new Client }) 
parentData!: Client;

Answer 2

If you do not set a value for a property during the construction phase, it is important to explicitly state that it may be undefined:

parentData: Client | undefined;

To assign a default value for a member decorated with @Prop, make sure to use the decorator's default parameter:

@Prop({ default: () => new Client}) 
parentData: Client | undefined;

Alternatively, although not recommended, you can include

"strictPropertyInitialization": false

in your TypeScript compiler options.

Update 1:

The best solution for such scenarios is to utilize the definite assignment assertion modifiers, which were introduced in TypeScript 2.7. By combining this with default initialization using the Prop decorator, you should be able to solve the issue:

@Prop({ default: () => new Client }) 
parentData!: Client;

Answer 3

Answer №2

Perhaps I am a tad tardy, but if you're utilizing Vue with Typescript, it might be beneficial to opt for PropSync over Prop from the vue-property-decorator.

For instance, instead of:

@Prop() propArrayName!: type[];

You could use:

@PropSync('propArrayName', { type: Array }) _localArrayVariable!: type[];

This approach helps prevent mutation using Prop() and computes the prop instead... further details can be found here:

https://github.com/kaorun343/vue-property-decorator#-propsyncpropname-string-options-propoptions--constructor--constructor---decorator

Answer 4

Perhaps I am a tad tardy, but if you're utilizing Vue with Typescript, it might be beneficial to opt for PropSync over Prop from the vue-property-decorator.

For instance, instead of:

@Prop() propArrayName!: type[];

You could use:

@PropSync('propArrayName', { type: Array }) _localArrayVariable!: type[];

This approach helps prevent mutation using Prop() and computes the prop instead... further details can be found here:

https://github.com/kaorun343/vue-property-decorator#-propsyncpropname-string-options-propoptions--constructor--constructor---decorator

Use Vue 2 with TypeScript to prevent directly changing Props in a class-based component using vue-property-decorator

Answer №1

Answer №2

Similar questions

The error message "SyntaxError: Cannot use import statement outside a module" popped up while working with discord.js, typescript, heroku

Styling your Vuetify V-data-table with CSS

Cleve js does not include delimiters in its date output

Creating a new element in the DOM when a button is clicked using Angular 2+

Get rid of the TypeScript error in the specified function

Uploading images with Laravel and VueJS

Introducing the concept of type-specific name inclusion

Transform a standard array of strings into a union string literal in TypeScript

What steps can be taken to display the English translation if the desired translation is not found in the designated language file?

Removing a child component in Vue along with its state

Iterating variables in Vue.js is reminiscent of the process in AngularJS

Tips for getting the sum of an array using the reduce method in Vue.js and returning the result array

When utilizing destructuring in React.js with TypeScript, incorrect prop values are not being alerted as expected

Leveraging Vue js components while utilizing it from a content delivery network (CDN

Issue with Vue Loading Overlay Component functionality in nuxt2 .0

Tips for adding an extensive collection of fixed attributes to a function using Typescript

What is the best way to retrieve an object within a class?

Creating an Http interceptor in Ionic 3 and Angular 4 to display a loading indicator for every API request

The Vue 3 page does not allow scrolling unless the page is refreshed

There has been a mistake: The module '.... ode_modules erser-webpack-plugindistindex.js' cannot be found. Please ensure that the package.json file contains a correct "main" entry