axios.js to typescript (#47)

Author: glebov21

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 renamed to 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;