Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[lib.dom.d.ts] Include well-known KeyboardEvent.key values

See original GitHub issue

Search Terms

  • keyCode
  • KeyboardEvent
  • KeyboardEvent.key
  • KeyboardEvent.keyCode


Include KeyboardEvent.key values in the KeyboardEvent interface.

The current implementation is:

interface KeyboardEvent extends UIEvent {
  readonly key: string;

See here for a list of some possible values.

Here is my suggestion for how this type can be usefully updated:

type ModifierKeys = "Alt" | "AltGraph" | "CapsLock" | "Control" | "Fn" | "FnLock" | "Hyper" | "Meta" | NumLock" | "ScrollLock" | "Shift" | "Super" | "Symbol" | "SymbolLock";
type WhitespaceKeys = "Enter" | "Tab" | " ";
type NavigationKeys = "ArrowDown" | "ArrowLeft" | "ArrowRight" | "ArrowUp" | "End" | "Home" | "PageDown" | "PageUp";
type FunctionKeys = "F1" | "F2" | "F3" | "F4" | "F5" | "F6" | "F7" | "F8" | "F9" | "F10" | "F11" | "F12" | "F13" | "F14" | "F15" | "F16" | "F17" | "F18" | "F19" | "F20" | "Soft1" | "Soft2" | "Soft3" | "Soft4";
type NumericKeypadKeys = "Decimal" | "Key11" | "Key12" | "Multiply" | "Add" | "Clear" | "Divide" | "Subtract" | "Separator" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";

interface KeyboardEvent extends UIEvent {
  readonly key: string | ModifierKeys | WhitespaceKeys | NavigationKeys | FunctionKeys | NumericKeypadKeys;

In the above I left out EditingKeys, UIKeys, DeviceKeys, IMEKeys, PhoneKeys, MultimediaKeys, AudioControlKeys, TVControlKeys, MediaControllerKeys, SpeechRecognitionKeys, DocumentKeys, ApplicationSelectorKeys, and BrowserControlKeys, but we could either include them all at the start or just as necessary.

Use Cases

When a user is accessing the KeyboardEvent.key API, a sane set of the known defaults should be available for type checking.


This will help prevent scenarios like:

if (event.key === "ArowDown") { // <- "ArrowDown" is misspelled here

Since users will get completion on common values when typing.

note: I had previously suggested implementing this in the React types, but @ferdaber suggested (and I agree) that the dom types themselves are the better place.


My suggestion meets these guidelines:

  • This wouldn’t be a breaking change in existing TypeScript/JavaScript code
  • This wouldn’t change the runtime behavior of existing JavaScript code
  • This could be implemented without emitting different JS based on the types of the expressions
  • This isn’t a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
  • This feature would agree with the rest of TypeScript’s Design Goals.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:30
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

Moh-Snoussicommented, Nov 24, 2021

The IntelliSense will help prevent many scenarios. Even without LiteralUnion.

I created a small external package that contains the types of the KeyboardEvent.key while the current-suggestion is blocked.

dimitropouloscommented, Jun 2, 2020


For whatever it’s worth I can confirm that LiteralUnion works in this use-case (notice that '' is not an error, whereas before it was an error; also notice that the autocomplete works).

Read more comments on GitHub >

github_iconTop Results From Across the Web

KeyboardEvent.key - Web APIs | MDN
The KeyboardEvent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state ...
Read more >
KeyboardEvent | typescript - v3.7.7
KeyboardEvent objects describe a user interaction with the keyboard; each event describes a single interaction between the user and a key (or combination...
Read more >
[GNUnet-SVN] [taler-wallet-webex] branch master updated ...
typescript/lib/lib.es2016.array.include.d.ts | 217 +- ... (key: string, value: any) => any, space?: string | number): string; - /** - * Converts a ...
Read more >
62 Specific Ways to Improve Your TypeScript
The TypeScript compiler includes several settings which affect core ... Selecting this option takes you into lib.dom.d.ts, the type declarations which Type‐.
Read more >
UI Events KeyboardEvent key Values - W3C
A key attribute value MUST always contain a value that falls into one of these two categories (even if the value is "Unidentified"...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found