EnterpriseApi.ts

import {Api} from '@/utils/api/Api';
import {EnterpriseCommand} from '@/interfaces/enterprise/EnterpriseCommand';
import {PageDecorator} from '@/interfaces/generic/PageDecorator';
import {EnterpriseOverviewDecorator} from '@/interfaces/enterprise/EnterpriseOverviewDecorator';

class EnterpriseApi {

	public static readonly RM_ENTERPRISE = `${Api.RM_BASE_API}/enterprise`;

	/**
	 * Gets all enterprises for the Overview Page table.
	 *
	 * @param urlSearchParams
	 */
	static getEnterprisePage(urlSearchParams: string): Promise<PageDecorator<EnterpriseOverviewDecorator>> {
		return Api.get(`${EnterpriseApi.RM_ENTERPRISE}?${urlSearchParams}`);
	}

	/**
	 * Create a new Enterprise Entity in the database.
	 *
	 * @param body
	 */
	static createEnterprise(body: EnterpriseCommand) {
		return Api.post(`${EnterpriseApi.RM_ENTERPRISE}`, body);
	}
}

export {EnterpriseApi};

EnterpriseOverviewTable.vue

<template>
	<base-table v-if="!loading"
	            :headers="headers"
	            :items="enterprises"
	            :options.sync="options"
	            :total-items="totalEnterprises"
	            :total-pages="totalPages"
	            v-on:loadPage="getEnterprises">

		<template v-slot:item.employees="{ item }">
			{{ item.employeesAsConcept }} / {{ item.employeesAsProcessing }} /
			{{ item.employeesAsValidated }}
		</template>

		<template v-slot:item.actionButton="{ item }">
			<a :href="`/company/${ item.id }`" class="js-clickable-row-link">
				<svg class="icon-chevron-right" height="14" width="9">
					<path d="M.5 2.125L5.3 7 .5 11.875 2.13 13.5 8.5 7 2.13.5" />
				</svg>
			</a>
		</template>

	</base-table>
</template>

<script lang="ts">
	import Vue from 'vue';
	import BaseTable from '@/components/BaseTable.vue';
	import {EnterpriseApi} from '@/utils/api/EnterpriseApi';
	import {getDefaultPaginationOptions, TableColumn} from '@/utils/tables/TableHelper';
	import {EnterpriseOverviewDecorator} from '@/interfaces/enterprise/EnterpriseOverviewDecorator';

	export default Vue.extend({
		name: 'EnterpriseOverviewTable',

		components: {
			BaseTable
		},

		data() {
			return {
				enterprises: [] as EnterpriseOverviewDecorator[],
				headers: [
					{
						name: 'Company Number',
						key: 'companyNumber'
					},
					{
						name: 'Company Name',
						key: 'name'
					},
					{
						name: 'City',
						key: 'city'
					},
					{
						name: 'Employees',
						key: 'employees'
					},
					{
						name: '',
						key: 'actionButton'
					}
				] as TableColumn[],
				totalEnterprises: 0,
				totalPages: 0,
				loading: true
			};
		},

		methods: {
			async getEnterprises(): Promise<void> {
				const data = await EnterpriseApi.getEnterprisePage(this.getUrlSearchParams());

				this.totalEnterprises = data.totalElements;
				this.totalPages = data.totalPages;
				this.enterprises = data.content; // <-- Here the typescript error comes in.
			},

			getUrlSearchParams(): string {
				const params = new URLSearchParams();
				params.append('pageSize', this.options.itemsPerPage.toString());
				params.append('sortBy', this.options.sortBy);
				params.append('sortDescending', this.options.sortDesc.toString());
				params.append('page', this.options.page.toString());

				return params.toString();
			}
		},

		async mounted(): Promise<void> {
			await this.getEnterprises();
			this.loading = false;
		}
	});
</script>

Pageable.ts

import {Sort} from '@/interfaces/generic/Sort';

interface Pageable {
	offset: number;
	pageNumber: number;
	pageSize: number;
	paged: boolean;
	sort: Sort;
	unpaged: boolean;
}

export {Pageable};

PageDecorator.ts

import {Pageable} from '@/interfaces/generic/Pageable';
import {Sort} from '@/interfaces/generic/Sort';

interface PageDecorator<T> {
	content: T;
	empty: boolean;
	first: boolean;
	last: boolean;
	number: number;
	numberOfElements: number;
	pageable: Pageable;
	size: number;
	sort: Sort;
	totalElements: number;
	totalPages: number;
}

export {PageDecorator};

Sort.ts

interface Sort {
	empty: boolean;
	sorted: boolean;
	unsorted: boolean;
}

export {Sort};