title: Specifying onClick event type with Typescript and React.Konva
body: <p>I'm trying to get rid of my tslint error <code>Type declaration of 'any' loses type-safety.</code> but I'm struggling to figure out what the correct type would be for the Event. </p>
  
  <p>I'm working through the Lynda "<a href="https://www.lynda.com/React-js-tutorials/Profile-page-records/558648/597685-4.html?autoplay=true" rel="noreferrer">Building and Deploying a Full-Stack React Application</a>" while trying to convert it to Typescript. </p>
  
  <p>Here are the specific lines that are causing the issue: </p>
  
  <pre><code>onClick={(event: any) =&gt; {
   makeMove(ownMark, event.target.index)
  }}
  </code></pre>
  
  <p>I have tried to declare the event as a few different types, like <code>React.MouseEvent&lt;HTMLElement&gt;</code>, plus a few other subtypes on HTMLElement, with no success as the target.index is not a property on any type I can come up with. I can see from the inspector that the currentTarget is Konva.Text and the index is set to <code>0</code> but not sure that helps me as I can't set the type to <code>Konva.Text</code>, which would make sense to me, but that doesn't work either.</p>
  
  <p><a href="https://i.stack.imgur.com/Gg2Je.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Gg2Je.jpg" alt="React Konva Event target Index"></a></p>
  
  <p>Here is my full React functional component: </p>
  
  <pre><code>export const Squares = ({units, coordinates, gameState, win, gameOver, yourTurn, ownMark, move}: SquaresProps) =&gt; {
    let squares = coordinates.map( (position: number, index: number) =&gt; { 
      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 &amp;&amp; win.includes(index)) {
        fill = 'lightGreen'
      }
  
      if (gameOver || !yourTurn || mark) {
        makeMove = () =&gt; console.log('nope!')
      }
  
      return (
        &lt;Text
          key={index}
          x={position[0]}
          y={position[1]}
          fontSize={units}
          width={units}
          text={mark}
          fill={fill}
          fontFamily={'Helvetica'}
          aligh={'center'}
          onClick={(event: any) =&gt; {
            makeMove(ownMark, event.target.index)
          }}
        /&gt;
      )
    })
  
    return (
      &lt;Layer&gt;
        {squares}
      &lt;/Layer&gt;
    )
  }
  </code></pre>
  
  <p>Here are my <code>package.json</code> dependencies: </p>
  
  <pre><code>  "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"
    },
  </code></pre>
  
  <p>I <em>think</em> the index is being added by the Konva Layer class but I'm pretty new to the whole react ecosystem so still trying to wrap my brain around it all. </p>
  
  <h2>UPDATE:</h2>
  
  <p>I was able use declaration merging suggestion by Tyler Sebastion to define the index on the target which silenced tslint. I'm not sure this is the best approach though as it feels a bit fragile to me. </p>
  
  <p>Here is the additional interface code and updated onclick event: </p>
  
  <pre><code>interface KonvaTextEventTarget extends EventTarget {
    index: number
  }
  
  interface KonvaMouseEvent extends React.MouseEvent&lt;HTMLElement&gt; {
    target: KonvaTextEventTarget
  }
  
  ...
  
  return (
    &lt;Text
      key={index}
      x={position[0]}
      y={position[1]}
      fontSize={units}
      width={units}
      text={mark}
      fill={fill}
      fontFamily={'Helvetica'}
      aligh={'center'}
      onClick={(event: KonvaMouseEvent) =&gt; {
        makeMove(ownMark, event.target.index)
      }}
    /&gt;
  )
  </code></pre>