Since 2018, there is an easier way in Typescript, without using keyof typeof:
let obj: { [key in MyEnum]: any} =
{ [MyEnum.First]: 1, [MyEnum.Second]: 2 };
To not have to include all keys:
let obj: { [key in MyEnum]?: any} =
{ [MyEnum.First]: 1 };
To know the difference between in and keyof typeof, continue reading.
in Enum vs keyof typeof Enum
in Enum compiles to enum values and keyof typeof to enum keys.
Other differences
With keyof typeof, you cannot change the enum properties:
let obj: { [key in keyof typeof MyEnum]?: any} = { First: 1 };
obj.First = 1;
// Cannot assign to 'First' because it is a read-only property.
... unless you use -readonly:
let obj: { -readonly [key in keyof typeof MyEnum]?: any} = { First: 1 };
obj.First = 1; // works
But you can use any integer key?!:
let obj: { [key in keyof typeof MyEnum]?: any} = { First: 1 };
obj[2] = 1;
keyof typeof will compile to:
{
[x: number]: any;
readonly First?: any;
readonly Second?: any;
}
Note both the [x: number] and the readonly properties. This [x: number] property doesn't exist with a string enum.
But with in Enum, you can change the object:
enum MyEnum {
First, // default value of this is 0
Second, // default value of this is 1
}
let obj: { [key in MyEnum]?: any} = { [MyEnum.First]: 1 };
obj[MyEnum.First] = 1; // can use the enum...
obj[0] = 1; // but can also use the enum value,
// as it is a numeric enum by default
It's a numeric enum. But we can't use any number:
obj[42] = 1;
// Element implicitly has an 'any' type because
// expression of type '42' can't be used to index type '{ 0?: any; 1?: any; }'.
// Property '42' does not exist on type '{ 0?: any; 1?: any; }'.
The declaration compiles to:
{
0?: any;
1?: any;
}
We allow only 0 and 1, the values of the enum.
This is in line with how you would expect an enum to work, there are no surprises unlike keyof typeof.
It works with string and heterogenous enums:
enum MyEnum
{
First = 1,
Second = "YES"
}
let obj: { [key in MyEnum]?: any} = { [MyEnum.First]: 1, [MyEnum.Second]: 2 };
obj[1] = 0;
obj["YES"] = 0;
Here the type is:
{
1?: any;
YES?: any;
}
Get immutability with readonly:
let obj: { readonly [key in MyEnum]?: any} = {
[MyEnum.First]: 1,
};
obj[MyEnum.First] = 2;
// Cannot assign to '1' because it is a read-only property.
... which makes these keys readonly:
{
readonly 1?: any;
readonly 2?: any;
}
Summary
in Enum |
keyof typeof Enum |
|---|---|
| Compiles to enum values | Compiles to enum keys |
| Does not allow values outside the enum | Can allow numeric values outside the enum if you use a numeric enum |
Can change the object, immutability opt-in with readonly |
Can't change enum props without -readonly. Other numeric values outside the enum can be |
Use in Enum if possible.
Since 2018, there is an easier way in Typescript, without using keyof typeof:
let obj: { [key in MyEnum]: any} =
{ [MyEnum.First]: 1, [MyEnum.Second]: 2 };
To not have to include all keys:
let obj: { [key in MyEnum]?: any} =
{ [MyEnum.First]: 1 };
To know the difference between in and keyof typeof, continue reading.
in Enum vs keyof typeof Enum
in Enum compiles to enum values and keyof typeof to enum keys.
Other differences
With keyof typeof, you cannot change the enum properties:
let obj: { [key in keyof typeof MyEnum]?: any} = { First: 1 };
obj.First = 1;
// Cannot assign to 'First' because it is a read-only property.
... unless you use -readonly:
let obj: { -readonly [key in keyof typeof MyEnum]?: any} = { First: 1 };
obj.First = 1; // works
But you can use any integer key?!:
let obj: { [key in keyof typeof MyEnum]?: any} = { First: 1 };
obj[2] = 1;
keyof typeof will compile to:
{
[x: number]: any;
readonly First?: any;
readonly Second?: any;
}
Note both the [x: number] and the readonly properties. This [x: number] property doesn't exist with a string enum.
But with in Enum, you can change the object:
enum MyEnum {
First, // default value of this is 0
Second, // default value of this is 1
}
let obj: { [key in MyEnum]?: any} = { [MyEnum.First]: 1 };
obj[MyEnum.First] = 1; // can use the enum...
obj[0] = 1; // but can also use the enum value,
// as it is a numeric enum by default
It's a numeric enum. But we can't use any number:
obj[42] = 1;
// Element implicitly has an 'any' type because
// expression of type '42' can't be used to index type '{ 0?: any; 1?: any; }'.
// Property '42' does not exist on type '{ 0?: any; 1?: any; }'.
The declaration compiles to:
{
0?: any;
1?: any;
}
We allow only 0 and 1, the values of the enum.
This is in line with how you would expect an enum to work, there are no surprises unlike keyof typeof.
It works with string and heterogenous enums:
enum MyEnum
{
First = 1,
Second = "YES"
}
let obj: { [key in MyEnum]?: any} = { [MyEnum.First]: 1, [MyEnum.Second]: 2 };
obj[1] = 0;
obj["YES"] = 0;
Here the type is:
{
1?: any;
YES?: any;
}
Get immutability with readonly:
let obj: { readonly [key in MyEnum]?: any} = {
[MyEnum.First]: 1,
};
obj[MyEnum.First] = 2;
// Cannot assign to '1' because it is a read-only property.
... which makes these keys readonly:
{
readonly 1?: any;
readonly 2?: any;
}
Summary
in Enum |
keyof typeof Enum |
|---|---|
| Compiles to enum values | Compiles to enum keys |
| Does not allow values outside the enum | Can allow numeric values outside the enum if you use a numeric enum |
Can change the object, immutability opt-in with readonly |
Can't change enum props without -readonly. Other numeric values outside the enum can be |
Use in Enum if possible.
Yes. Just type
let layer:{[key in keyof typeof MyEnum]: any}
The keyof keyword is available since Typescript 2.1. See the TypeScript documentation for more details.
Using only keyof for enums wouldn't work (you'd get the keys of the enum type and not the enum constants), so you have to type keyof typeof.
Videos
It should be correct, but VS code complains:
I'm using framer motion and the typical little string typos are reminding me that maybe the time spent defining string enums is worth it.
Is there a way to use something like Object.keys to automatically generate a string enum with an object's keys? That would speed and clean things up quite a bit.
I don't think you can create enums like that, but you can have a type that is all the keys defined in an interface:
type K = keyof Interface;
I personally avoid enums at all costs. It's one of the only miss-steps in the design of the language, evidenced by the team not adding in any non-native runtime structures since.
Enums can be completely replaced by a union of known strings and/or a const object.
|undefineddoes not make a property optional, just means it can beundefined, there is a proposal to make|undefinedmembers optional but currently it's not implemented. You need to use?after]to make all properties optional{ [key in DialogType]?: Dialog }You can use the dialog enum values as keys, but they need to be computed properties:
let openDialogs: { [key in DialogType]?: Dialog } = { [DialogType.Options]: undefined, };{ [key: number or string]: Dialog }is an index signature. Index signatures are restricted to onlynumberorstringas the key type (not even a union of the two will work). So if you use an index signature you can index by anynumberorstring(we can't restrict to onlyDialogTypekeys). The concept you are using here is called mapped types. Mapped types basically generate a new type based on a union of keys (in this case the members of DialogType enum) and a set of mapping rules. The type we created above is basically equivalent to:let o: { [DialogType.Help]?: Dialog; [DialogType.Options]?: Dialog; }
Here is an example of how to use enum as index in typescript:
enum DialogType {
Options,
Help,
About
}
type Dialog = {
whatever: string;
};
type DialogMap = { [key in DialogType]?: Dialog };
let o: DialogMap = {
[ DialogType.Options ]: { whatever: "1" },
[ DialogType.Help ]: { whatever: "2" }
};