javascript - ¿Cómo detectar la tecla presionada en TypeScript?

¿Cuál sería la sintaxis semánticamente equivalente en TypeScript a la siguiente línea en JavaScript?

// Some knockout event handler
myFunc(data: string, evt: Event) {
    // If enter or tab key up were detected add the excuse to the collection
    if (evt.enterKey || evt.which == 9) {
        // Do Something
    }
}

El problema que estoy teniendo aquí es que, a diferencia de los eventos regulares de JavaScript, la clase Event de TypeScript no tiene una propiedad enterKey ni which. Entonces, ¿cómo puedo detectar qué tecla se está presionando sin obtener un error de compilación en TypeScript y la fea línea ondulada roja?

Respuesta #1

Necesitas usar el tipo de evento más especializado KeyboardEvent, como se muestra a continuación:

myFunc(data : string, evt : KeyboardEvent)

Si también quieres eliminar errores para evt.enterKey, necesitarás agregarlo extendiendo la interfaz, aunque no estoy al tanto de que esta sea una propiedad real ya que técnicamente no es una tecla de control, como CTRL, SHIFT o ALT, que todas tienen propiedades en el evento:

interface KeyboardEvent {
    enterKey: boolean;
}

Respuesta #2

Para usuarios de React

  private onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    console.log(e.key)
  }

donde HTMLDivElement es el tipo de cualquier elemento al que esté asociado onKeyDown.

Aquí está la lista (de la línea 32 a la 90) de todos los elementos HTML compatibles.