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

Error encountered when providing valid data types as arguments in a React/Typescript function

Discover the Prisma findMany method for implementing tanstack react table functionality

Exploring the canDeactivateFn syntax with Angular Documentation

Is it possible to utilize Angular translate to support multiple languages for individual components or modules?

Exploring the benefits of useContext in Expo router

Loading an Angular2 app is made possible by ensuring that it is only initiated when a DOM element is detected

Experiencing an error message stating 'The token ${Token[TOKEN.72]} is invalid' while using cdk synth, specifically when trying to assign the value of ec2.Vpc.cidr from cfnParameter.value

Any idea how to resolve this typescript typing issue: "The argument, either a string or number, cannot be assigned to the parameter of type 'SetStateAction<string>'"?

TypeScript Library encounters issues when importing a specific data type

TS2307 error encountered in Angular 2 TypeScript due to the inability to locate a module for a private npm

unable to assign an array to a different array in typescript

Reactive Form value is not displaying in view because of FormControlName issue

Using Typescript and Azure Functions to send FormData containing a file using Axios

Outside the observable in Angular, there is a vacant array

Enhance your TypeScript code using decorators with inheritance

Typescript React: Implementing type definitions for JSS classes object

What is the process of using TypeScript to import a constant exported in JavaScript?

Looking to extract the expiration date from an x509 certificate?

Confusing directions about parentheses for "this.fn.bind(this)(super.fn(...args)"

How can I test for equality with an array item using v-if in Vue.js?