Creating a versatile TypeScript interface that can accurately represent a wide range of types, interfaces, and objects whilst imposing restrictions on the allowable value types within

Question

Creating a versatile TypeScript interface that can accurately represent a wide range of types, interfaces, and objects whilst imposing restrictions on the allowable value types within

I am looking to define a versatile TypeScript interface that can accommodate any type, interface, or object while imposing restrictions on the types of values it contains.

Let me introduce MyInterface, which includes properties fooIProp and barIProp storing strings with an example:

interface MyInterface {
  fooIProp: string;
  barIProp: string;
};

const testInterface: MyInterface = {
  fooIProp: "foo",
  barIProp:  "bar"
};

Next is the MyType type alias, featuring properties fooTProp and barTProp holding strings as shown here:

type MyType = {
  fooTProp: string;
  barTProp: string;
}

const testType: MyType = {
  fooTProp: "foo",
  barTProp: "bar"
}

Here's an object with properties fooObjectKey and barObjectKey keeping strings:

const testObject = {
  fooObjectKey: "foo",
  barObjectKey: "bar"
}

I have devised MyGenericInterface that accepts objects containing only strings for keys and values:

interface MyGenericInterface { [key: string]: string }

When trying to assign testInterface to MyGenericInterface,

const testFromInterface: MyGenericInterface = testInterface;
const testFromType: MyGenericInterface = testType;
const testFromObject: MyGenericInterface = testObject;

A TS2322 error is thrown:

Type 'MyInterface' is not assignable to type 'MyGenericInterface'.
  Index signature is missing in type 'MyInterface'.(2322)

Visit the TypeScript Playground for more insights.

Question: How can I develop a generic TypeScript interface that supports various types/interfaces/objects while controlling the types of values within?

javascript typescript object types interface

Answer 1

Answer №1

Presently, there is a recognized issue where implicit index signatures are not automatically included in values of an interface type, unlike in anonymous object types. For more details, refer to this source and the discussion on microsoft/TypeScript#15300.

The reason behind this behavior stems from the fact that TypeScript object types are extendible/open rather than closed/exact, as explained further in microsoft/TypeScript#12936. This allows for properties beyond those explicitly defined in an interface.

const someObject = {
  fooIProp: "foo",
  barIProp: "bar",
  baz: 12345
};
const unexpectedMyInterface: MyInterface = someObject; // no error

Although warnings may be raised regarding excess properties when directly adding unknown ones to an annotated object literal, giving a sense of exactness to object types in TypeScript even though they are not truly exact.

Assigning unexpectedMyInterface to MyInterface but not to MyGenericInterface adheres to TypeScript's principles, preventing incorrect assignments. The same logic applies when dealing with MyType:

const someOtherObject = {
  fooTProp: "foo",
  barTProp: "bar",
  baz: 12345
};
const unexpectedMyType: MyType = someOtherObject;

However, assigning unexpectedMyType incorrectly to MyGenericInterface is permissible:

const badMyGenericInterface: MyGenericInterface = unexpectedMyType;
console.log(badMyGenericInterface.baz?.toUpperCase()); // no error in TS, but 
// RUNTIME 💥 badMyGenericInterface.baz.toUpperCase is not a function

This decision seems to reflect a tradeoff between safety and usability, favoring allowing such actions for anonymous object types over interface types due to potential future augmentations or mergers.

If you wish to advocate for extending implicit index signatures to interface types as well, show your support on microsoft/TypeScript#15300.

Until any changes are made, workarounds like using mapped types to convert MyInterface to its equivalent object type before assignment can be utilized:

type Id<T> = { [K in keyof T]: T[K] } // change interface to mapped type version
type MyInterfaceAsType = Id<MyInterface>;
const testFromInterface2: MyGenericInterface = testInterface as MyInterfaceAsType
const testInterfaceAnonymousTypeVersion: MyInterfaceAsType = testInterface;
const testFromInterface3: MyGenericInterface = testInterfaceAnonymousTypeVersion;

While other solutions exist, their suitability may depend on specific use cases. Where are you encountering issues that require resolution?

