Grommet: ts: export actual prop types (and TableCell issue)

[atanasster]

The full component props need to be exported from the .ts files.
example for the export:
https://github.com/grommet/grommet/blob/e23667c953bc871b18ef9689f73609e47d283fdf/src/js/components/Box/index.d.ts#L39
the JSX.IntrinsicElements['div'] part is not exported, while any component that would like to use BoxProps will need to eventually duplicate those div props
so I would suggest

export interface BoxOwnProps {
  a11yTitle?: A11yTitleType;
  alignSelf?: AlignSelfType;
...
}

export type BoxProps = BoxOwnProps & JSX.IntrinsicElements['div']>;

example for usage: TableCell is using the BoxProps
https://github.com/grommet/grommet/blob/e23667c953bc871b18ef9689f73609e47d283fdf/src/js/components/TableCell/TableCell.js#L57

it should allow for the BoxProps to be specified (currently typescript apps can not pass Box props to TableCell due to type checking):

export interface TableCellOwnProps {
  plain?: boolean;
  scope?: "col" | "row";
...
}

export type TableCellProps = TableCellOwnProps & BoxProps & JSX.IntrinsicElements['td'] ;

[ShimiSun]

hi @atanasster, may I ask what triggered you to transform grommet-controls to support typescript?

[atanasster]

@ShimiSun - I have been 20+ years working with some of the strongest typed languages (Pascal, C++) and missed this for react + javascript. Until recently react and some of the libraries I am using weren't exactly ready for typescript but now most libraries are written in typescript (tensorflow.js) and other have good @types headers (react, react-dom) and I feel the time is now right.

During my conversion, I was surprised how many bugs and potential issues I uncovered just for switching to typescript.
Added benefit is the code completion, hints etc in the editor.

[britt6612]

@atanasster I filed a PR for this issue I went ahead and imported Box into TabelCell to use those props but I was looking at your suggestion and wanted to see what your thinking was behind exporting the whole 'div'

export type BoxProps = BoxOwnProps & JSX.IntrinsicElements['div']>;

[atanasster]

@britt6612 thank you very much.
My thinking was to avoid what happened - you had to duplicate the code for BoxProps & JSX.xxx. And any component similar to TableCell will also have to duplicate the code.
In my book any duplicated/copy paste code leads to harder maintenance and i try to avoid it in all cases/