reactjs - library - konva documentation

Especificar el tipo de evento onClick con Typescript y React.Konva

Question

Estoy tratando de deshacerme de mi error de tslint. Type declaration of ''any'' loses type-safety. pero estoy luchando para averiguar cuál sería el tipo correcto para el Evento.

Estoy trabajando a través de la Lynda " Creación e implementación de una aplicación React de pila completa " al intentar convertirla en Typescript.

Aquí están las líneas específicas que están causando el problema:

onClick={(event: any) => {
 makeMove(ownMark, event.target.index)
}}

He intentado declarar el evento como algunos tipos diferentes, como React.MouseEvent<HTMLElement> , más algunos otros subtipos en HTMLElement, sin éxito, ya que target.index no es una propiedad de ningún tipo que pueda encontrar. Puedo ver por el inspector que currentTarget es Konva.Text y el índice está establecido en 0 pero no estoy seguro de que eso me ayude, ya que no puedo configurar el tipo en Konva.Text , lo que tendría sentido para mí, pero eso no lo hace. t trabajar tampoco.

Aquí está mi componente funcional React completo:

export const Squares = ({units, coordinates, gameState, win, gameOver, yourTurn, ownMark, move}: SquaresProps) => {
  let squares = coordinates.map( (position: number, index: number) => { 
    let makeMove = move
    let mark = gameState[index] !== ''z'' ? gameState[index] : false
    let fill = ''black''

    // when someone wins you want the square to turn green
    if (win && win.includes(index)) {
      fill = ''lightGreen''
    }

    if (gameOver || !yourTurn || mark) {
      makeMove = () => console.log(''nope!'')
    }

    return (
      <Text
        key={index}
        x={position[0]}
        y={position[1]}
        fontSize={units}
        width={units}
        text={mark}
        fill={fill}
        fontFamily={''Helvetica''}
        aligh={''center''}
        onClick={(event: any) => {
          makeMove(ownMark, event.target.index)
        }}
      />
    )
  })

  return (
    <Layer>
      {squares}
    </Layer>
  )
}

Aquí están mis dependencias package.json :

  "dependencies": {
    "konva": "^1.6.3",
    "material-ui": "^0.18.4",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-konva": "^1.1.3",
    "react-router": "~3.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "styled-components": "^2.1.0"
  },

Creo que la clase Konva Layer está agregando el índice, pero soy bastante nuevo en todo el ecosistema de reacción, así que todavía estoy tratando de envolver mi cerebro alrededor de todo.

ACTUALIZAR:

Pude usar la declaración de fusión de la sugerencia de Tyler Sebastion para definir el índice en el objetivo que silenció el tslint. No estoy seguro de que este sea el mejor enfoque, ya que me parece un poco frágil.

Aquí está el código de interfaz adicional y el evento onclick actualizado:

interface KonvaTextEventTarget extends EventTarget {
  index: number
}

interface KonvaMouseEvent extends React.MouseEvent<HTMLElement> {
  target: KonvaTextEventTarget
}

...

return (
  <Text
    key={index}
    x={position[0]}
    y={position[1]}
    fontSize={units}
    width={units}
    text={mark}
    fill={fill}
    fontFamily={''Helvetica''}
    aligh={''center''}
    onClick={(event: KonvaMouseEvent) => {
      makeMove(ownMark, event.target.index)
    }}
  />
)

Answer 1

Como se publicó en mi actualización anterior, una posible solución sería utilizar la fusión de la declaración como lo sugiere @ Tyler-sebastion. Pude definir dos interfaces adicionales y agregar la propiedad de índice en el EventTarget de esta manera.

interface KonvaTextEventTarget extends EventTarget {
  index: number
}

interface KonvaMouseEvent extends React.MouseEvent<HTMLElement> {
  target: KonvaTextEventTarget
}

Entonces puedo declarar el evento como KonvaMouseEvent en mi función KonvaMouseEvent MouseEventHandler.

onClick={(event: KonvaMouseEvent) => {
          makeMove(ownMark, event.target.index)
}}

Todavía no estoy al 100% si este es el mejor enfoque, ya que se siente un poco tonto y excesivamente detallado para superar el error de tslint.

Answer 2

Probablemente no tengas suerte sin algunas soluciones alternativas

Tu podrías intentar

onClick={(event: React.MouseEvent<HTMLElement>) => {
 makeMove(ownMark, (event.target as any).index)
}}

No estoy seguro de lo estricta que es su linter, ya que podría callarla un poco.

Jugué un poco con él por un tiempo, y no pude resolverlo, pero también puedes escribir tus propias definiciones aumentadas: https://www.typescriptlang.org/docs/handbook/declaration-merging.html

edit: por favor, use la implementación en esta respuesta , es la forma correcta de resolver este problema (y también le vota, mientras está en ello).

Answer 3

React.MouseEvent funciona para mí:

private onClick = (e: React.MouseEvent<HTMLInputElement>) => {
  let button = e.target as HTMLInputElement;
}