For interactive exploration, here's a link to the code on the TypeScript playground: https://www.typescriptlang.org/play?target=7#code/JYOwLgpgTgZghgYwgAgLIE8CS5rycgbwChlkYB7czABSnIAcAuZAZzClAHMBuE5AIzhQadJq3ZdeAX15EE5EG2SQ22SLEQRmGNbk3IAvIT4UqtBswBEpywBo+g4ebGXHlojKJEw6eigwAKr4oRsSkpgHOzGwcIDwOQpGi0RJx0l7yimDKEGxBftro+SHG4ZRJFsjWlHYJUBUubh4ZCkoqYADy-ABWEAjZocgmlF29-QDSEOhWNvakjqN9YJPTVU1SXqDqeP7oAOIQINDACLoa+ATIANoA1lMpsZwAug9cyBstWazkALYQi-1DKUyJQRJVquRavMhGDGkIoQI4AAvZgARgATABmAAsAFYPLxMkoAK5HAAefn6EAAJjocOctGgsPSdkCWL9-j0ltxkAB6XnIEDkZDQOhQLw+PxoTBAunbTSfJTsv4dMAAC2gAIGwIiUSqszqDSsbjmiJRyAxOPxniJ2VJEApSxpgWChWKbI5qo1UC1hNa2UEtP2h2OpxZmkKByOHDD8vwRntjqpQeKfsU5AANhAAHQZ8icAAUgYwUdDZx22cESIA-NmwOQAKr0PxQADCcBYEALAEpuzz+YLhaLyFBkKBkAEAMq2ATE7JEAcAJQbADkAphUABRZCAXg3AKU7iKDpZj5c0leRdcbzeg7c7Y5Yg+ycDIpP6wAUiuy7QAYnQfqekEjEMT3DeMclUUCIDTNpcjAX9fmKIDoxOACSnaVM5H9cC4L-LUkLLSCgXaX0JWCZBMGpAAeAIAD4gUuK5xjHEBkDudByBgCcXgnRinnePkBQQNU4DiFAtj0fB62QH44GvallDIgA3aAWHfEBvDIuUJIgABBFh3SMCjKK0hkaOgr9YPg-9IPRfCQLjNDYNQ5AOyZVC9OKTCvnadyhRAdAfnIYl9OCAA1FS1MKdyQqlIwfMg8zsKs1DMTslDCLipzIJ0vyAqCmKIHCqBVIUXggA

Answer 2

Presently, there is a recognized issue where implicit index signatures are not automatically included in values of an interface type, unlike in anonymous object types. For more details, refer to this source and the discussion on microsoft/TypeScript#15300.

The reason behind this behavior stems from the fact that TypeScript object types are extendible/open rather than closed/exact, as explained further in microsoft/TypeScript#12936. This allows for properties beyond those explicitly defined in an interface.

const someObject = {
  fooIProp: "foo",
  barIProp: "bar",
  baz: 12345
};
const unexpectedMyInterface: MyInterface = someObject; // no error

Although warnings may be raised regarding excess properties when directly adding unknown ones to an annotated object literal, giving a sense of exactness to object types in TypeScript even though they are not truly exact.

Assigning unexpectedMyInterface to MyInterface but not to MyGenericInterface adheres to TypeScript's principles, preventing incorrect assignments. The same logic applies when dealing with MyType:

const someOtherObject = {
  fooTProp: "foo",
  barTProp: "bar",
  baz: 12345
};
const unexpectedMyType: MyType = someOtherObject;

However, assigning unexpectedMyType incorrectly to MyGenericInterface is permissible:

const badMyGenericInterface: MyGenericInterface = unexpectedMyType;
console.log(badMyGenericInterface.baz?.toUpperCase()); // no error in TS, but 
// RUNTIME 💥 badMyGenericInterface.baz.toUpperCase is not a function

This decision seems to reflect a tradeoff between safety and usability, favoring allowing such actions for anonymous object types over interface types due to potential future augmentations or mergers.

If you wish to advocate for extending implicit index signatures to interface types as well, show your support on microsoft/TypeScript#15300.

Until any changes are made, workarounds like using mapped types to convert MyInterface to its equivalent object type before assignment can be utilized:

