Ошибка после компиляции при вызове `this. $ Ons.notification.alert (...)` в Onsen с использованием Vue.js + TypeScript - PullRequest
Новая
       14

Ошибка после компиляции при вызове `this. $ Ons.notification.alert (...)` в Onsen с использованием Vue.js + TypeScript

0 голосов
/ 23 ноября 2018

Я пытаюсь вызвать $ons методы Onsen UI (2.11.5) в приложении Vue.js (2.5.17) + TypeScript (3.0.0).

Работает нормально, когдавызывая его внутри шаблона, но это вызывает ошибку в командной строке сразу после Compiled successfully при вызове this.$ons.{method name} внутри производного класса Vue.

Ошибка: 

ERROR in /Users/max/.../src/views/TestOns.vue
Property '$ons' does not exist on type 'TestOns'. Did you mean '$on'?

Но хотя есть ошибка компилятора, код работает, поэтому всплывают оба предупреждения (1) и (2). 

<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>

И это то, что у меня есть в 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);
(...)

Я предложил обходной путь, связывающий атрибут с вызовом функции из шаблона: 

<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 '';
  }
...
}

Затем вы можете получить доступ с помощью this.ons

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

Youтакже может передавать $ons в качестве параметра в событии, например, @click="clickMe($ons)".

Но я хотел бы знать, почему ошибка компиляции вызывает this.$ons внутри класса, как сказано в OnsenUI документация.И почему ошибка, если она действительно работает.

1 Ответ

0 голосов
/ 22 марта 2019

Я нашел 2 удовлетворительных решения:

Первое - объявить переменную-член в компоненте.Нет необходимости в инициализации. 

@Component
export default class TestOns extends Vue {
  ...
  private $ons: any;
  ...
}

Второй - включить этот код в любое место в src/main.ts: 

declare module 'vue/types/vue' {
  interface Vue {
    $ons: any;
  }
}

Решение, описанное в документации здесь ,который не работал для меня, состоит в создании файла src/types/ons.d.ts с таким содержанием: 

import Vue from 'vue';
declare module 'vue/types/vue' {
  interface Vue {
    $ons: any;
  }
}

Проблема в том, что этот файл, кажется, игнорируется, хотя он находится в пути для определений типов, заданных вtsconfig.json.

...