Update types to use generics & add a TS test for react-redux (#80)

* Add a test for react-redux's useSelector hook

* Separate react-redux test from main usage test

* Fix types, use generics

Author: Kylie Stewart

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+- [#80](https://github.com/FormidableLabs/react-fast-compare/pull/80). Update types to use generic `any`s.
+- [#77](https://github.com/FormidableLabs/react-fast-compare/pull/77). Add tests for our TypeScript type definitions.
+
 ## 3.1.0 (2020-05-08)
 
 - [#76](https://github.com/FormidableLabs/react-fast-compare/pull/76). Add support for preact/compat.
@@ -17,6 +22,7 @@
 ## 3.0.0 (2020-01-05)
 
 **Features:**
+
 - [#36](https://github.com/FormidableLabs/react-fast-compare/pull/36). Update to `fast-deep-equal@3.1.1` with modified support for ES.next data types: `Map`, `Set`, `ArrayBuffer`.
 - [#57](https://github.com/FormidableLabs/react-fast-compare/pull/57). Minor refactoring to reduce min+gz size.
 - [#59](https://github.com/FormidableLabs/react-fast-compare/pull/59). Rename exported to `isEqual` for TypeScript users.

index.d.ts

@@ -1,3 +1,2 @@
-declare function isEqual(a: any, b: any): boolean;
-declare namespace isEqual {}
+declare function isEqual<A = any, B = any>(a: A, b: B): boolean;
 export = isEqual;

package.json

@@ -8,12 +8,12 @@
     "preversion": "yarn test",
     "benchmark": "node benchmark",
     "eslint": "eslint \"*.js\" benchmark test",
-    "tslint": "eslint test/typescript/sample-usage.tsx",
+    "tslint": "eslint test/typescript/*.tsx",
     "test-browser": "karma start test/browser/karma.conf.js",
     "test-browser-ie": "karma start test/browser/karma.conf.ie.js",
     "test-node": "mocha \"test/node/*.spec.js\"",
     "test-node-cov": "nyc mocha \"test/node/*.spec.js\"",
-    "test-ts-usage": "tsc --esModuleInterop --jsx react --noEmit test/typescript/sample-usage.tsx",
+    "test-ts-usage": "tsc --esModuleInterop --jsx react --noEmit test/typescript/sample-react-redux-usage.tsx test/typescript/sample-usage.tsx",
     "test-ts-defs": "tsc --target ES5 index.d.ts",
     "test": "builder concurrent --buffer eslint tslint test-ts-usage test-ts-defs test-node-cov test-browser",
     "test-ie": "builder concurrent --buffer eslint tslint test-ts-usage test-ts-defs test-node-cov test-browser-ie",
@@ -45,6 +45,8 @@
     "@testing-library/preact": "^1.0.2",
     "@types/node": "^14.0.1",
     "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
     "@typescript-eslint/parser": "^2.34.0",
     "babel-loader": "^8.0.6",
     "benchmark": "^2.1.4",
@@ -71,7 +73,10 @@
     "nyc": "^14.1.1",
     "preact": "^10.4.1",
     "react": "^16.3.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
     "react-test-renderer": "^16.13.1",
+    "redux": "^4.0.5",
     "shallow-equal-fuzzy": "0.0.2",
     "sinon": "^7.5.0",
     "terser": "^4.4.3",

test/typescript/sample-react-redux-usage.tsx

@@ -0,0 +1,46 @@
+// This file exists to test our types against sample user code
+// This is compiled using `tsc` in our `test-ts-usage` script
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider, useSelector } from 'react-redux';
+import { createStore } from 'redux';
+
+import equal from '../../index.js';
+
+type IState = {
+  items: string[];
+};
+
+type IAction = {
+  type: string;
+  payload: any;
+};
+
+const initialState: IState = {
+  items: [],
+};
+
+const reducer = (state: IState, action: IAction) => {
+  return state;
+};
+
+const lengthSelector = (state: IState): number => state.items.length;
+
+const store = createStore(reducer, initialState);
+
+function Test() {
+  const length = useSelector(lengthSelector, equal);
+  return (
+    <div>
+      Testing react-redux useSelector. There are
+      {length.toExponential()} items.
+    </div>
+  );
+}
+
+ReactDOM.render(
+  <Provider store={store}>
+    <Test />
+  </Provider>,
+  document.getElementById('root')
+);