Exploring the world of third-party APIs

Question

Exploring the world of third-party APIs

I am currently working on fetching data from an external API and displaying it.

In order to enhance flexibility, I am aiming to completely separate the API integration from my code and use custom-defined data structures instead.

Here is a brief visual overview: https://i.stack.imgur.com/cxjaU.png

To illustrate this concept further, let's consider an example:

Imagine we are dealing with data related to people:

While API v1.0 returns {"name": "John"}, API v1.1 might return {"pName": "John"}.

To avoid potential issues caused by minor changes in the API response, I plan to internally define two interfaces: one for parsing the API response and another as a structure for the data itself:

interface IPersonDataStructure {
    name : string;
}

interface IPersonDataParser {
    parse(input: string) : IPersonDataStructure;
}

My goal is to create a class that combines the parser and the data structure:

// This class utilizes any parser that implements IPersonDataParser
// And uses IPersonDataStructure 
class Person {

}

However, I have hit a roadblock at this stage! I am unsure about how to effectively merge the two elements together!

I am not keen on having an instance per Person's instance:

let aPerson = new Person(new Parser(data))

As the parser should ideally be stateless (similar to a function).

The challenge lies in TypeScript restrictions which make it difficult to achieve this with classes:

class Parser implements IPersonDataParser {
    static public function parse(data : string) : IPersonDataStructure {
        return {...}
    }
}

class Person {
    private _data : IPersonDataStructure;

    constructor(data : string, parser : IPersonDataParser) {
        this._data = parser.parse(data)
    }
}

Callbacks could be a viable solution, but only if I can verify their signature.

For instance, the following does not validate correctly:

type PersonDataParser = (data : string) => IPersonDataStructure;

// Oops.. argument is missing!
let aParser = () => {
    return {...}
}

let aPerson = new Person('data', aParser)

Are there any suggestions on how to overcome this challenge?

api typescript interface

Answer 1

Answer №1

One way to achieve this is by implementing a static method that satisfies the interface requirements using type inference and structural types. Here's an example:

interface IPersonDataStructure {
    name : string;
}

interface IPersonDataParser {
    parse(input: string) : IPersonDataStructure;
}

class Parser {
    public static parse(data : string) : IPersonDataStructure {
        return { name: 'Steve' };
    }
}

class Person {
    private _data : IPersonDataStructure;

    constructor(data : string, parser : IPersonDataParser) {
        this._data = parser.parse(data)
    }
}

let person = new Person('', Parser);

Alternatively, you could simplify the design of the Person class so that it only represents a person without needing a mapper during construction. This can be achieved as follows:

interface IPersonDataStructure {
    name : string;
}

class Person {
    constructor(private data : IPersonDataStructure) {
    }
}

class PersonMapper {
    public static map(data: string): Person {
        return new Person({
            name: 'Steve'
        });
    }
}

let person = PersonMapper.map('...');

If your data includes a version number, you can use that information to determine the appropriate mapping.

Answer 2

One way to achieve this is by implementing a static method that satisfies the interface requirements using type inference and structural types. Here's an example:

interface IPersonDataStructure {
    name : string;
}

interface IPersonDataParser {
    parse(input: string) : IPersonDataStructure;
}

class Parser {
    public static parse(data : string) : IPersonDataStructure {
        return { name: 'Steve' };
    }
}

class Person {
    private _data : IPersonDataStructure;

    constructor(data : string, parser : IPersonDataParser) {
        this._data = parser.parse(data)
    }
}

let person = new Person('', Parser);

Alternatively, you could simplify the design of the Person class so that it only represents a person without needing a mapper during construction. This can be achieved as follows:

interface IPersonDataStructure {
    name : string;
}

class Person {
    constructor(private data : IPersonDataStructure) {
    }
}

class PersonMapper {
    public static map(data: string): Person {
        return new Person({
            name: 'Steve'
        });
    }
}

let person = PersonMapper.map('...');

If your data includes a version number, you can use that information to determine the appropriate mapping.

Answer 3

Answer №2

Have you considered implementing an adapter to determine which property was returned by the API?

interface ApiResponse {
    firstName?: string;
    lastName?: string;
}

class Person {
    public name: string;

    constructor (name: string) {
        this.name = name;
    }
}

class ApiResponseAdapter {
    private getName(response: ApiResponse): string {
        if (response.firstName) return firstName;
        if (response.lastName) return lastName;

        // if neither are set, return null
        return null;
    }

    public adapt(response: ApiResponse): Person {
        let name = this.getName(response);

        if (name === null) {
            throw new Error("Invalid name for response: " + JSON.stringify(response));
        }

        return new Person(name);
    }
}

Another approach is to define a base ApiResponse interface with different implementations for handling the behavior:

interface ApiResponse {
    fullName: string;
}

