I am migrating my Vue.js ponents to TypeScript. Following the guide, I tried to use Vue.extend() for my ponent. My ponent is:

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 reactive property
        x: 10
     };
  }

});

In above example, I have property x which is reactive and y as non-reactive property. However, I just cannot get type inference working for property y due the way augmentation works in TypeScript.

I cannot use simple object export for defining my ponent as it starts throwing a type error for both y and x.

For, now I am sticking to keeping this file as JS or move my code vue-class-ponent which enable me to handle this. However, I am reluctant to move to vue-class-ponent as it is a code at a library level.

Any solution to how I can make TypeScript happy?

I am migrating my Vue.js ponents to TypeScript. Following the guide, I tried to use Vue.extend() for my ponent. My ponent is:

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 reactive property
        x: 10
     };
  }

});

In above example, I have property x which is reactive and y as non-reactive property. However, I just cannot get type inference working for property y due the way augmentation works in TypeScript.

I cannot use simple object export for defining my ponent as it starts throwing a type error for both y and x.

For, now I am sticking to keeping this file as JS or move my code vue-class-ponent which enable me to handle this. However, I am reluctant to move to vue-class-ponent as it is a code at a library level.

Any solution to how I can make TypeScript happy?

• javascript
• typescript
• vue.js
• vuejs2

• vue-class-ponent is an official Vue library. – elclanrs Commented Jan 3, 2018 at 4:43
• I don't know much about TypeScript so my ment may be off, but why wouldn't you use puted values instead? Wouldn't that solve your reactive property case? Technically speaking it's still reactive, but it won't be on a static value. puted: { y: function () { return 20 }} – Lunfel Commented Jan 3, 2018 at 7:19

3 Answers 3

A simplest solution would be something like this:

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

however that requires you to explicitly define all properties of data.

Alternatively, you can do it with the following helper:

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

Like this:

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

One way to get rid of TypeScript errors this is by defining the following property:

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

and then just add your non-reactive properties to this object in created().

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

Another method I haven't really explored would be to create a typescript shim file for your ponent.

Solution without function wrapper

Vue.extend({
  data() {
    const reactive = {
      name: 'Jack Sparrow',
    }

    return reactive as typeof reactive & {
      nonReactiveProperty: string;
    }
  },
})