Типизирование пользовательских плагинов в Nuxt - PullRequest
Новая
       23

Типизирование пользовательских плагинов в Nuxt

0 голосов
/ 27 сентября 2019

В моем проекте Nuxt я создал собственный файл плагина, который возвращает объект./helpers/settings: 

export const settings = {
  baseURL: 'https://my-site.com',
  ...
};

Я регистрирую этот файл в /plugins/settings.ts: 

import Vue from 'vue';
import { settings } from '~/helpers/settings';

Vue.prototype.$settings = settings;

И в nuxt.config.js: 

export default {
  ...
  plugins: [
    '~/plugins/settings',

Затем вкомпонент, я могу использовать свой плагин так: 

export default Vue.extend({
  data() {
    return {
      url: `${this.$settings.baseURL}/some-path`,

Все работает, как и ожидалось, за исключением того, что в моей консоли я получаю ошибку машинописи из строки, которую я ссылаюсь на мой плагин в моем компоненте: 

Property '$settings' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

Отсюда мой вопрос: как правильно применить тип к моему пользовательскому плагину, чтобы я не получал эту ошибку при каждом его использовании?

1 Ответ

0 голосов
/ 28 сентября 2019

Согласно документам , вам потребуется файл типа дополнения для Vue.

Поместите следующий код в файл с именем plugin-types.d.ts.

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
    $settings: string
  }
}
...