[core] Improve types (#448)

docs/src/pages/components/data-grid/pagination/ServerPaginationGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RowsProp, DataGrid } from '@material-ui/data-grid';
+import { RowsProp, DataGrid, PageChangeParams } from '@material-ui/data-grid';
 import { useDemoData, GridData } from '@material-ui/x-grid-data-generator';
 
 function loadServerRows(page: number, data: GridData): Promise<any> {
@@ -20,7 +20,7 @@ export default function ServerPaginationGrid() {
   const [rows, setRows] = React.useState<RowsProp>([]);
   const [loading, setLoading] = React.useState<boolean>(false);
 
-  const handlePageChange = (params) => {
+  const handlePageChange = (params: PageChangeParams) => {
     setPage(params.page);
   };
 

docs/src/pages/components/data-grid/rendering/AntDesignGrid.tsx

@@ -5,7 +5,7 @@ import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
 import Pagination from '@material-ui/lab/Pagination';
 import PaginationItem from '@material-ui/lab/PaginationItem';
 
-function customCheckbox(theme) {
+function customCheckbox(theme: Theme) {
   return {
     '& .MuiCheckbox-root svg': {
       width: 16,

docs/src/pages/components/data-grid/rendering/ColumnVirtualizationGrid.tsx

@@ -11,7 +11,7 @@ export interface GridData {
   rows: DataRowModel[];
 }
 
-function useData(rowLength, columnLength) {
+function useData(rowLength: number, columnLength: number) {
   const [data, setData] = React.useState<GridData>({ columns: [], rows: [] });
 
   React.useEffect(() => {

docs/src/pages/components/data-grid/rows/ServerSortingGrid.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { RowsProp, DataGrid, SortModel } from '@material-ui/data-grid';
+import {
+  RowsProp,
+  DataGrid,
+  SortModel,
+  SortModelParams,
+} from '@material-ui/data-grid';
 import { useDemoData, GridData } from '@material-ui/x-grid-data-generator';
 
 function loadServerRows(sortModel: SortModel, data: GridData): Promise<any> {
@@ -41,7 +46,7 @@ export default function ServerSortingGrid() {
   const [rows, setRows] = React.useState<RowsProp>([]);
   const [loading, setLoading] = React.useState<boolean>(false);
 
-  const handleSortModelChange = (params) => {
+  const handleSortModelChange = (params: SortModelParams) => {
     if (params.sortModel !== sortModel) {
       setSortModel(params.sortModel);
     }

docs/tsconfig.json

@@ -1,17 +1,12 @@
 {
   "extends": "../tsconfig.json",
-  "include": ["types", "src/pages/**/*"],
   "compilerOptions": {
-    "allowJs": false,
-    "isolatedModules": true,
     /* files are emitted by babel */
     "noEmit": true,
-    "noUnusedLocals": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": false,
-    "esModuleInterop": true,
     "types": ["react", "node"],
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "skipLibCheck": true
   },
-  "exclude": ["node_modules"]
+  "include": ["src/pages/**/*"],
+  "exclude": ["docs/.next", "docs/export"]
 }

package.json

@@ -47,13 +47,16 @@
     "@rollup/plugin-node-resolve": "^8.0.1",
     "@rollup/plugin-replace": "^2.3.3",
     "@testing-library/react": "^11.1.0",
+    "@types/chai": "^4.2.3",
+    "@types/chai-dom": "^0.0.10",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^26.0.14",
     "@types/mocha": "^8.0.3",
     "@types/node": "^14.11.10",
     "@types/react": "^16.9.25",
     "@types/react-dom": "^16.9.5",
+    "@types/sinon": "^9.0.8",
     "@types/styled-components": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^3.6.1",
     "@typescript-eslint/parser": "^3.6.1",

packages/grid/_modules_/grid/components/ScrollArea.tsx

@@ -29,7 +29,7 @@ export const ScrollArea = React.memo(function ScrollArea(props: ScrollAreaProps)
 
   const handleDragOver = React.useCallback(
     (event) => {
-      let offset;
+      let offset: number;
 
       if (scrollDirection === 'left') {
         offset = event.clientX - rootRef.current!.getBoundingClientRect().right;

packages/grid/_modules_/grid/hooks/features/useColumnReorder.tsx

@@ -35,7 +35,10 @@ const reorderColDefArray = (
   return columnsClone;
 };
 
-const getCursorMoveDirectionX = (currentCoordinates, nextCoordinates) => {
+const getCursorMoveDirectionX = (
+  currentCoordinates: CursorCoordinates,
+  nextCoordinates: CursorCoordinates,
+) => {
   return currentCoordinates.x <= nextCoordinates.x
     ? CURSOR_MOVE_DIRECTION_RIGHT
     : CURSOR_MOVE_DIRECTION_LEFT;

packages/grid/_modules_/grid/lib/createDetectElementResize/index.js

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 /**
  * Detect Element Resize.
  * https://github.com/sdecima/javascript-detect-element-resize

packages/grid/_modules_/grid/lib/createDetectElementResize/types.d.ts

@@ -4,6 +4,6 @@ interface DetectElementResize {
 }
 
 export default function createDetectElementResize(
-  nonce: string,
-  hostWindow: Window
+  nonce?: string,
+  hostWindow?: Window
 ): DetectElementResize;

packages/grid/data-grid/src/DataGrid.test.tsx

@@ -104,6 +104,7 @@ describe('<DataGrid />', () => {
             </div>,
           );
           clock.tick(100);
+          // @ts-expect-error need to migrate helpers to TypeScript
         }).toWarnDev('useResizeContainer: The parent of the grid has an empty height.');
       });
 
@@ -117,6 +118,7 @@ describe('<DataGrid />', () => {
             </div>,
           );
           clock.tick(100);
+          // @ts-expect-error need to migrate helpers to TypeScript
         }).toWarnDev('useResizeContainer: The parent of the grid has an empty width.');
       });
     });
@@ -137,6 +139,7 @@ describe('<DataGrid />', () => {
           'prop',
           'MockedDataGrid',
         );
+        // @ts-expect-error need to migrate helpers to TypeScript
       }).toErrorDev('Material-UI: `<DataGrid pagination={false} />` is not a valid prop.');
     });
 
@@ -162,6 +165,7 @@ describe('<DataGrid />', () => {
             <DataGrid {...defaultProps} rows={rows} />
           </ErrorBoundary>,
         );
+        // @ts-expect-error need to migrate helpers to TypeScript
       }).toErrorDev([
         'The data grid component requires all rows to have a unique id property',
         'The above error occurred in the <ForwardRef(GridComponent)> component',

packages/grid/data-grid/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "noEmit": true,
-    "types": ["mocha", "node"]
+    "types": ["mocha", "node", "chai", "chai-dom"]
   },
   "include": ["src"]
 }

packages/grid/tsconfig.build.json

@@ -1,25 +1,11 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "baseUrl": "./",
     "declaration": true,
     "declarationDir": "./dist",
-    "module": "es6",
-    "noImplicitAny": false,
-    "noUnusedLocals": false,
-    "strict": true,
     "outDir": "./dist",
-    "target": "es6",
-    "sourceMap": true,
-    "lib": ["dom", "dom.iterable", "esnext", "ES6"],
     "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react",
     "types": ["jest", "node"],
     "rootDir": "./"
   },

packages/grid/x-grid/src/XGrid.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 // @ts-expect-error need to migrate helpers to TypeScript
 import { screen, createClientRender, act, fireEvent } from 'test/utils';
 import { expect } from 'chai';
-import { XGrid, useApiRef } from '@material-ui/x-grid';
+import { XGrid, useApiRef, Columns } from '@material-ui/x-grid';
 import { useData } from 'packages/storybook/src/hooks/useData';
 
 function getActiveCell() {
@@ -109,7 +109,8 @@ describe('<XGrid />', () => {
     /* eslint-disable material-ui/disallow-active-element-as-key-event-target */
     const KeyboardTest = () => {
       const data = useData(100, 20);
-      const transformColSizes = (columns) => columns.map((column) => ({ ...column, width: 60 }));
+      const transformColSizes = (columns: Columns) =>
+        columns.map((column) => ({ ...column, width: 60 }));
 
       return (
         <div style={{ width: 300, height: 300 }}>
@@ -156,7 +157,11 @@ describe('<XGrid />', () => {
   });
 
   it('should resize the width of the columns', async () => {
-    const TestCase = (props) => {
+    interface TestCaseProps {
+      width?: number;
+    }
+
+    const TestCase = (props: TestCaseProps) => {
       const { width = 300 } = props;
       return (
         <div style={{ width, height: 300 }}>

packages/grid/x-grid/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "noEmit": true,
-    "types": ["mocha", "node"]
+    "allowJs": true,
+    "types": ["mocha", "node", "chai", "chai-dom"]
   },
   "include": ["src"]
 }

packages/storybook/package.json

@@ -4,6 +4,15 @@
   "description": "Storybook components",
   "author": "Material-UI Team",
   "private": true,
+  "scripts": {
+    "start": "start-storybook -p 6006 --ci",
+    "build": "build-storybook -o dist/ -s storybook --quiet",
+    "export": "mv dist ../../docs/export/storybook",
+    "lint": "../../node_modules/.bin/tsc --noEmit && eslint 'src/**/*.{ts,tsx}' --quiet --fix -c ./.eslintrc.js",
+    "test": "jest -c integration/setup/jest.config.js --detectOpenHandles --force-exit --runInBand",
+    "test:ci": "start-server-and-test start http://localhost:6006 test",
+    "typescript": "tsc -p tsconfig.json"
+  },
   "dependencies": {
     "@material-ui/core": "^4.9.12",
     "@material-ui/data-grid": "^4.0.0-alpha.8",
@@ -44,13 +53,5 @@
     "string-replace-loader": "^2.3.0",
     "ts-loader": "^8.0.2",
     "typescript": "^3.9.6"
-  },
-  "scripts": {
-    "start": "start-storybook -p 6006 --ci",
-    "build": "build-storybook -o dist/ -s storybook --quiet",
-    "export": "mv dist ../../docs/export/storybook",
-    "lint": "../../node_modules/.bin/tsc --noEmit && eslint 'src/**/*.{ts,tsx}' --quiet --fix -c ./.eslintrc.js",
-    "test": "jest -c integration/setup/jest.config.js --detectOpenHandles --force-exit --runInBand",
-    "test:ci": "start-server-and-test start http://localhost:6006 test"
   }
 }

packages/storybook/src/data/random-generator.ts

@@ -2,7 +2,7 @@ export const random = (min: number, max: number): number => Math.random() * (max
 export const randomInt = (min: number, max: number): number => Number(random(min, max).toFixed());
 export const randomPrice = (min = 0, max = 100000): number => random(min, max);
 export const randomRate = (): number => random(0, 1);
-export const randomDate = (start, end) =>
+export const randomDate = (start: Date, end: Date) =>
   new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
 export const getDate = () => randomDate(new Date(2012, 0, 1), new Date());
 export const randomArrayItem = (arr: any[]) => arr[random(0, arr.length - 1).toFixed()];

packages/storybook/src/stories/grid-columns.stories.tsx

@@ -167,7 +167,7 @@ export function ColumnsAlign() {
 
   const transformCols = React.useCallback((cols) => {
     if (cols.length > 0) {
-      cols.forEach((col: ColDef, idx) => {
+      cols.forEach((col: ColDef, idx: number) => {
         if (idx > 1 && idx % 2 === 1) {
           col.align = 'right';
           col.headerAlign = 'right';
@@ -199,7 +199,7 @@ export function NewColumnTypes() {
 
   const transformCols = React.useCallback((cols) => {
     if (cols.length > 0) {
-      cols.forEach((col, idx) => {
+      cols.forEach((col: ColDef, idx: number) => {
         if (idx > 1 && idx % 2 === 1) {
           col.type = 'price';
         } else if (idx > 1 && idx % 2 === 0) {

packages/storybook/src/stories/grid-resize.stories.tsx

@@ -24,7 +24,7 @@ export const ResizeSmallDataset = () => {
       <div>
         <button
           type="button"
-          onClick={() => setSize((p) => ({ width: p.height, height: p.width }))}
+          onClick={() => setSize((p: ElementSize) => ({ width: p.height, height: p.width }))}
           style={{ padding: 5, textTransform: 'capitalize', margin: 10 }}
         >
           Switch sizes
@@ -45,7 +45,7 @@ export const ResizeLargeDataset = () => {
       <div>
         <button
           type="button"
-          onClick={() => setSize((p) => ({ width: p.height, height: p.width }))}
+          onClick={() => setSize((p: ElementSize) => ({ width: p.height, height: p.width }))}
           style={{ padding: 5, textTransform: 'capitalize', margin: 10 }}
         >
           Switch sizes

packages/storybook/tsconfig.json

@@ -2,26 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "dist/",
-    "module": "es6",
-    "target": "es6",
-    "lib": ["es5", "es6", "es7", "es2017", "dom"],
-    "sourceMap": true,
-    "allowJs": false,
-    "jsx": "react",
     "rootDirs": ["src"],
-    "baseUrl": "src",
-    "moduleResolution": "node",
-    "isolatedModules": false,
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": false,
-    "strictNullChecks": true,
-    "noUnusedLocals": false,
-    "declaration": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
     "types": ["node", "jest", "jest-image-snapshot"]
   },
   "include": ["src/**/*"],

packages/x-grid-data-generator/rollup.config.js

@@ -29,7 +29,7 @@ export default [
         cleaner({
           targets: ['./dist/'],
         }),
-      typescript(),
+      typescript({ tsconfig: 'tsconfig.build.json' }),
       commonjs(),
       !production && sourceMaps(),
       production && terser(),

packages/x-grid-data-generator/src/renderer/renderPnl.tsx

@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-function pnlFormatter(value) {
+function pnlFormatter(value: number) {
   return value < 0 ? `(${Math.abs(value).toLocaleString()})` : value.toLocaleString();
 }
 

packages/x-grid-data-generator/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "declaration": true,
+    "declarationDir": "./dist",
+    "outDir": "./dist"
+  },
+  "include": ["src"],
+  "exclude": ["__tests__", "**/*.test.ts"]
+}

packages/x-grid-data-generator/tsconfig.json

@@ -1,15 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "./",
-    "declaration": true,
-    "declarationDir": "./dist",
-    "module": "es6",
-    "noImplicitAny": false,
-    "outDir": "./dist",
-    "target": "es6",
-    "sourceMap": true
+    "noEmit": true
   },
-  "include": ["src"],
-  "exclude": ["__tests__", "**/*.test.ts", "node_modules", "lib"]
+  "include": ["src"]
 }