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

Debugging TypeScript code in VS Code by stepping into a library function within the Node.js debugger

Issue with converting Bitmex API JSON data to price charts

Utilizing TypeScript interfaces to infer React child props

What is causing my React-Testing Library queries to not work at all?

Examining the array to ensure the object exists before making any updates in the redux

Accessing the value of a FormControl in HTML代码

Ways to determine the number of duplicate items in an Array

Exploring abstract classes for diverse implementation strategies?

Creating hierarchical TreeNode structure in TypeScript

In Vue3, when using the `script setup` with the `withDefaults` option for a nested object, its attributes are marked as required. How can this issue

When sending a POST request to my API route in production, the req.headers.authorization property is mysteriously missing, even though it functions perfectly fine in my local

Unlocking the power of JSON deserialization for child objects in ASP.NET Core

ngx-emoji mart - The error message "Type 'string' is not assignable" is being displayed

The implementation of the data source in ag grid is not functioning

To dismiss a popup on a map, simply click on any area outside the map

Streamlined Authorization in MEAN (SPA) Applications

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

Parsing temporary storage of database query results

Form appears outside the modal window

Display streaming data continuously within an HTML page using Angular 16