type Id<T> = { [K in keyof T]: T[K] } // change interface to mapped type version
type MyInterfaceAsType = Id<MyInterface>;
const testFromInterface2: MyGenericInterface = testInterface as MyInterfaceAsType
const testInterfaceAnonymousTypeVersion: MyInterfaceAsType = testInterface;
const testFromInterface3: MyGenericInterface = testInterfaceAnonymousTypeVersion;

While other solutions exist, their suitability may depend on specific use cases. Where are you encountering issues that require resolution?

For interactive exploration, here's a link to the code on the TypeScript playground: https://www.typescriptlang.org/play?target=7#code/JYOwLgpgTgZghgYwgAgLIE8CS5rycgbwChlkYB7czABSnIAcAuZAZzClAHMBuE5AIzhQadJq3ZdeAX15EE5EG2SQ22SLEQRmGNbk3IAvIT4UqtBswBEpywBo+g4ebGXHlojKJEw6eigwAKr4oRsSkpgHOzGwcIDwOQpGi0RJx0l7yimDKEGxBftro+SHG4ZRJFsjWlHYJUBUubh4ZCkoqYADy-ABWEAjZocgmlF29-QDSEOhWNvakjqN9YJPTVU1SXqDqeP7oAOIQINDACLoa+ATIANoA1lMpsZwAug9cyBstWazkALYQi-1DKUyJQRJVquRavMhGDGkIoQI4AAvZgARgATABmAAsAFYPLxMkoAK5HAAefn6EAAJjocOctGgsPSdkCWL9-j0ltxkAB6XnIEDkZDQOhQLw+PxoTBAunbTSfJTsv4dMAAC2gAIGwIiUSqszqDSsbjmiJRyAxOPxniJ2VJEApSxpgWChWKbI5qo1UC1hNa2UEtP2h2OpxZmkKByOHDD8vwRntjqpQeKfsU5AANhAAHQZ8icAAUgYwUdDZx22cESIA-NmwOQAKr0PxQADCcBYEALAEpuzz+YLhaLyFBkKBkAEAMq2ATE7JEAcAJQbADkAphUABRZCAXg3AKU7iKDpZj5c0leRdcbzeg7c7Y5Yg+ycDIpP6wAUiuy7QAYnQfqekEjEMT3DeMclUUCIDTNpcjAX9fmKIDoxOACSnaVM5H9cC4L-LUkLLSCgXaX0JWCZBMGpAAeAIAD4gUuK5xjHEBkDudByBgCcXgnRinnePkBQQNU4DiFAtj0fB62QH44GvallDIgA3aAWHfEBvDIuUJIgABBFh3SMCjKK0hkaOgr9YPg-9IPRfCQLjNDYNQ5AOyZVC9OKTCvnadyhRAdAfnIYl9OCAA1FS1MKdyQqlIwfMg8zsKs1DMTslDCLipzIJ0vyAqCmKIHCqBVIUXggA

Creating a versatile TypeScript interface that can accurately represent a wide range of types, interfaces, and objects whilst imposing restrictions on the allowable value types within

Answer №1

Similar questions

Arranging Check Boxes Side by Side

I'm baffled by the unexpected result I'm getting when using 'foreach' in node.js

A step-by-step guide on incorporating the C3 Gauge Chart into an Angular 5 application

Tips for preventing the caret (^) symbol from being added to a package when installing with yarn

Delving into the World of ES6 Symbols

Issue with Redis cache time-to-live not adhering to set expiration

Is there a way to select an element within a nested list item only when the preceding list item is clicked using Jquery/JavaScript?

Implementing JSON response in email functionality using Ajax and PHP

Using Node.js and Express for redirecting to a custom URL

The function findOne from Mongoose seems to be non-existent, all while utilizing the Passport library

The current context does not have a reference to TextBox

Incorporating an HTML/Javascript game into a reactJS website: A step-by-step

Implementing an All-Routes-Except-One CanActivate guard in Angular2

I need to fetch data from mongoDB by allowing the user to input a name into a search field, and then retrieve all documents that correspond to that search term

What is the best way to retrieve the UTC value of a specific date and time within a particular time zone using JavaScript?

Having trouble initiating the server using npm start

Instructions on activating dark mode with the darkreader plugin on a Vue.js website

Changing an object received as a prop in Vue.js

Utilizing the 'create' function in sqlite each time I need to run a query

Discover the method for concealing a button using ng-show and ng-hide directives