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.

Veetaha · Accepted Answer · 2019-04-04 16:54:46Z

7

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 4, 2019 at 16:54

Veetaha

8721 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Akshay Vijay Jain Over a year ago

why do you recommend using enum, when it will generate redundant code

Veetaha Over a year ago

What particular redundant code will it generate? IIRC it will generate the same const KeyboardEventKeys variable, there is no redundancy there

Akshay Vijay Jain Over a year ago

enum d {A} --> cons d= {0:A,A:0} while i would do d = {A:'A'}

Titian Cernicova-Dragomir · Accepted Answer · 2019-01-23 09:58:38Z

5

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

answered Jan 23, 2019 at 9:58

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Comments

Praveen · Accepted Answer · 2019-01-23 09:52:22Z

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, 2019 at 9:52

Praveen

2,4193 gold badges26 silver badges31 bronze badges

3 Comments

undefined Over a year ago

This doesn't allow me to pass the raw string doSomething("Enter");

undefined Over a year ago

Also, I don't like enums because they generate more redundant code.

Praveen Over a year ago

Why do you have to pass "enter as raw string? You can pass KeyboardEventKeys.Enter instead?

hlovdal · Accepted Answer · 2023-01-11 13:30:41Z

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, 2023 at 13:30

hlovdal

28.6k11 gold badges103 silver badges178 bronze badges

answered Jan 31, 2022 at 21:00

Centerwork

3473 silver badges5 bronze badges

1 Comment

hlovdal Over a year ago

This works, although it is locked to one single value type. By using Entries from this answer you will be able to simply use const entries = Object.entries(myVar) as Entries<typeof myVar>; without having to explicitly specifying the object type and it might have members of different types.

David Kabii · Accepted Answer · 2019-01-23 10:02:43Z

0

Have you tried this:

keyof { [key: string]: KeyboarEventKeys }

answered Jan 23, 2019 at 10:02

David Kabii

6601 gold badge6 silver badges17 bronze badges

1 Comment

mwieczorek Over a year ago

It works, but you won't get the auto-completion whose inclusion is implied by wanting to use keyof

Collectives™ on Stack Overflow

Typescript type string is not assignable to type keyof

5 Answers 5

3 Comments

Comments

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related