feat(types): enhance type safety (#378)

* feat(types): enhance type safety

* chore(deps-dev): upgrade packages

* chore(deps-dev): downgrade husky

* docs(readme): add ts section

README.md

@@ -97,6 +97,29 @@ function App({ options }) {
 }
 ```
 
+## TypeScript
+
+This custom compare hooks is type-safe because it is built with TypeScript, which requires the use of TypeScript 4.0 or higher.
+
+```tsx
+import React from "react";
+import { useCustomCompareEffect } from "use-custom-compare";
+import isEqual from "lodash/isEqual";
+
+function App() {
+  useCustomCompareEffect(
+    () => {},
+    [1, { a: "b" }, true],
+    (
+      prevDeps, // type: [number, { a: string }, boolean]
+      nextDeps // type: [number, { a: string }, boolean]
+    ) => isEqual(prevDeps, nextDeps)
+  );
+
+  return <div />;
+}
+```
+
 ## Note
 
 In the following cases, use React's useEffect/useMemo/useCallback hooks instead of this custom compare hooks!

package.json

@@ -45,25 +45,25 @@
     "@testing-library/react-hooks": "^3.7.0",
     "@types/jest": "^26.0.20",
     "@types/react": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^4.12.0",
     "commitizen": "^4.2.2",
     "cz-conventional-changelog": "^3.3.0",
     "dequal": "^2.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-typescript": "^7.2.1",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint": "^7.17.0",
+    "eslint-config-airbnb-typescript": "^12.0.0",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "git-cz": "^4.7.6",
-    "husky": "^5.0.6",
-    "jest": "^25.5.4",
+    "husky": "^4.3.7",
+    "jest": "^26.6.3",
     "lint-staged": "^10.5.3",
     "prettier": "^2.2.1",
-    "react": "^16.14.0",
-    "react-test-renderer": "^16.14.0",
+    "react": "^17.0.1",
+    "react-test-renderer": "^17.0.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.36.1",
     "rollup-plugin-filesize": "^9.1.0",
@@ -72,11 +72,12 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.29.0",
     "semantic-release": "^17.3.1",
-    "ts-jest": "^25.5.1",
-    "typescript": "^3.9.7"
+    "ts-jest": "^26.4.4",
+    "typescript": "^4.0.5"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "typescript": ">=4.0.2",
+    "react": ">=16.8.0 <=17.x"
   },
   "husky": {
     "hooks": {

src/types.ts

@@ -1,6 +1,6 @@
 import { DependencyList } from 'react';
 
-export type DepsAreEqual = (
-  prevDeps: DependencyList,
-  nextDeps: DependencyList,
+export type DepsAreEqual<TDependencyList extends DependencyList> = (
+  prevDeps: TDependencyList,
+  nextDeps: TDependencyList,
 ) => boolean;

src/useCustomCompareCallback.ts

@@ -2,10 +2,13 @@ import { useCallback, DependencyList } from 'react';
 import { checkDeps, useCustomCompareMemoize } from './useCustomCompareMemoize';
 import { DepsAreEqual } from './types';
 
-function useCustomCompareCallback<T extends (...args: any[]) => any>(
+function useCustomCompareCallback<
+  T extends (...args: any[]) => any,
+  TDependencyList extends DependencyList
+>(
   callback: T,
-  deps: DependencyList,
-  depsEqual: DepsAreEqual,
+  deps: [...TDependencyList],
+  depsEqual: DepsAreEqual<TDependencyList>,
 ): T {
   if (process.env.NODE_ENV !== 'production') {
     checkDeps(deps, depsEqual, 'useCustomCompareCallback');

src/useCustomCompareEffect.ts

@@ -2,10 +2,10 @@ import { useEffect, EffectCallback, DependencyList } from 'react';
 import { checkDeps, useCustomCompareMemoize } from './useCustomCompareMemoize';
 import { DepsAreEqual } from './types';
 
-function useCustomCompareEffect(
+function useCustomCompareEffect<TDependencyList extends DependencyList>(
   effect: EffectCallback,
-  deps: DependencyList,
-  depsAreEqual: DepsAreEqual,
+  deps: [...TDependencyList],
+  depsAreEqual: DepsAreEqual<TDependencyList>,
 ) {
   if (process.env.NODE_ENV !== 'production') {
     checkDeps(deps, depsAreEqual, 'useCustomCompareEffect');

src/useCustomCompareMemo.ts

@@ -2,10 +2,10 @@ import { useMemo, DependencyList } from 'react';
 import { checkDeps, useCustomCompareMemoize } from './useCustomCompareMemoize';
 import { DepsAreEqual } from './types';
 
-function useCustomCompareMemo<T>(
+function useCustomCompareMemo<T, TDependencyList extends DependencyList>(
   factory: () => T,
-  deps: DependencyList,
-  depsAreEqual: DepsAreEqual,
+  deps: [...TDependencyList],
+  depsAreEqual: DepsAreEqual<TDependencyList>,
 ): T {
   if (process.env.NODE_ENV !== 'production') {
     checkDeps(deps, depsAreEqual, 'useCustomCompareMemo');

src/useCustomCompareMemoize.ts

@@ -5,9 +5,9 @@ function isPrimitive(val: any) {
   return val == null || /^[sbn]/.test(typeof val);
 }
 
-export function checkDeps(
-  deps: React.DependencyList,
-  depsAreEqual: DepsAreEqual,
+export function checkDeps<TDependencyList extends DependencyList>(
+  deps: [...TDependencyList],
+  depsAreEqual: DepsAreEqual<TDependencyList>,
   name: string,
 ) {
   const reactHookName = `React.${name.replace(/CustomCompare/, '')}`;
@@ -29,11 +29,11 @@ export function checkDeps(
   }
 }
 
-export function useCustomCompareMemoize(
-  deps: DependencyList,
-  depsAreEqual: DepsAreEqual,
+export function useCustomCompareMemoize<TDependencyList extends DependencyList>(
+  deps: [...TDependencyList],
+  depsAreEqual: DepsAreEqual<TDependencyList>,
 ) {
-  const ref = useRef<DependencyList>([]);
+  const ref = useRef<TDependencyList | undefined>(undefined);
 
   if (!ref.current || !depsAreEqual(ref.current, deps)) {
     ref.current = deps;