Tips for confirming the validity of JSON data using a Typescript interface from user input

Question

Tips for confirming the validity of JSON data using a Typescript interface from user input

I am facing an issue with validating an input field (text-area) that receives an array of objects in JSON format. The validation needs to be done at run-time based on an interface created in typescript.

Two interfaces Employee and Address were created with a custom type roleType

interface Employee {
  name: string;
  age: number;
  email: string;
  address?: Address;
  role?: roleType;
}

interface Address{
  city: string;
  pinCode: number;
}

type roleType = 'Developer' | 'UI Designer';

Sample valid JSON:

[
  {
    "name": "John Doe",
    "age": 25,
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac0c5c2c4eacfc7cbc3c684c9c5c7">[email protected]</a>",
  },
  {
    "name": "Jane Doe",
    "age": 23,
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99398979cb99c94989095d79a9694">[email protected]</a>",
  }
]

Sample invalid JSON:

[
  {
    "name": "John Doe",
    "age": 25,
    "language": "typescript",
  },
  {
    "name": "Jane Doe",
    "age": 23,
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd979c9398bd98909c9491d39e9290">[email protected]</a>",
  }
]

Attempting to validate the array using a function checkArray with the following code:

function checkArray(array: any[]) {
  if (!Array.isArray(array)) {
    return false;
  }

  for (let i = 0; i < array.length; i++) {
    if (!(array[i] instanceof Employee)) {
      return false;
    }
  }

  return true;
}

However, this approach fails because interface Employee is a type and cannot be used as a value with instanceof operator.

I am seeking a way to validate my array with interface type and generate relevant errors without relying on external libraries. Any insights on how to achieve this?

json typescript

Answer 1

Answer №1

Running TypeScript code at runtime is not possible because TypeScript is compiled to JavaScript. The use of the interface keyword is specific to TypeScript.

One alternative approach is to create a mapping of property names and their corresponding JavaScript typeof values.

interface Person {
  name: string;
  age: number;
  email: string;
  address: {
    city: string;
    country: string;
  }
  hobbies: string[];
}

type PersonValidationMap = Record<keyof Person, string> & { [key: string]: string};

const jsValidationMap: PersonValidationMap = {
  name: "string",
  age: "number",
  email: "string",
  address: "object",
  hobbies: "array"
}

const validatePerson = (person: Person) => {
  return Object.entries(person).map(([prop, value]) => {
    let passedValidation: boolean = false;
    if (jsValidationMap[prop] === "array") {
      passedValidation = Array.isArray(value);
    } else {
      passedValidation = typeof value === jsValidationMap[prop];
    }
    return { [prop]: passedValidation };
  })
}

const validPerson: Person = {
  name: "Alice",
  age: 30,
  email: "alice@example.com",
  address: {
    city: "New York",
    country: "USA"
  },
  hobbies: ["Reading", "Painting"]
}

const invalidPerson: Person = {
  name: "Bob",
  age: "Not a number" as any,
  email: "bob@example.com",
  address: undefined as any,
  hobbies: "Gardening" as any,
}

// Validating a valid person object
console.log(validatePerson(validPerson));

// Validating an invalid person object
console.log(validatePerson(invalidPerson));

Try this code on TS playground

Answer 2

Running TypeScript code at runtime is not possible because TypeScript is compiled to JavaScript. The use of the interface keyword is specific to TypeScript.

One alternative approach is to create a mapping of property names and their corresponding JavaScript typeof values.

interface Person {
  name: string;
  age: number;
  email: string;
  address: {
    city: string;
    country: string;
  }
  hobbies: string[];
}

type PersonValidationMap = Record<keyof Person, string> & { [key: string]: string};

const jsValidationMap: PersonValidationMap = {
  name: "string",
  age: "number",
  email: "string",
  address: "object",
  hobbies: "array"
}

const validatePerson = (person: Person) => {
  return Object.entries(person).map(([prop, value]) => {
    let passedValidation: boolean = false;
    if (jsValidationMap[prop] === "array") {
      passedValidation = Array.isArray(value);
    } else {
      passedValidation = typeof value === jsValidationMap[prop];
    }
    return { [prop]: passedValidation };
  })
}

const validPerson: Person = {
  name: "Alice",
  age: 30,
  email: "alice@example.com",
  address: {
    city: "New York",
    country: "USA"
  },
  hobbies: ["Reading", "Painting"]
}

const invalidPerson: Person = {
  name: "Bob",
  age: "Not a number" as any,
  email: "bob@example.com",
  address: undefined as any,
  hobbies: "Gardening" as any,
}

// Validating a valid person object
console.log(validatePerson(validPerson));

// Validating an invalid person object
console.log(validatePerson(invalidPerson));

Try this code on TS playground

Tips for confirming the validity of JSON data using a Typescript interface from user input

Answer №1

Similar questions

When trying to implement an interface, the error message "Code lacks generality" and "^T cannot be generalized" is displayed in F#

Filtering Collections (Using List<String> in View and Controller Communication)

The following 13 error occurred in the node_modules/next/dist/esm/server/web/spec-extension/cookies/serialize.js file

Using AngularJS to send a large JSON file to a directive

Error encountered when dispatching action in ngOnInit: ExpressionChangedAfterItHasBeenCheckedError

I am looking to save a collection of variables in an array and store it as a $_SESSION variable

What are the best ways to handle data using the .pipe() function?

Expectation in Observable: Unable to provide data retrieval

Typescript monorepo facing issues with module resolution in Next.js projects

Ways to extract single JSON entities from a consolidated JSON structure

The type undefined cannot be assigned to the type even with a null check

An error occurred suddenly while building: ReferenceError - the term "exports" is not defined in the ES module scope

organize information in a MySQL database in an array

When attempting to push `content[i]` into an array in AngularJS, it is flagged

Discover the most efficient method for extracting specific information from a JSON file by utilizing the existing attributes

How to access specific values from a deserialized JSON string using Javascript

Storing a collection of integers within a nested data structure

The JSON retrieved from the API contains additional characters

Error: The "res.json" method is not defined in CustomerComponent

Exploring the power of EJS with conditional logic