Добавить Ax ios в качестве плагина в Vue / Typescript - PullRequest
Новая
       21

Добавить Ax ios в качестве плагина в Vue / Typescript

0 голосов
/ 22 апреля 2020

Я пытался добавить Ax ios к прототипу Vue, чтобы я мог получить к нему доступ как this.$http. Я использую Typescript, поэтому мне тоже нужны определения типов для этого. Я видел много мест в inte rnet, которые описывают, как это сделать, но что бы я ни пытался, Typescript не распознает мои определения, и я получаю ошибку:

Property '$http' does not exist on type

Я думаю, это как-то связано с моим tsconfig.json, но я не уверен. Пожалуйста, смотрите ниже соответствующие файлы:

src / plugins / ax ios .ts 

import _Vue from 'vue';
import Axios from 'axios';

export function AxiosPlugin<AxiosPlugOptions>(
  Vue: typeof _Vue,
  options?: AxiosPluginOptions,
): void {
  Vue.prototype.$http = Axios.create({
    baseURL: options?.baseUrl,
  });
}

export class AxiosPluginOptions {
    baseUrl = '';
}

src / types / ax ios -plugin.d.ts 

import { AxiosStatic } from 'axios';

declare module 'vue/types/vue' {
    export interface Vue {
        $http: AxiosStatic;
    }
}

src / main.ts 

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import vuetify from './plugins/vuetify';
import { AxiosPlugin } from './plugins/axios';

Vue.config.productionTip = false;

Vue.use(AxiosPlugin, {
  baseUrl: 'https://localhost:44390/api/',
});

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount('#app');

tsconfig. json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/vuetify/types",
    ],
    "types": [
      "webpack-env",
      "vuetify"
    ],
    "paths": {
      "@/*": [
        "src/*",
      ],
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Кто-нибудь знает, почему мое объявление типа не распознается?

...