Interface in Typescript that extends Object with keys that are dynamically assigned

Question

Interface in Typescript that extends Object with keys that are dynamically assigned

In my Typescript code, I encountered an issue while trying to make my interface extend Object when using an indexer with a key as a string.

When I do not extend Object, everything works fine except that the intellisense does not provide suggestions for the Object.hasOwnProperty() method.

interface MyObject extends Object {
 [key: string] : string;
}

The above code results in a compile time error: "Property 'hasOwnProperty' of type '(v: string) => boolean' is not assignable to string index type 'string'."

Later in my code, I need to use a variable of type MyObject to check if it contains a specific key using the hasOwnProperty method of Object.

typescript object dynamic interface key

Answer 1

Answer №1

Extending Object is not necessary to utilize the hasOwnProperty method. Since all objects inherit from Object, this method will be available on any instance of the interface.

interface MyObject {
    [key: string]: string;
}

var obj: MyObject = {
    "foo" : "1"
}
obj.hasOwnProperty("foo");

The index signature essentially ensures that all members of the interface will align with the return type of the index. One way to work around this constraint is by employing union types, although directly creating such an object without Object.assign remains challenging:

type MyObject  = Object & { // We include Object even though it may seem unnecessary
    [key: string]: string;
} & { // Additional incompatible properties can be specified
    required: boolean
}

// An instance can be created using `Object.assign`
var obj2: MyObject = Object.assign({
    "foo" : "1"
}, {
    required: true
});
obj2.hasOwnProperty("foo");
console.log(obj2.required);
console.log(obj2['bar']);

Answer 2

Extending Object is not necessary to utilize the hasOwnProperty method. Since all objects inherit from Object, this method will be available on any instance of the interface.

interface MyObject {
    [key: string]: string;
}

var obj: MyObject = {
    "foo" : "1"
}
obj.hasOwnProperty("foo");

The index signature essentially ensures that all members of the interface will align with the return type of the index. One way to work around this constraint is by employing union types, although directly creating such an object without Object.assign remains challenging:

type MyObject  = Object & { // We include Object even though it may seem unnecessary
    [key: string]: string;
} & { // Additional incompatible properties can be specified
    required: boolean
}

// An instance can be created using `Object.assign`
var obj2: MyObject = Object.assign({
    "foo" : "1"
}, {
    required: true
});
obj2.hasOwnProperty("foo");
console.log(obj2.required);
console.log(obj2['bar']);

Interface in Typescript that extends Object with keys that are dynamically assigned

Answer №1

Similar questions

Deploying Firebase functions results in an error

What is the best way to handle an OR scenario in Playwright?

What is the best way to transform a ReadonlyArray<any> into an array of any type?

failure to render updated content after modification of variable

Encountered an issue: The type 'Usersinterface' is not meeting the document constraints

Ionic 3: Incorporating Baidu map functionality exclusively for web browsers

How to pass a single property as a prop in TypeScript when working with React

Executing a function in C++/Win32 without prior knowledge of its signature dynamically

What sets apart using (@Inject(Http) http: Http) from not using it?

"Unfortunately, this container did not send out any hits" - Google Tag Manager

Using TypeScript to categorize items based on common characteristics and assigning them a unique group ID

Tab-based Ionic 2 advertising campaign featuring banners

Error encountered in Typescript: SyntaxError due to an unexpected token 'export' appearing

The modal stubbornly refuses to close

Utilize Angular to initiate the transmission of attribute values upon a click event

Why is TypeScript only supporting Promise<T> params and not Promise<T1,T2>?

Utilize prop-types inheritance when a component is rendered via props

Error in Angular compiler-cli: The namespace 'ts' does not contain the exported member 'ResolutionMode'

Instructions on changing the color of a full row in the table when the value is missing within the <td> tag. The value is retrieved from an API and iterated through

What is the specific event type triggered by the onError event when utilizing an img tag?