Typescript

Owner: Development Last revision: 12.11.2021

HTTP Service
Repositories
Types

HTTP Service#

It’s generally a good idea to separate frontend logic from the HTTP service. This allows us to easily switch the underlying HTTP client, e.g. from axios to vue-resource.

// services/HttpService.ts
import axios, { AxiosResponse } from 'axios';

export default class HttpService {
    private static instance: HttpService | null = null;

    public static getInstance(): HttpService {
        if (this.instance === null) {
            this.instance = new HttpService();
        }

        return this.instance;
    }

    public get(endpoint: string): Promise<any> {
        return new Promise<any>((resolve, reject) => {
            axios.get('/api/' + endpoint)
                .then(response => resolve(response.data))
                .catch(error => {
                    console.error(error);
                    reject(error);
                });
        });
    }
}

// repositories/Repository.ts
import HttpService from '../services/HttpService';
import { ExampleType } from "../types/ExampleType";

export default class ExampleRepository {
    private httpService: HttpService = HttpService.getInstance();
    
    public getExample(project: string): Promise<ExampleType> {
        return new Promise<ExampleType>((resolve, reject) => {
            this.httpService.get('example')
                .then(response => {
                    ...
                })
                .catch(error => {
                    reject(error);
                });
        }
    }
}

Repositories#

Use the repository pattern to abstract any interaction with an external API or database.

import HttpService from '../services/HttpService';
import { ExampleType } from "../types/ExampleType";

export default class ExampleRepository {
    private httpService: HttpService = HttpService.getInstance();
    
    public getExample(project: string): Promise<ExampleType> {
        return new Promise<ExampleType>((resolve, reject) => {
            this.httpService.get('example/1')
                .then(response => {
                    ...
                })
                .catch(error => {
                    reject(error);
                });
        }
    }
    
    public deleteExample(project: string): Promise<boolean> {
        return new Promise<ExampleType>((resolve, reject) => {
            this.httpService.delete('example/1')
                .then(response => {
                    ...
                })
                .catch(error => {
                    reject(error);
                });
        }
    }
}

Types#

Use types wherever possible to improve code structure and allow better type hinting. Types are preferred to interfaces or model classes.

import { OtherType } from './OtherType';

export type ExampleType = {
    id: number;
    name: string;
    others: OtherType[];
}