Typescript implements strict enforcement of partial interfaces

Question

Typescript implements strict enforcement of partial interfaces

In my application, I am working with JSON data. Here is a simplified example:

data {
  prop1: "abc",
  prop2:  123,
  COL_A12: "mydata",
  COL_A13: "myotherdata",
}

I am aware that the data will consist of multiple prop1 and prop2 properties. However, COL_A12 and COL_A13 are dynamically generated, so they could have different names (e.g., COL_A67).

I have defined an interface as follows:

interface IData {
  prop1: string;
  prop2: number;
}

Unfortunately, I cannot specify the other property names in the interface due to their dynamic nature. They do follow a pattern, though.

Is there a way to use regular expressions for property names in Typescript?

typescript

Answer 1

Answer №1

There is no fixed pattern for setting property names.

interface IData {
    prop1: string;
    prop2: number;
    [name: string]: string | number;
}

For example:

let data = {
    prop1: "abc",
    prop2:  123,
    COL_A12: "mydata",
    COL_A13: "myotherdata",
} as IData;

console.log(data.prop1); // okay
console.log(data.COL_A12); // error
console.log(data["COL_A12"]); // okay

The challenge lies in the fact that indexable properties have type string | number, so:

let a = data["COL_A12"]; // typeof a is 'string | number'
let b = data["COL_A12"] as string; // typeof a is 'string'

Edit

Once you receive the data, you cannot control its contents (if I understand correctly). The interface provided helps to understand the structure of the received data.

To manage how this data is accessed in your application, consider creating a class that takes the data and provides specific getters:

class Data {
    private raw: IData;

    constructor(data: IData) {
        this.raw = data;
    }

    public get prop1(): string {
        return this.raw.prop1;
    }

    public get prop2(): number {
        return this.raw.prop2;
    }

    public col(num: number): string {
        return this.raw[`COL_A${ num }`] as string;
    }
}

Answer 2

There is no fixed pattern for setting property names.

interface IData {
    prop1: string;
    prop2: number;
    [name: string]: string | number;
}

For example:

let data = {
    prop1: "abc",
    prop2:  123,
    COL_A12: "mydata",
    COL_A13: "myotherdata",
} as IData;

console.log(data.prop1); // okay
console.log(data.COL_A12); // error
console.log(data["COL_A12"]); // okay

The challenge lies in the fact that indexable properties have type string | number, so:

let a = data["COL_A12"]; // typeof a is 'string | number'
let b = data["COL_A12"] as string; // typeof a is 'string'

Edit

Once you receive the data, you cannot control its contents (if I understand correctly). The interface provided helps to understand the structure of the received data.

To manage how this data is accessed in your application, consider creating a class that takes the data and provides specific getters:

class Data {
    private raw: IData;

    constructor(data: IData) {
        this.raw = data;
    }

    public get prop1(): string {
        return this.raw.prop1;
    }

    public get prop2(): number {
        return this.raw.prop2;
    }

    public col(num: number): string {
        return this.raw[`COL_A${ num }`] as string;
    }
}

Typescript implements strict enforcement of partial interfaces

Answer №1

Edit

Similar questions

Guide to adding jquery with typings installation

Ensure that the query value remains constant in Express.js

Can you explain the distinction between String[] and [String] in TypeScript?

Issues with style not loading properly within innerHTML in Angular2

Display the map using the fancybox feature

Issue in TypeScript where object properties may still be considered undefined even after verifying using Object.values() for undefined values

Angular - How to fix the issue of Async pipe not updating the View after AfterViewInit emits a new value

Typescript error: Undefined reference to 'DhImportKeyParams'

What factors contribute to the variations in results reported by Eslint on different machines?

Using typescript with create-react-app - organizing types in a separate file

Is there a way to achieve region collapsing and expanding using #region / #endregion in TypeScript within Visual Studio Community Edition 2019?

Bringing together the functionality of tap to dismiss keyboard, keyboard avoiding view, and a submit button

Performing an Axios POST request in a React Native and React app using JSON.stringify and Blob functionality

Navigating an immutable list to make updates to its values

Using Typescript: ForOf Iteration with Unknown Value Types

I am facing the dilemma of having an identical button appearing in two separate locations. How can I determine which button has been clicked?

Typescript double-sided dictionary: a comprehensive guide

What is the method for extracting children from a singular object in json-server rather than an array?

Transmit data via XMLHttpRequest in smaller portions or through a ReadableStream to minimize memory consumption when handling large datasets

Encountering issues while attempting to transmit several files to backend in React/NestJS resulting in a BAD REQUEST error