title: How to specify non-reactive instance property in Vue.js using TypeScript?
body: <p>I am migrating my <code>Vue.js</code> components to TypeScript. Following the <a href="https://v2.vuejs.org/v2/guide/typescript.html" rel="nofollow noreferrer">guide</a>, I tried to use <code>Vue.extend()</code> for my component. My component is:</p>
  <pre><code>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
       };
    }
  
  });
  </code></pre>
  <p>In above example, I have property <code>x</code> which is reactive and <code>y</code> as non-reactive property. However, I just cannot get type inference working for property <code>y</code> due the way augmentation works in TypeScript.</p>
  <p>I cannot use simple object export for defining my component as it starts throwing a type error for both <code>y</code> and <code>x</code>.</p>
  <p>For, now I am sticking to keeping this file as JS or move my code <code>vue-class-component</code> which enable me to handle this. However, I am reluctant to move to <code>vue-class-component</code> as it is a code at a library level.</p>
  <p>Any solution to how I can make <code>TypeScript</code> happy?</p>