Creating a typescript object shape without an index signature involves specifying the exact properties

Question

Creating a typescript object shape without an index signature involves specifying the exact properties

I have a query regarding a potential design gap in TypeScript. Consider a function that accepts objects meeting a specific interface:

interface Params {
    [key: string]: string | number | boolean | undefined | null;
}

This interface specifies that the keys must be strings and the properties can be primitive types or void.

If I define another method that takes an interface fulfilling the Params interface, I encounter an error stating that the other interface lacks an index signature. An example of such an interface could be:

interface Foo {
    bar: string;
}

Even changing the signature to

Record<string, string | number | boolean | undefined | null>

does not resolve the missing index signature issue.

A snippet of code demonstrating this scenario is shown below. It is essential to specify the key and value type of the object for certain operations with Object.entries:

function specificFunction(obj: Foo) {
  genericFunction(obj);
}

function genericFunction(params: Params) {
  Object.entries(params).forEach(([key, value]) => {
    …
  })
}

EDIT: It is crucial that the behavior of the specificFunction remains unchanged, as it serves to narrow down the allowed interface. This restriction ensures specific properties are present in objects to achieve a desired outcome.

typescript

Answer 1

Answer №1

genericFunction requires a type with an index signature.

The default behavior for Foo does not include an index signature because it is defined as an interface.

However, there is a workaround. If you declare Foo using the type keyword instead of interface, it will work.

Why?

This is because types defined with the type keyword have index signatures by default.

Please refer to this answer for more insights.

Therefore, the following code will compile:

interface Params {
    [key: string]: string | number | boolean | undefined | null;
}

// use type here instead of interface
type Foo = {
    bar: string;
}

function specificFunction(obj: Foo) {
  genericFunction(obj);
}

function genericFunction(params: Params) {
  Object.entries(params).forEach(([key, value]) => {

  })
}

Playground

UPDATE 2 If you don't have control over Params and Foo, you can use the following utility type:

interface Params {
    [key: string]: string | number | boolean | undefined | null;
}

interface Foo {
    bar: string;
}

type Values<T> = T[keyof T]

type MakeIndexed<T> = {
    [P in keyof T]: T[P]
}

function specificFunction(obj: MakeIndexed<Foo>) {
    genericFunction(obj);
}

function genericFunction(params: Params) {
    Object.entries(params).forEach(([key, value]) => {

    })
}

Answer 2

genericFunction requires a type with an index signature.

The default behavior for Foo does not include an index signature because it is defined as an interface.

However, there is a workaround. If you declare Foo using the type keyword instead of interface, it will work.

Why?

This is because types defined with the type keyword have index signatures by default.

Please refer to this answer for more insights.

Therefore, the following code will compile:

interface Params {
    [key: string]: string | number | boolean | undefined | null;
}

// use type here instead of interface
type Foo = {
    bar: string;
}

function specificFunction(obj: Foo) {
  genericFunction(obj);
}

function genericFunction(params: Params) {
  Object.entries(params).forEach(([key, value]) => {

  })
}

Playground

UPDATE 2 If you don't have control over Params and Foo, you can use the following utility type:

interface Params {
    [key: string]: string | number | boolean | undefined | null;
}

interface Foo {
    bar: string;
}

type Values<T> = T[keyof T]

type MakeIndexed<T> = {
    [P in keyof T]: T[P]
}

function specificFunction(obj: MakeIndexed<Foo>) {
    genericFunction(obj);
}

function genericFunction(params: Params) {
    Object.entries(params).forEach(([key, value]) => {

    })
}

Creating a typescript object shape without an index signature involves specifying the exact properties

Answer №1

Similar questions

"X is not compatible with these types of property," but it is not the case

Working with e.charcode in TypeScript allows for easy access to

Office-Js Authentication for Outlook Add-ins

Is there a way to revert my Ionic CLI back to the previous version that I had installed?

The placeholder within my input moves up and down when switching the input type from password to text

Angular 4/2: Exploring the Concept of Method Overloading

How should one properly assign an element type provided as an argument?

Angular: Tailoring the Context Menu

Tips for accessing the type of a nested union in TypeScript

Is it possible to implement Angular Universal on Github Pages?

What could be the reason for my Angular 2 app initializing twice?

I'm unable to modify the text within my child component - what's the reason behind this limitation?

Error encountered: Unable to locate module 'psl'

Constructing a hierarchical tree structure using an array of objects that are initially flat

Verify if an object property is called with the toHaveBeenCalledWith() function in Jasmine

Retrieve the value of [routerLinkActive] in the component's class

Executing npm and ng commands via an Ant script on a Windows machine leads to the error message "The specified file could not be found."

Achieve the capability to upload multiple files in Next.js using the upload.io integration feature

Can the grunt command be executed automatically after saving code in TypeScript?

Using Typescript with Gulp 4 and browser-sync is a powerful combination for front-end development