A method for defining an index signature without having to expose the interface

Question

A method for defining an index signature without having to expose the interface

Below is an example of code to consider:

interface MyInterface {
  foo: string
  bar: string
  baz: string
}

const myObj: MyInterface = {
  foo: "foo",
  bar: "bar",
  baz: "baz"
};

Object.keys(myObj).forEach(obj => {
  obj = myObj[obj];
});

When strict mode is enabled, the error TS7017 occurs: Element implicitly has an 'any' type because type 'MyInterface' has no index signature.

An easy fix would be:

interface MyInterface {
  [key: string]: string;
  foo: string
  bar: string
  baz: string
}

However, this approach allows for any string properties in MyInterface-objects.

Another consideration would be to use a mapped type:

type ValidEnteries = "foo" | "bar" | "baz";

type Alternative = {
  [key in ValidEnteries]: string
}

While this solution might seem correct, it brings back the original problem of missing an index signature.

Is there a way to include an index signature while also restricting the number of properties in an object?

typescript index-signature

Answer 1

Answer №1

If you simply need to access the existing properties of an interface without using an index signature, it is possible to do so by indexing any object with a string that matches a known key of the object. For example:

 myObj['bar'] // This statement is valid as 'bar' is a recognized key in MyInterface

The issue arises when Object.keys(myObj) returns a type of string[] instead of Array<keyof T>. To handle this, one solution is to assert the type to inform the compiler that keys will return an array of keys from MyInterface:

Object.keys(myObj).forEach(obj => {
    let d = myObj[obj as keyof MyInterface];
});
// OR
(Object.keys(myObj) as Array<keyof MyInterface>).forEach(obj => {
    let d = myObj[obj];
});

If you prefer having the keys function always return Array<keyof T>, you can extend the global declaration as shown below:

declare global { /// Needed if you are in a module otherwise omit this and the closing }
    interface ObjectConstructor {
        keys<T extends object>(o: T) : Array<keyof T>
    }
}

// Now you can directly iterate through the keys without additional casting 
Object.keys(myObj).forEach(obj => {
    let d = myObj[obj];
});

Answer 2

If you simply need to access the existing properties of an interface without using an index signature, it is possible to do so by indexing any object with a string that matches a known key of the object. For example:

 myObj['bar'] // This statement is valid as 'bar' is a recognized key in MyInterface

The issue arises when Object.keys(myObj) returns a type of string[] instead of Array<keyof T>. To handle this, one solution is to assert the type to inform the compiler that keys will return an array of keys from MyInterface:

Object.keys(myObj).forEach(obj => {
    let d = myObj[obj as keyof MyInterface];
});
// OR
(Object.keys(myObj) as Array<keyof MyInterface>).forEach(obj => {
    let d = myObj[obj];
});

If you prefer having the keys function always return Array<keyof T>, you can extend the global declaration as shown below:

declare global { /// Needed if you are in a module otherwise omit this and the closing }
    interface ObjectConstructor {
        keys<T extends object>(o: T) : Array<keyof T>
    }
}

// Now you can directly iterate through the keys without additional casting 
Object.keys(myObj).forEach(obj => {
    let d = myObj[obj];
});

A method for defining an index signature without having to expose the interface

Answer №1

Similar questions

What is the best way to set a value for an undeclared control in a reactive form?

How to use Angular 2 to communicate with JavaScript API whenever the router switches to

Is there a method to control angular routes during the compilation process?

Tslint is notifying that JSX elements without any children must be self-closing to prevent errors [Error]

What steps can I take to resolve the issue of "No ESLint configuration found" when working with files located outside the directory containing .eslintrc.js? This problem occurs specifically when attempting to utilize an enum value

Develop an asynchronous thunk with TypeScript in Redux Toolkit, utilizing the features of rejectWithValue and Payload types for handling errors

What is the best way to incorporate tailored validation into reactive forms in Angular?

What is the reason for the JSON Structure always displaying a numeric key first?

best practices for choosing items from a dropdown menu using Angular

Why won't my fetch API function properly in my Next.js project?

What is the best way to incorporate an Angular template to verify if a particular array includes an object with a property that matches a specific value?

Instructing TypeScript to exclude ["default"] from a newly created class

Check that the elements within the array are present in the observable array

Build for Node.js using TypeScript with full functionality

Tips for inserting a component into a div selector using Angular 2

What strategies can I implement to streamline the use of these functions instead of creating a separate one for each textfield

Utilize React Styled Components to seamlessly unify the styles of two different components

Is it possible to extend the Object class in order to automatically initialize a property when it is being modified?

Error message while attempting to update devextreme-datagrid: "Received HTTP failure response for an unknown URL: 0 Unknown Error"

Create an asynchronous method within an object-oriented programming (OOP) class