Ошибка при наличии vuejs свойств экземпляра с vue -class-components и машинописным текстом

Question

Я хочу иметь глобальную переменную для URL-адреса моего сервера.

Я пишу это на своем main.ts

Vue.prototype.$apiUrl = "http://localhost:3000";

, а затем пытаюсь использовать его внутри приложения. vue

console.log(this.$apiUrl)

Я вижу URL-адрес в консоли браузера.

Но я получаю эту ошибку: Property '$apiUrl' does not exist on type 'App'.Vetur(2339)

, и я не могу продолжить, потому что в некоторых частях приложения this. $ apiUrl по какой-то причине не определен.

Как это исправить?

Answer 1

Обратите внимание, что предложение Class API было отменено. Чтобы использовать Vue + Typescript до тех пор, пока не выйдет Vue 3, лучше использовать стиль компонента Vue.extend({}):

<script lang="ts">
  import Vue from 'vue';

  export default Vue.extend({
    ...
  })
</script>

Чтобы добавить глобальную типизацию к вашему экземпляру Vue, прочтите Typescript Support .

В частности, вы должны добавить это в свои прокладки:

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $apiUrl: string;
  }
}

Answer 2

Решено! Мне нужно добавить $ apiUrl к типам Vue

. Я создаю файл .d.ts внутри своей папки @types и добавляю следующие

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $apiUrl: string
  }
}