The clash between a static property name type and a dynamic property name on an interface is causing

Question

The clash between a static property name type and a dynamic property name on an interface is causing

My interface, Item, is quite straightforward and is applied to various objects.

This interface mandates that each of these objects must have an assigned itemName property, but they can also include additional properties with dynamic names if necessary.

To achieve this, I have implemented the following:

interface ItemProperty {
    foo: string;
    bar: string;
}
interface Item {
    itemName: string;
    [propertyName: string]: ItemProperty;
}

However, this implementation leads to the error message:

Property 'itemName' of type 'string' is not assignable to 'string' index type 'ItemProperty'.

Since itemName is technically part of ItemProperty but it is a string, not an entire ItemProperty object.

How can I resolve this issue so that itemName can be set without having to fulfill the requirements of ItemProperty?

An example of a final instance of Item could look like the following:

const item: Item = {
    itemName: "Item 1",
    dynamicProperty1: {
        foo: "foo",
        bar: "bar"
    }
};

javascript typescript

Answer 1

Answer №1

To address this issue, one solution is to utilize a type union as shown below:

type Item = {
    [propertyName: string]: ItemProperty
} | {itemName: string}

This allows for either a string type or an object type to be accepted.

interface ItemProperty {
    foo: string;
    bar: string;
}

type Item = {
    [propertyName: string]: ItemProperty
} | {itemName: string}


const a: Item = {
    itemName: 'something', // works
    a: {
        bar: 'a',
        foo: 'c'
    }, // works
    b: 'something else' // error: the key is not 'itemName'
}

Typescript Playground

Answer 2

To address this issue, one solution is to utilize a type union as shown below:

type Item = {
    [propertyName: string]: ItemProperty
} | {itemName: string}

This allows for either a string type or an object type to be accepted.

interface ItemProperty {
    foo: string;
    bar: string;
}

type Item = {
    [propertyName: string]: ItemProperty
} | {itemName: string}


const a: Item = {
    itemName: 'something', // works
    a: {
        bar: 'a',
        foo: 'c'
    }, // works
    b: 'something else' // error: the key is not 'itemName'
}

Typescript Playground

Answer 3

Answer №2

When working with an interface like this:

interface Item {
   itemName: string;
    [propertyName: string]: ItemProperty;
}

TypeScript will attempt to locate a definition for the property. If found, it will enforce it. Otherwise, it will default to a dynamic definition.

An easy fix is to broaden the type definition of itemName to accept multiple types:

interface Item {
   itemName: string | ItemProperty;
   [propertyName: string]: ItemProperty;
}

Answer 4

When working with an interface like this:

interface Item {
   itemName: string;
    [propertyName: string]: ItemProperty;
}

TypeScript will attempt to locate a definition for the property. If found, it will enforce it. Otherwise, it will default to a dynamic definition.

An easy fix is to broaden the type definition of itemName to accept multiple types:

interface Item {
   itemName: string | ItemProperty;
   [propertyName: string]: ItemProperty;
}

The clash between a static property name type and a dynamic property name on an interface is causing

Answer №1

Answer №2

Similar questions

Adding elements to an array using push method during a loop where elements are

Combine an array of objects that are dynamically created into a single object

Unable to communicate between react components

Confirm the login form using JavaScript and PHP

Utilizing only JavaScript to parse JSON data

Error: The method _firestore.default.initializeApp is not defined as a function

Is there a way to determine the specific child property types of a custom Generic type extension?

Which comes first in AngularJS: ng-include or ng-repeat?

What are the steps to resolve the End of Expression issue in my Directive's markup?

Updating a data structure to include a new attribute within a subcategory (Routes)

I'm curious about this `express()` function in the `var express = require('express'); var app = express();` code. Is it a method or a constructor, and where does it originate from?

Create a JavaScript function that uses regular expressions to parse URLs from a given string and turns

AngularJS does not allow empty spaces in textarea inputs

Create HTML code automatically from JSON data

Is it possible to utilize Math.Round within the <return> tag when coding in React?

Jquery Plugin for Click Selection Activation

Managing a variety of tasks within the handleBeforeInput function in DraftJS

How do you eliminate row highlighting on the <TableRow> component within Material-UI's <Table> using ReactJS?

Encountering a problem with AngularJS when attempting to access an array and display an alert message

Utilizing AngularJS to Transform String Formats