class Api_V1_0_Response implements ApiResponse {
    public fullName: string;

    constructor (json: any) {
        this.fullName = json["fullName"];
    }
}

class Api_V1_1_Response implements ApiResponse {
    public fullName: string;

    constructor (json: any) {
        this.fullName = json["lastName"];
    }
}

class Person {
    public name: string;

    constructor (name: string) {
        this.name = name;
    }
}

class ApiResponseAdapter {
    public adapt(response: ApiResponse): Person {
        return new Person(
            response.fullName
        );
    }
}

Or take it a step further by creating an abstract BaseApiResponse class that is extended by specific response classes:

interface ApiResponse {
    fullName: string;
}

abstract class BaseApiResponse implements ApiResponse {
    public fullName: string;

    constructor (nameKey: string, json: any) {
        this.fullName = json[nameKey];
    }
}

class Api_V1_0_Response extends BaseApiResponse {   
    constructor (json: any) {
        super("fullName", json);
    }
}

class Api_V1_1_Response extends BaseApiResponse {   
    constructor (json: any) {
        super("lastName", json);
    }
}

class Person {
    public name: string;

    constructor (name: string) {
        this.name = name;
    }
}

class ApiResponseAdapter {
    public adapt(response: ApiResponse): Person {
        return new Person(
            response.fullName
        );
    }
}

Answer 4

Have you considered implementing an adapter to determine which property was returned by the API?

interface ApiResponse {
    firstName?: string;
    lastName?: string;
}

class Person {
    public name: string;

    constructor (name: string) {
        this.name = name;
    }
}

class ApiResponseAdapter {
    private getName(response: ApiResponse): string {
        if (response.firstName) return firstName;
        if (response.lastName) return lastName;

        // if neither are set, return null
        return null;
    }

    public adapt(response: ApiResponse): Person {
        let name = this.getName(response);

        if (name === null) {
            throw new Error("Invalid name for response: " + JSON.stringify(response));
        }

        return new Person(name);
    }
}

Another approach is to define a base ApiResponse interface with different implementations for handling the behavior:

interface ApiResponse {
    fullName: string;
}

class Api_V1_0_Response implements ApiResponse {
    public fullName: string;

    constructor (json: any) {
        this.fullName = json["fullName"];
    }
}

class Api_V1_1_Response implements ApiResponse {
    public fullName: string;

    constructor (json: any) {
        this.fullName = json["lastName"];
    }
}

class Person {
    public name: string;

    constructor (name: string) {
        this.name = name;
    }
}

class ApiResponseAdapter {
    public adapt(response: ApiResponse): Person {
        return new Person(
            response.fullName
        );
    }
}

Or take it a step further by creating an abstract BaseApiResponse class that is extended by specific response classes:

interface ApiResponse {
    fullName: string;
}

abstract class BaseApiResponse implements ApiResponse {
    public fullName: string;

    constructor (nameKey: string, json: any) {
        this.fullName = json[nameKey];
    }
}

class Api_V1_0_Response extends BaseApiResponse {   
    constructor (json: any) {
        super("fullName", json);
    }
}

class Api_V1_1_Response extends BaseApiResponse {   
    constructor (json: any) {
        super("lastName", json);
    }
}

class Person {
    public name: string;

    constructor (name: string) {
        this.name = name;
    }
}

class ApiResponseAdapter {
    public adapt(response: ApiResponse): Person {
        return new Person(
            response.fullName
        );
    }
}

Exploring the world of third-party APIs

Answer №1

Answer №2

Similar questions

Implementing the breadcrumb component within dynamically loaded modules loaded through the router-outlet component

The Validator in Angular Formbuilder must have a specific character requirement

Are fp-ts and Jest the perfect pairing for testing Option and Either types with ease?

"Troubleshooting Typecscript and Angular: Dealing with mismatched argument

Can I retrieve the return type of useFetch in Nuxt3?

Can you explain how this promise functions within the context of the mutation observer, even without an argument?

The functionality of MaterializeCSS modals seems to be experiencing issues within an Angular2 (webpack) application

typescript - instantiate an object using values stored in an array

Stop the controller from reloading when navigating in Angular2/Ionic2

Tips for adjusting HighCharts layout with highcharts-vue integrations

After the form submission, my Next.js component keeps rendering repeatedly in a cumulative manner

Tips for integrating the react-financial-charts library into your React and JavaScript project

What techniques can I use to modify an object while it's being iterated through?

Error encountered when attempting to retrieve token from firebase for messaging

Issue with extending mongoose.Document properly in NodeJS and TypeScript using a custom interface with mongoose

Generate sample data within a fixture

All authentication logic in Angular encapsulated within the service

Issue with TypeScript Declaration File in NPM module functionality

Retrieving Headers from a POST Response

Utilizing flatMap to implement nested service calls with parameters