Я пытаюсь избавиться от ошибки tslint Type declaration of 'any' loses type-safety.
, но мне трудно понять, какой тип будет правильным для события.
Я работаю через Lynda "Создание и развертывание приложения Full-Stack React" при попытке преобразовать его в Typescript.
Вот конкретные строки, вызывающие проблему:
onClick={(event: any) => {
makeMove(ownMark, event.target.index)
}}
Я попытался объявить событие как несколько разных типов, например React.MouseEvent<HTMLElement>
, плюс несколько других подтипов на HTMLElement, но безуспешно, поскольку target.index не является свойством ни для одного типа, который я могу придумать. Я вижу из инспектора, что currentTarget - это Konva.Text, а индекс установлен на 0
, но не уверен, что это помогает мне, поскольку я не могу установить тип на Konva.Text
, что было бы для меня разумным, но это не работает или.
Вот мой полный функциональный компонент React:
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)
}}
/>
)