使用 Typescript 和 React.Konva 指定 onClick 事件类型

我正试图摆脱我的tslint错误Type declaration of 'any' loses type-safety.，但我正在努力找出该事件的正确类型.

我正在处理Lynda"Building and Deploying a Full-Stack React Application"，同时试图将其转换为Typescript.

以下是导致问题的具体原因:

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

我曾try 将事件声明为几个不同的类型，比如React.MouseEvent<HTMLElement>，以及HtmleElement上的其他几个子类型，但没有成功作为目标.索引不是我能想到的任何类型的属性.我可以从判断员那里看出，目前的目标是Konva.文本和索引设置为0，但不确定这是否对我有帮助，因为我无法将类型设置为Konva.Text，这对我来说是有意义的，但这也不起作用.

以下是我的全部功能组件:

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>
  )
}

以下是我的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"
  },

我知道这个索引是由Konva Layer类添加的，但我对整个react生态系统还很陌生，所以我仍在努力将我的大脑包围在它周围.

更新:

我能够使用泰勒·塞巴斯蒂安的建议来定义目标上的索引，从而使tslint沉默.但我不确定这是不是最好的方法，因为我觉得这有点脆弱.

以下是附加的接口代码和更新的onclick事件:

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)
    }}
  />
)