Tips for declaring a non-reactive instance property in Vue.js with TypeScript

Question

Tips for declaring a non-reactive instance property in Vue.js with TypeScript

I am currently in the process of transitioning my Vue.js components to TypeScript. In accordance with the recommendations provided in the documentation, I attempted to utilize Vue.extend() for my component implementation. The code snippet for my component is as follows:

import Vue from 'vue';

const Component = Vue.extend({
  // type inference enabled
  
  created() {
    // `y` is non-reactive property
    this.y = 20; // TYPESCRIPT THROWS ERROR
  }
  
  data() {
     return {
        // x is a reactive property
        x: 10 
     };
  }

});

In the above example, I have declared property x as reactive and y as a non-reactive property. Despite my efforts, I encountered difficulties in getting type inference to work seamlessly for property y due to the complexities associated with augmentation in TypeScript.

The straightforward approach of using simple object export to define my component resulted in type errors being thrown for both properties x and y.

As a temporary workaround, I am maintaining this file in JavaScript or contemplating migrating my code to vue-class-component which offers better support for handling such scenarios. However, I am hesitant to make the switch to vue-class-component given that it involves introducing an additional library dependency at the project level.

If anyone has insights on how to appease TypeScript in this situation, I would greatly appreciate the guidance.

javascript typescript vue.js vuejs2

Answer 1

Answer №1

If you're looking for a straightforward approach, consider the following solution:

  data() {
     return {
        // x is reactive property
        x: 10
     } as any as { x: number; y: number };
  }

However, keep in mind that this method necessitates explicitly defining all properties of data.

Another option is to utilize the following helper function:

function withNonReactive<TData>(data: TData) {
    return <TNonReactive>() => data as TData & TNonReactive;
}

Here's how it works:

  data() {
     return withNonReactive({
        // x is reactive property
        x: 10
     })<{
        // non-reactive properties go here
        y: number
     }>();
  }

Answer 2

If you're looking for a straightforward approach, consider the following solution:

  data() {
     return {
        // x is reactive property
        x: 10
     } as any as { x: number; y: number };
  }

However, keep in mind that this method necessitates explicitly defining all properties of data.

Another option is to utilize the following helper function:

function withNonReactive<TData>(data: TData) {
    return <TNonReactive>() => data as TData & TNonReactive;
}

Here's how it works:

  data() {
     return withNonReactive({
        // x is reactive property
        x: 10
     })<{
        // non-reactive properties go here
        y: number
     }>();
  }

Answer 3

Answer №2

To eliminate TypeScript errors, a helpful approach is to declare the following property:

data() {
    return {
       nonReactive: {} as any
    }
}

Then, you can simply add your non-reactive properties to this object in the created() method.

created() {
    this.nonReactive.foo = {}
}

Another technique that I have yet to fully explore involves creating a typescript shim file specifically for your component.

Answer 4

To eliminate TypeScript errors, a helpful approach is to declare the following property:

data() {
    return {
       nonReactive: {} as any
    }
}

Then, you can simply add your non-reactive properties to this object in the created() method.

created() {
    this.nonReactive.foo = {}
}

Another technique that I have yet to fully explore involves creating a typescript shim file specifically for your component.

Answer 5

Answer №3

Alternative Approach without Using Function Wrapper


Vue.extend({
  data() {
    const dynamicData = {
      title: 'Captain Jack Sparrow',
    }

    return dynamicData as typeof dynamicData & {
      additionalProperty: string;
    }
  },
})

Answer 6

Alternative Approach without Using Function Wrapper


Vue.extend({
  data() {
    const dynamicData = {
      title: 'Captain Jack Sparrow',
    }

    return dynamicData as typeof dynamicData & {
      additionalProperty: string;
    }
  },
})

Tips for declaring a non-reactive instance property in Vue.js with TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

The sticky navbar fails to stay in place when the content becomes too lengthy

Using checkboxes in an Express application

The logs of both the frontend and backend display an array of numbers, but surprisingly, this data is not stored in the database

Unlock the secrets of creating a pop-up with qtip

The Star Rating System fails to update accurately after hiding the Radio Buttons

You do not have permission to access the restricted URI, error code: 1012

Updating state in React without providing a key prop is a common issue, especially when

I'm just getting started: an image carousel featuring a unique twist with random quote overlays, but there's a catch - it only activates on the very first image... what comes next?

Easily fetching data with AJAX through jQuery

Getting rid of an Ajax loader graphic after a period of time

Is today within the current week? Utilizing Moment JS for time tracking

Utilizing the multer Express middleware in a standalone file

Utilizing Generics in TypeScript to Expand Abstract Classes

Can default query parameters be predefined for a resource in AngularJS?

What is the method of updating content on a webpage without altering the page itself or using hashed URLs?

The scroll animation feature was not functioning properly in Next.js, however, it was working flawlessly in create react app

How to organize initial, exit, and layout animations in Framer Motion (React) tutorial?

Utilizing jQuery to retrieve data from a JSON object with a nested array

Error: Unable to load chunk.js in Angular 7

byte sequence displays as binary data (angular + express)