Typescript 索引签名参数类型必须是“字符串”或“数字”

Question

I have a generic which its default type is a string :

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

I get the error:

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

I also tried the following:

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

And it doesn't work. How to solve it?

Answer 1

You can use Record in such a case.

Consider this:

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

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

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

Answer 2

In JavaScript (and as such, TypeScript), object keys are always string or Symbol This is what TypeScript is trying to tell you: You cannot set the type of a key to anything other than these.

From Mozilla's Developer Docs:

Please note that all keys in the square bracket notation are converted to string unless they're Symbols, since JavaScript object property names (keys) can only be strings or Symbols (at some point, private names will also be added as the class fields proposal progresses, but you won't use them with [] form). For example, in the above code, when the key obj is added to the myObj, JavaScript will call the obj.toString() method, and use this result string as the new key.

In your first example, you're saying the key type can be pretty much anything, but it's usually strings. This allows ie booleans, which is not allowed.

In your second example, you are saying that the key type is a superset of string and numbers. Which is still not allowed, as the types can still not guarantee that they are stringify-able. (ie null, which conveniently has typeof(null) == "object", but cannot be converted to string.)

Edit: Numbers are also allowed , as they are guaranteed to have be able to convert to string. The correct term for "stringify-able" is indexable.

Edit 2: Although JavaScript allows for Symbol as keys, TypeScript currently do not. You can read the discussion which started in 2015 at TypeScript's GitHub Repository