Argthtjtr

I'm trying to call $ons methods of Onsen UI (2.11.5) in a Vue.js (2.5.17) + TypeScript (3.0.0) application.

It works fine when calling it inside the template, but it causes an error in the command line just after Compiled successfully when calling this.$ons.{method name} inside a Vue derived class.

The error is:

ERROR in /Users/max/.../src/views/TestOns.vue

Property '$ons' does not exist on type 'TestOns'. Did you mean '$on'?

But although there's a compiler error, the code works, so both alerts (1) and (2) are popped up.

<template>

  <v-ons-page>

    <app-header title="About" />

    <div class="content about">



      <!-- Next tag works fine, no errors -->

      <v-ons-button @click="$ons.notification.alert('You clicked me (1)')">

        Click me! (1)

      </v-ons-button>



      <!-- Next tag will call the method that causes an error -->

      <v-ons-button @click="clickMe2()">

        Click me! (2)

      </v-ons-button>



    </div>

  </v-ons-page>

</template>



<script lang="ts">

import { Component, Vue } from 'vue-property-decorator';



@Component

export default class TestOns extends Vue {



  private clickMe2() {

    // Next line causes a compiler ERROR, but it works nevertheless!

    this.$ons.notification.alert('You clicked me! (2)')

  }



}

</script>

And this is what I have in main.ts:

(...)

import Vue from 'vue';

import VueOnsen from 'vue-onsenui';

(...)

import 'onsenui/css/onsenui.css';

import 'onsenui/css/onsen-css-components.css';

(...)

Vue.use(VueOnsen);

(...)

I came up with a workaround binding an attribute with a call to a function on the template:

<template>

  <v-ons-page :set-ons="setOns($ons)">

  ...

</template>



@Component

export default class TestOns extends Vue {

  ...



  private ons: any = undefined;



  public setOns(ons: any): string {

      console.log(ons);

      this.ons = ons;

      return '';

  }

...

}

Then you can access by this.ons

this.ons.notification.alert('You clicked me! (2)')

You can also pass $ons as a parameter in the event, for instance, @click="clickMe($ons)".

But I'd like to know, why the compile error calling this.$ons inside the class, as told in Onsen UI documentation. And why an error if it actually works.

I found 2 satisfactory solutions:

The first one is to declare the member variable in the component. No need to init.

@Component

export default class TestOns extends Vue {

  ...

  private $ons: any;

  ...

}

The second one is to include this code anywhere in src/main.ts:

declare module 'vue/types/vue' {

  interface Vue {

    $ons: any;

  }

}

The solution described in documentation here, which didn't work for me, consists on creating a file src/types/ons.d.ts with this content:

import Vue from 'vue';

declare module 'vue/types/vue' {

  interface Vue {

    $ons: any;

  }

}

The problem is that this file seems to be ignored, although it's in the path for type definitions set in tsconfig.json.