axios.js to typescript

AspNetCoreVueStarter.csproj

@@ -29,6 +29,10 @@
     <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Remove="ClientApp\src\plugins\axios.ts" />
+  </ItemGroup>
+
   <ItemGroup>
     <Content Include="ClientApp\tsconfig.json" />
   </ItemGroup>
@@ -37,6 +41,10 @@
     <None Include="README.md" />
   </ItemGroup>
 
+  <ItemGroup>
+    <TypeScriptCompile Include="ClientApp\src\plugins\axios.ts" />
+  </ItemGroup>
+
   <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
     <!-- Ensure Node.js is installed -->
     <Exec Command="node --version" ContinueOnError="true">

ClientApp/src/plugins/axios.js → ClientApp/src/plugins/axios.ts

@@ -1,7 +1,7 @@
 "use strict";
 
-import Vue from 'vue';
-import axios from "axios";
+import vue from 'vue';
+import axios, { AxiosInstance } from "axios";
 
 // Full config:  https://github.com/axios/axios#request-config
 // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
@@ -39,23 +39,17 @@ _axios.interceptors.response.use(
   }
 );
 
-Plugin.install = function(Vue, options) {
-  Vue.axios = _axios;
-  window.axios = _axios;
-  Object.defineProperties(Vue.prototype, {
-    axios: {
-      get() {
-        return _axios;
-      }
-    },
-    $axios: {
-      get() {
-        return _axios;
-      }
-    },
-  });
-};
+function AxiosPlugin(Vue: typeof vue, options?: any): void {
+    Vue.prototype.$axios = _axios;
+}
+
+declare module 'vue/types/vue' {
+    interface Vue {
+        $axios: AxiosInstance;
+    }
+}
+
+vue.use(AxiosPlugin)
 
-Vue.use(Plugin)
 
 export default Plugin;

ClientApp/src/views/FetchData-decorator.vue

@@ -48,7 +48,6 @@
 // an example of a Vue Typescript component using vue-property-decorator
 import { Component, Vue } from 'vue-property-decorator';
 import { Forecast } from '../models/Forecast';
-import axios from 'axios';
 
 @Component({})
 export default class FetchDataView extends Vue {
@@ -78,7 +77,7 @@ export default class FetchDataView extends Vue {
 
   private async fetchWeatherForecasts() {
     try {
-      const response = await axios.get<Forecast[]>('api/WeatherForecast');
+      const response = await this.$axios.get<Forecast[]>('api/WeatherForecast');
       this.forecasts = response.data;
     } catch (e) {
       this.showError = true;

ClientApp/src/views/FetchData.vue

@@ -46,7 +46,6 @@
 // an example of a Vue Typescript component using Vue.extend
 import Vue from 'vue';
 import { Forecast } from '../models/Forecast';
-import axios from 'axios';
 
 export default Vue.extend({
   data() {
@@ -75,7 +74,7 @@ export default Vue.extend({
     },
     async fetchWeatherForecasts() {
       try {
-        const response = await axios.get<Forecast[]>('api/WeatherForecast');
+        const response = await this.$axios.get<Forecast[]>('api/WeatherForecast');
         this.forecasts = response.data;
       } catch (e) {
         this.showError = true;