Как правильно зарегистрировать axios глобально в приложении Vue & TypeScript

Question

Я боролся с Vue, TypeScript и Axios и не могу найти то, что кажется удовлетворительным решением.

Большинство гидов скажут вам сделать это:

Main.ts

import axios from 'axios';

Vue.prototype.$http = axios;

А затем используйте $ http.TypeScript не нравится:

Свойство '$ http' не существует в типе CombinedVueInstance

Как я могу зарегистрировать axios глобально и избежать ошибок TypeScript?

Основываясь на ответе @GentlemanCrow, приведенном ниже, я создал в своем корневом каталоге файл с именем:

axios-plugin.d.ts

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

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
    // do stuff with options
    Vue.prototype.$http = Axios;
}

export class AxiosPluginOptions {
    // add stuff
}

import { AxiosStatic } from 'axios';

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

Это приводит к ошибке:

(TS) Реализация не может быть объявлена ​​в окружающем контексте.

И на Vue.prototype.$http = Axios; ошибка:

Выражения недопустимы в окружающем контексте.

Удаление export function AxiosPlugin функция и попытка выполнить запрос об ошибке с:

TypeError: "this. $ Http is undefined"

Куда должен идти следующий код?

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
    // do stuff with options
    Vue.prototype.$http = Axios;
}

Answer 1

Я считаю, что вы должны зарегистрировать его как файл объявления машинописного текста - поэтому создайте отдельный файл с именем 'axios-plugin.d.ts' и вставьте:

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

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
    // do stuff with options
    Vue.prototype.$http = Axios;
}

export class AxiosPluginOptions {
    // add stuff
}

import { AxiosStatic } from 'axios';

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

тогда у вас должен быть доступ к Vue.$http там, где он вам нужен.

Vue.prototype.$http = axios; будет работать в чистом javascript, но Typescript заставляет вас объявлять все, НО вы получаете эту приятную, приятную проверку типов.

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