Typescript type string is not assignable to type keyof

Question

I have the following code:

const KeyboardEventKeys = {
  Escape: 'Escape',
  Enter: 'Enter',
  Tab: 'Tab'
};

type KeyboardEventKeys = keyof (typeof KeyboardEventKeys);

function doSomething(key: KeyboardEventKeys) {}

When I'm passing to a function the value of one of the object properties it yells at me:

doSomething(KeyboardEventKeys.Enter);

One solution is to cast as KeyboardEventKeys, but it's a redundant solution. How can I do it without it?

I also don't want to add doSomething(key: KeyboardEventKeys | string) because I will lose the type guard.

score 6 · Accepted Answer · answered Jan 23 '19 at 09:58

The solution to use an enum is a good one, and I would recommend you use it.

The reason you get an error is that typescript will not infer string literal types for const members. You can force the compiler to infer string literal types by using an extra function when you create the const:

function createEnum<T extends { [P in keyof T]: P }>(o: T) {
    return o
}
const KeyboardEventKeys = createEnum({ // typed as { Escape: "Escape"; Enter: "Enter"; Tab: "Tab"; }

    Escape: 'Escape',
    Enter: 'Enter',
    Tab: 'Tab'
});

type KeyboardEventKeys = keyof (typeof KeyboardEventKeys);

function doSomething(key: KeyboardEventKeys) { }
doSomething("Enter")
doSomething("") //err

score 6 · Answer 2 · answered Apr 04 '19 at 16:54

6

Since TypeScript 3.4 you may force the compiler to preserve literal types by using special as const cast construction. So here you may write

const KeyboardEventKeys = {
  Escape: 'Escape',
  Enter: 'Enter',
  Tab: 'Tab'
} as const;

type KeyboardEventKeys = keyof typeof KeyboardEventKeys;

function doSomething(key: KeyboardEventKeys) {}

But, ultimately I recommend using [const] enum KeyboardEventKeys { ... } instead.

answered Apr 04 '19 at 16:54

Veetaha

833
1
8
19

why do you recommend using enum, when it will generate redundant code – Akshay Vijay Jain Apr 26 '21 at 09:21
What particular redundant code will it generate? IIRC it will generate the same `const KeyboardEventKeys` variable, there is no redundancy there – Veetaha Apr 28 '21 at 15:57
enum d {A} --> cons d= {0:A,A:0} while i would do d = {A:'A'} – Akshay Vijay Jain Apr 29 '21 at 09:16

score 2 · Answer 3 · answered Jan 23 '19 at 09:52

2

Solution is to use enums instead of objects.

enum KeyboardEventKeys {
  Escape ='Escape',
  Enter = 'Enter',
  Tab = 'Tab'
};


function doSomething(key: KeyboardEventKeys) {}

You can now pass variables like so

doSomething(KeyboardEventKeys.Enter);

answered Jan 23 '19 at 09:52

Praveen

2,400
3
23
30

1

This doesn't allow me to pass the raw string doSomething("Enter"); – undefined Jan 23 '19 at 09:54
1

Also, I don't like enums because they generate more redundant code. – undefined Jan 23 '19 at 09:55
1

Why do you have to pass "enter as raw string? You can pass KeyboardEventKeys.Enter instead? – Praveen Jan 23 '19 at 10:02

score 2 · Answer 4 · edited Jan 11 '23 at 13:30

2

I am posting this here as it matches the thread title.

If you have an object of a Key value pair. You want to loop it with a forEach pulling off the key as a keyof YourObject and the value as a string. (example being input field name and value list) Here is what you need to do.

type FormDataArray = [ keyof FormStateObjectType,  string ];

const entries = Object.entries(state.formData) as FormDataArray[];
entries.forEach(([fieldName, fieldValue]) => {
    // Process code here
});

Results in:

fieldName being of type keyof FormStateObjectType
fieldValue being of type string

edited Jan 11 '23 at 13:30

hlovdal

26,565
10
94
165

answered Jan 31 '22 at 21:00

Centerwork

139
2
4

This works, although it is locked to one single value type. By using `Entries` from [this answer](https://stackoverflow.com/a/60142095/23118) you will be able to simply use `const entries = Object.entries(myVar) as Entries;` without having to explicitly specifying the object type and it might have members of different types. – hlovdal Jan 11 '23 at 13:38

score 1 · Answer 5 · answered Jan 23 '19 at 10:02

1

Have you tried this:

keyof { [key: string]: KeyboarEventKeys }

answered Jan 23 '19 at 10:02

David Kabii

642
6
17

It works, but you won't get the auto-completion whose inclusion is implied by wanting to use `keyof` – mwieczorek Aug 20 '20 at 21:23

Typescript type string is not assignable to type keyof

5 Answers5