In Typescript, an index signature parameter can only be of type 'string' or 'number'

Question

In Typescript, an index signature parameter can only be of type 'string' or 'number'

I'm facing an issue with a generic type that defaults to string:

interface EntityState<typeOfID = string> {
  entities: { [ id: typeOfID]: any };
}

The error I receive is:

An index signature parameter type must be either 'string' or 'number'.(1023)

I have attempted the following solution as well:

interface EntityState<typeOfID extends string | number> {
  entities: { [ id: typeOfID]: any };
}

However, this approach has not resolved the issue. What steps can I take to fix it?

typescript

Answer 1

Answer №1

If you encounter this situation, try utilizing the Record feature.

Take into account the following example:

export const enum MyEnumKeys {
  Key1 = 'key1',
}

interface EntityState<typeOfID> {
  entities: Record<typeOfID, any>;
}

const test: EntityState<MyEnumKeys> = {
  entities: {
    key1: 1,
    anotherKey: 2 // error occurs here
  }
}

Answer 2

If you encounter this situation, try utilizing the Record feature.

Take into account the following example:

export const enum MyEnumKeys {
  Key1 = 'key1',
}

interface EntityState<typeOfID> {
  entities: Record<typeOfID, any>;
}

const test: EntityState<MyEnumKeys> = {
  entities: {
    key1: 1,
    anotherKey: 2 // error occurs here
  }
}

Answer 3

Answer №2

When working with JavaScript (and TypeScript), it's important to note that object keys are limited to being either strings or Symbols. TypeScript enforces this rule to ensure the type of a key remains within these boundaries.

According to Mozilla's Developer Docs:

All keys in square bracket notation are automatically converted to strings unless they're Symbols, as JavaScript only supports string or Symbol keys for objects. In the event that a different type is used, like Boolean, JavaScript will attempt to stringify it to use as a key.

Your examples illustrate attempts to define key types outside of the accepted parameters by including Booleans and a combination of strings and numbers. TypeScript does not permit such flexibility, as certain types may not be successfully converted to a string for indexing purposes.

Edit: It's worth noting that numbers are an exception to this rule, as they can easily be converted to strings. This concept is referred to as "indexability."

Edit 2: While JavaScript allows for Symbol keys, TypeScript currently does not support this feature. More information on this decision can be found in the ongoing discussion on TypeScript's GitHub Repository.

Answer 4

When working with JavaScript (and TypeScript), it's important to note that object keys are limited to being either strings or Symbols. TypeScript enforces this rule to ensure the type of a key remains within these boundaries.

According to Mozilla's Developer Docs:

All keys in square bracket notation are automatically converted to strings unless they're Symbols, as JavaScript only supports string or Symbol keys for objects. In the event that a different type is used, like Boolean, JavaScript will attempt to stringify it to use as a key.

Your examples illustrate attempts to define key types outside of the accepted parameters by including Booleans and a combination of strings and numbers. TypeScript does not permit such flexibility, as certain types may not be successfully converted to a string for indexing purposes.

Edit: It's worth noting that numbers are an exception to this rule, as they can easily be converted to strings. This concept is referred to as "indexability."

Edit 2: While JavaScript allows for Symbol keys, TypeScript currently does not support this feature. More information on this decision can be found in the ongoing discussion on TypeScript's GitHub Repository.

In Typescript, an index signature parameter can only be of type 'string' or 'number'

Answer №1

Answer №2

Similar questions

What is the best way to resolve the "unknown" type using AxiosError?

The parent component's state does not reflect updates made by the child component's successful dispatch of a reducer through Redux Toolkit

What is the best way to ensure that the operations are not completed until they finish their work using RX

Place a new button at the bottom of the react-bootstrap-typeahead dropdown menu for additional functionality

Angular2 is throwing a Typescript Reference error because 'is not defined' in the context

Address aliases in the webpack configuration file

The API endpoint code functions perfectly in Express, but encounters an error when integrated into Next.js

Service for language translation in Angular

Dynamic autocomplete in Oclif utilizing an HTTP request

Tips for ensuring the angular FormArray is properly validated within mat-step by utilizing [stepControl] for every mat-step

Handling JSON data with Reactive Extensions in JavaScript

Overriding the 'first' attribute in PrimeNG's lazy table when implementing filtering

Exploring the capabilities of Vitest by testing a RESTful API in SvelteKit

WebStorm is not implementing the exclude option as specified in the tsconfig.json file

What is the process for including a new item in the p-breadcrumb list?

Mastering Interpolation in React with TypeScript is essential for creating dynamic and interactive UI components. By leveraging the

Fetching User Details Including Cart Content Upon User Login

Can someone provide guidance on effectively implementing this JavaScript (TypeScript) Tree Recursion function?

Error in Next.js when trying to use Firebase Cloud Messaging: ReferenceError - navigator is not defined in the Component.WindowMessagingFactory instanceFactory

Exploring the integration of React.Components with apollo-client and TypeScript