title: "$http" does not exist - TypeScript compiler error with Vuejs2 and vue-resource
body: <p>I am writing a Vue app using typescript using <code>vue-property-decorator</code> (an extension of <code>vue-class-component</code>). I am using <code>vue-resource</code> but get a compiler error when using <code>this.$http</code>: </p>
  
  <blockquote>
    <p>"Property '$http' does not exist on type ...."</p>
  </blockquote>
  
  <p>I saw a very similar issue posted at <a href="https://stackoverflow.com/questions/44615445/how-to-use-plugins-like-vue-resource-when-using-vue-js-with-typescript">How to use plugins like vue-resource when using Vue.js with Typescript?</a></p>
  
  <p>I have already been importing <code>vue-resource</code> using <code>import VueResource from 'vue-resource'</code> syntax - so this solution is not working for me.</p>
  
  <p>Here is my <code>main.ts</code></p>
  
  <pre><code>import Vue from 'vue'
  import VueResource from 'vue-resource'
  import VueRouter from 'vue-router'
  import App from './App.vue'
  import store from './store/store'
  import routes from './routes'
  
  import moment from 'moment'
  
  Vue.use(VueResource)
  Vue.use(VueRouter)
  
  Vue.filter('formatTime', function(ms) {
    const zeroTime = moment('2016-06-12 00:00:00')
  
    if (ms &gt; 3600000) {
      return zeroTime.add(ms, 'milliseconds').format('HH:mm:ss:SSS')
    } else if (ms &gt; 60000) {
      return zeroTime.add(ms, 'milliseconds').format('mm:ss:SSS')
    } else if (ms &gt; 1000) {
      return zeroTime.add(ms, 'milliseconds').format('ss:SSS')
    } else {
      return zeroTime.add(ms, 'milliseconds').format('SSS')
    }
  })
  
  Vue.filter('dateFormat', (date, format) =&gt; {
    return moment(date).format(format || 'MMMM Do, YYYY - HH:mm:ss')
  })
  
  const router = new VueRouter({ routes })
  
  new Vue({
    el: '#app',
    store,
    router,
    render: h =&gt; h(App)
  })
  </code></pre>
  
  <p>And I get the error in this file (in the <code>created()</code> method):</p>
  
  <pre><code>import { Vue, Component } from 'vue-property-decorator'
  
  import WordTyper from 'components/wordTyper'
  import Race from 'components/Race.vue'
  import Stats from 'components/stats'
  import SpeedGraph from 'components/speedGraph'
  import SaveScore from 'components/saveScoreModal'
  
  @Component({
    name: 'SinglePlayer',
    components: {
      WordTyper,
      Race,
      Stats,
      SpeedGraph,
      SaveScore
    }
  })
  export default class SinglePlayer extends Vue {
    loading: boolean = false
    saveScore: boolean = false
  
    get playing() {
        return this.$store.getters.timeElapsed
      }
  
    get finished() {
        return this.$store.getters.finished
      }
  
    created() {
      this.$store.dispatch('reset')
  
      const url = 'https://cors-anywhere.herokuapp.com/https://api.forismatic.com/api/1.0/?method=getQuote&amp;format=json&amp;lang=en'
  
      this.loading = true
  
      this.$http.get(url).then((res) =&gt; {
        if (!res.body) {
          this.loading = false
          return
        } else {
          const text = res.body.quoteText.trim()
          const source = res.body.quoteAuthor
  
          this.$store.dispatch('reset', { text, source })
          this.loading = false
        }
      }, (err) =&gt; {
        this.loading = false
      })
    }
  
    save() {
      this.$router.push('scores')
    }
  }
  </code></pre>
  
  <p>Of course, the app is working fine as intended but this compiler error still persists.</p>
  
  <p>Any insight would be very appreciated, thanks!</p>