TypeScript Typings

[slig]

Hi Will,

First of all, thank you very much for this project. The docs and examples are awesome!

I've prepared a first version of a typings file and I'd like to know if this is welcome in this project. If it's, I'll open a PR.

Here's what I have so far:

type Square =
    "a8" | "b8" | "c8" | "d8" | "e8" | "f8" | "g8" | "h8" |
    "a7" | "b7" | "c7" | "d7" | "e7" | "f7" | "g7" | "h7" |
    "a6" | "b6" | "c6" | "d6" | "e6" | "f6" | "g6" | "h6" |
    "a5" | "b5" | "c5" | "d5" | "e5" | "f5" | "g5" | "h5" |
    "a4" | "b4" | "c4" | "d4" | "e4" | "f4" | "g4" | "h4" |
    "a3" | "b3" | "c3" | "d3" | "e3" | "f3" | "g3" | "h3" |
    "a2" | "b2" | "c2" | "d2" | "e2" | "f2" | "g2" | "h2" |
    "a1" | "b1" | "c1" | "d1" | "e1" | "f1" | "g1" | "h1"
;

type Piece =
    "wP" | "wN" | "wB" | "wR" | "wQ" | "wK" |
    "bP" | "bN" | "bB" | "bR" | "bQ" | "bK"
;

type Position = {
    [pos in Square]?: Piece
}

type CustomPieces = {
    [piece in Piece]?: (obj: {isDragging: boolean, squareWidth: number, droppedPiece: string, targetSquare: string, sourceSquare: string}) => JSX.Element
}

interface Props {
    allowDrag?: (obj: {piece: string, sourceSquare: string}) => boolean,
    boardStyle?: React.CSSProperties,
    calcWidth?: (obj: {screenWidth: number, screenHeight: number}) => number,
    darkSquareStyle?: React.CSSProperties,
    draggable?: boolean,
    dropOffBoard?: "snapback" | "trash",
    dropSquareStyle?: React.CSSProperties,
    getPosition?: (currentPosition: Position) => void,
    id?: string | number,
    lightSquareStyle?: React.CSSProperties,
    onDragOverSquare?: (square: string) => void,
    onDrop?: (obj: {sourceSquare: string, targetSquare: string, piece: string}) => void,
    onMouseOutSquare?: (square: string) => void,
    onMouseOverSquare?: (square: string) => void,
    onPieceClick?: (piece: string) => void,
    onSquareClick?: (square: string) => void,
    onSquareRightClick?: (square: string) => void,
    orientation?: "white" | "black",
    pieces?: CustomPieces,
    position?: string | Position,
    roughSquare?: (obj: {squareElement: SVGElement, squareWidth: number}) => void,
    showNotation?: boolean,
    sparePieces?: boolean,
    squareStyles?: {[square in Square]?: React.CSSProperties},
    transitionDuration?: number,
    width?: number,
}

export default class Chessboard extends React.Component<Props> {

}

Any suggestion on how to improve it is very welcome. Thanks!

[willb335]

This looks fine to me. Thanks!

I'm not familiar with typescript, but this will give me an excuse to learn more about it.

[willb335]

34