feat: Typescript porting

- Port source code to typescript

Author: kohakukun

.gitignore

@@ -2,6 +2,7 @@
 .DS_Store
 *.DS_Store
 **.DS_Store
+build
 
 # npm
 node_modules

package.json

@@ -24,6 +24,7 @@
     "build:es": "cross-env BABEL_ENV=es NODE_ENV=production babel src -d es --ignore '**/*.spec.js','__snapshots__' --copy-files --source-maps",
     "build:css": "node-sass src/_BaseTable.scss ./styles.css --output-style expanded",
     "build": "npm run build:js && npm run build:es && npm run build:css",
+    "build:typescript": "tsc",
     "format": "prettier --write 'src/**/*.{js,scss}'",
     "prebuild": "npm run clean",
     "precommit": "lint-staged",
@@ -44,11 +45,18 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
+    "@types/classnames": "^2.2.9",
+    "@types/memoize-one": "^4.1.1",
+    "@types/react": "^16.9.2",
+    "@types/react-test-renderer": "^16.9.0",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
+    "@types/react-window": "^1.8.1",
     "classnames": "^2.2.5",
     "memoize-one": "^5.0.0",
     "prop-types": "^15.7.0",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.2"
+    "react-window": "^1.8.2",
+    "typescript": "^3.5.3"
   },
   "peerDependencies": {
     "react": "^16.0.0",
@@ -62,9 +70,9 @@
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@types/jest": "^24.0.18",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.4.2",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "cross-env": "^5.2.0",
     "eslint": "^5.6.0",
@@ -76,23 +84,24 @@
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.11.1",
     "husky": "^0.14.3",
-    "jest": "^23.5.0",
+    "jest": "^23.6.0",
     "lerna": "^3.2.1",
     "lint-staged": "^7.2.2",
     "node-sass": "^4.9.3",
     "prettier": "^1.14.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-test-renderer": "^16.4.2",
-    "rimraf": "^2.6.2"
+    "rimraf": "^2.6.2",
+    "ts-jest": "^24.0.2"
   },
   "jest": {
     "roots": [
       "<rootDir>/src"
     ],
-    "testRegex": ".*.spec\\.js$",
+    "testRegex": ".*.spec\\.tsx?$",
     "transform": {
-      "^.+\\.jsx?$": "babel-jest"
+      "^.+\\.tsx?$": "ts-jest"
     },
     "transformIgnorePatterns": [
       "<rootDir>/node_modules/"

src/AutoResizer.js src/AutoResizer.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 /**
  * Decorator component that automatically adjusts the width and height of a single child
  */
-const AutoResizer = ({ className, width, height, children, onResize }) => {
+const AutoResizer: React.FunctionComponent<AutoResizerProps> = ({ className, width, height, children, onResize }) => {
   const disableWidth = typeof width === 'number';
   const disableHeight = typeof height === 'number';
 
@@ -29,29 +28,31 @@ const AutoResizer = ({ className, width, height, children, onResize }) => {
   );
 };
 
-AutoResizer.propTypes = {
+
+type ChildrenArgs = {width: number, height: number};
+export interface AutoResizerProps {
   /**
    * Class name for the component
    */
-  className: PropTypes.string,
+  className?: string;
   /**
    * the width of the component, will be the container's width if not set
    */
-  width: PropTypes.number,
+  width?: number;
   /**
    * the height of the component, will be the container's width if not set
    */
-  height: PropTypes.number,
+  height?: number;
   /**
    * A callback function to render the children component
    * The handler is of the shape of `({ width, height }) => node`
    */
-  children: PropTypes.func.isRequired,
+  children: (args: ChildrenArgs) => React.ReactNode;
   /**
    * A callback function when the size of the table container changed if the width and height are not set
    * The handler is of the shape of `({ width, height }) => *`
    */
-  onResize: PropTypes.func,
+  onResize?: (args: ChildrenArgs) => void;
 };
 
 export default AutoResizer;

src/BaseTable.spec.js src/BaseTable.spec.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import BaseTable from './BaseTable';
+import BaseTable, { IBaseTableProps } from './BaseTable';
 
-const RENDERER = () => null;
+type TRenderer = () => null;
+const RENDERER: TRenderer = () => null;
 
 const columns = [
   {
@@ -33,7 +34,22 @@ const data = [
   },
 ];
 
-const Table = props => <BaseTable width={100} height={100} data={data} columns={columns} {...props} />;
+type DefaultPropsKeys = keyof typeof BaseTable.defaultProps;
+interface TableProps extends Partial<typeof BaseTable.defaultProps> {};
+interface MinusDefaultKeys extends Partial<Omit<IBaseTableProps<any>, DefaultPropsKeys>> {};
+
+const Table: React.FunctionComponent<
+  TableProps &
+  MinusDefaultKeys> = ({width, height, data, columns, ...restProps}) => (
+  <BaseTable width={width} height={height} {...restProps} />
+);
+
+Table.defaultProps = {
+  width: 100,
+  height: 100,
+  data,
+  columns
+};
 
 describe('Table', function() {
   test('renders correctly', () => {