Verifying the format of an object received from an HTTP service using a TypeScript interface

Question

Verifying the format of an object received from an HTTP service using a TypeScript interface

Ensuring that the structure of the http JSON response aligns with a typescript interface/type is crucial for our javascript integration tests against the backend.

Take, for example, our CurrentUser interface:

export interface CurrentUser {
  id: number;
  firstname: string;
  lastname: string;
  roles: string[];
}

If a returned object from the backend doesn't include a firstname property but includes an age property, it's essential to detect this mismatch and fail the test at runtime.

We aim to automate these checks without manually coding assertions for each field. However, given that typescript interfaces don't exist at runtime, how can we leverage typescript for such validations?

If achieving this through typescript is unfeasible, are there any alternative libraries or patterns we could explore?

javascript typescript

Answer 1

Answer №1

It is not possible to directly use a typescript interface for runtime type assertions. A custom javascript implementation must be created instead.

(i) An unofficial TS compiler exists that can automate this process.

I would like to avoid manually coding checks/assertions for each field.

Unfortunately, unless opting for a custom solution like a unique compiler, manual checks are required. For instance, object testing can be done as shown below:

const isValidUser = (object) => {
    if ('object' !== typeof object) return false;

    const { id, firstname, lastname, roles } = object;
    
    return typeof id === 'number'
        && typeof firstname === 'string'
        && typeof lastname === 'string'
        && Array.isArray(roles)
        && roles.reduce((acc, value) => acc && typeof value === 'string', true);
}

// returns false (missing lastname property)
document.body.innerText = isValidUser({
    id: 1,
    firstname: 'John',
    roles: ['admin', 'content-editor'],
});

The provided example covers basic checks for all properties (presence and type). Moreover, libraries like Lodash and Ramda can simplify the type checking syntax and enhance readability. Here's an illustration:

const { all, allPass, pipe, prop } = R;
const { isArray, isNumber, isObject, isString } = _;

const isValidUser = allPass([
    isObject,
    pipe(prop('id'), isNumber),
    pipe(prop('firstname'), isString),
    pipe(prop('lastname'), isString),
    pipe(prop('roles'), isArray),
    pipe(prop('roles'), all(isString)),
]);

// returns false (missing lastname property)
document.body.innerText = isValidUser({
    id: 1,
    firstname: 'John',
    roles: ['admin', 'content-editor'],
});

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107c7f7471637850243e21273e24">[email protected]</a>/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Answer 2

It is not possible to directly use a typescript interface for runtime type assertions. A custom javascript implementation must be created instead.

(i) An unofficial TS compiler exists that can automate this process.

I would like to avoid manually coding checks/assertions for each field.

Unfortunately, unless opting for a custom solution like a unique compiler, manual checks are required. For instance, object testing can be done as shown below:

const isValidUser = (object) => {
    if ('object' !== typeof object) return false;

    const { id, firstname, lastname, roles } = object;
    
    return typeof id === 'number'
        && typeof firstname === 'string'
        && typeof lastname === 'string'
        && Array.isArray(roles)
        && roles.reduce((acc, value) => acc && typeof value === 'string', true);
}

// returns false (missing lastname property)
document.body.innerText = isValidUser({
    id: 1,
    firstname: 'John',
    roles: ['admin', 'content-editor'],
});

The provided example covers basic checks for all properties (presence and type). Moreover, libraries like Lodash and Ramda can simplify the type checking syntax and enhance readability. Here's an illustration:

const { all, allPass, pipe, prop } = R;
const { isArray, isNumber, isObject, isString } = _;

const isValidUser = allPass([
    isObject,
    pipe(prop('id'), isNumber),
    pipe(prop('firstname'), isString),
    pipe(prop('lastname'), isString),
    pipe(prop('roles'), isArray),
    pipe(prop('roles'), all(isString)),
]);

// returns false (missing lastname property)
document.body.innerText = isValidUser({
    id: 1,
    firstname: 'John',
    roles: ['admin', 'content-editor'],
});

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107c7f7471637850243e21273e24">[email protected]</a>/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Verifying the format of an object received from an HTTP service using a TypeScript interface

Answer №1

Similar questions

Modifying the text of a material UI button depending on a particular condition

Guide on incorporating typed components into module federation in React

Sliding out the sidebar menu with Jquery

Troubleshooting compatibility issues between jQuery scrollLeft and Angular

Encountering the "RequestDevice() chooser has been cancelled by the user" error when using Electron 17.x with Web Bluetooth

Unable to Achieve Full Height with Vuetify Container

What is the best way to trigger a modal to appear when dynamically generated items are clicked?

Using Next.js with Firebase emulators

The variable's Ionic value is not being displayed in the HTML

Sending documents via ExpressJS

Angular 8 does not allow for the assignment of type '{}' to a parameter

Is Python a suitable programming language for developing applications on a Raspberry Pi device?

Vanilla JavaScript Troubleshooting: Top Scroll Button Issue

Adding a loading event listener to an object in JavaScript: A step-by-step guide

Attempting to load an image through an AJAX Request may prove to be unsuccessful

Tips for displaying "No Results" without causing any lag in the browser

Sort div elements based on checkbox filters

You were supposed to provide 2 arguments, but you only gave 1.ts(2554)

Can VueJS lifecycle hooks be outsourced?

What is the process for moving information between files?