JSON TypeScript compliant interface

Question

JSON TypeScript compliant interface

My problem is quite common, but the solutions found on stackoverflow are not suitable for my specific case.

I have a collection of objects that I need to manipulate, save, and load as json files. Here's an example of the interface:

type jsonValue = string | number | jsonValue[] | json | undefined;

interface json {
    [index: string]: jsonValue
}

interface I_Foo extends json {
    p1: string;
    p2: number;
}

When trying to implement this, I encounter the following error:

An interface can only extend an object type or intersection of object types with statically known members.

How should I approach this issue? It is important that all interfaces adhere to the json format for seamless code iteration and serialization. At the same time, I need to define specific interfaces for each object.

Edit: Just to clarify, I require a solution to create an interface with any number of properties that align with json standards, which can then be implemented by a class for effective usage.

typescript

Answer 1

Answer №1

Despite not being able to replicate the issue with the interfaces, the recommended solution is to switch to using types.

Adjustment of JsonValue:

type JsonValue = string | number | JsonValue[] | JsonObject | undefined;

type JsonObject = {
  [index: string]: JsonValue;
};

Introducing a utility type for clearer types:

type Prettify<T> = T extends infer R ? { [K in keyof R]: R[K] } : never;

This allows the creation of a type that takes a generic parameter and combines it with JsonObject:


type Json<T> = Prettify<T & JsonObject>;

type I_Foo = {
  p1: string;
  p2: number;
};

type I_FooWithBase = Json<I_Foo>;

If you were to implement a class that follows I_FooWithBase, an index signature must be added to the class:

class Foo implements I_FooWithBase {
  public p1: string = '';
  public p2: number = 1;
  [index: string]: JsonValue;
}

However, this approach allows access to any irrelevant string key:

const a = new Foo();
a.dasd // no error

Instead, have the class implement I_Foo which does not have an index signature:

class Foo implements I_Foo {
  public p1: string = '';
  public p2: number = 1;
}

const a = new Foo();
a.dasd // expected error

playground

Answer 2

Despite not being able to replicate the issue with the interfaces, the recommended solution is to switch to using types.

Adjustment of JsonValue:

type JsonValue = string | number | JsonValue[] | JsonObject | undefined;

type JsonObject = {
  [index: string]: JsonValue;
};

Introducing a utility type for clearer types:

type Prettify<T> = T extends infer R ? { [K in keyof R]: R[K] } : never;

This allows the creation of a type that takes a generic parameter and combines it with JsonObject:


type Json<T> = Prettify<T & JsonObject>;

type I_Foo = {
  p1: string;
  p2: number;
};

type I_FooWithBase = Json<I_Foo>;

If you were to implement a class that follows I_FooWithBase, an index signature must be added to the class:

class Foo implements I_FooWithBase {
  public p1: string = '';
  public p2: number = 1;
  [index: string]: JsonValue;
}

However, this approach allows access to any irrelevant string key:

const a = new Foo();
a.dasd // no error

Instead, have the class implement I_Foo which does not have an index signature:

class Foo implements I_Foo {
  public p1: string = '';
  public p2: number = 1;
}

const a = new Foo();
a.dasd // expected error

playground

JSON TypeScript compliant interface

Answer №1

Similar questions

Strategies for resolving a mix of different data types within a single parameter

Error TS2339 occurs when attempting to migrate to TypeScript due to the absence of the 'PropTypes' property on the 'React' type

Authentication Redirect Failure when using Passport to an absolute URL

What is the best way to refresh a personalized form element using Angular?

Consolidating Typescript modules into a single .js file

Introducing an extra 'pipe' in rxjs angular may result in generating errors

Get the download URL from Firebase Storage and save it into an array within Firestore

Using TypeScript and the `this` keyword in SharePoint Framework with Vue

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

When transmitting data from NodeJS, BackBlaze images may become corrupted

How can one ensure that the element declared in the "let" clause is displayed in an HTML Angular template?

Arrangement of items in Angular 2 array

Utilizing Dynamic Class Names in Angular 7 with Typescript

Can you explain how to invoke a class with express().use function?

The constructor in a Typescript Angular controller fails to run

Why does TypeScript require a generic type parameter when arguments have already been provided?

Swagger Issue Resolved: Restriction on Number of Params Set

Preventing Button Clicks in Angular 2 When Form Data is Modified

Best practices for updating the value of a specific key within an object that contains recursion in JavaScript/TypeScript

Converting typescript path aliases into local file paths