Fix types

Author: supnate

.eslintrc.js

@@ -15,22 +15,23 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
     'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
   },
-	overrides: [
+  overrides: [
     {
       // For react component files, we want to allow types of the form `type Props = {}`
       // as Props is guaranteed to be an object by React. Without overriding this rule,
       // we would need to extend the Props generic from Record<string, unknown>
       // which causes issues when consumer props are defined as interface without an index signature.
       // Refer to react part of the comment for more details.
       // https://github.com/typescript-eslint/typescript-eslint/issues/2063#issuecomment-675156492
-      excludedFiles: "src/*.tsx",
+      excludedFiles: 'src/*.tsx',
+      files: ['*.tsx'],
       rules: {
-        "@typescript-eslint/ban-types": [
-          "error",
+        '@typescript-eslint/ban-types': [
+          'error',
           {
             extendDefaults: true,
             types: {
-              "{}": false,
+              '{}': false,
             },
           },
         ],

example/src/TsTest.tsx

@@ -0,0 +1,44 @@
+// This a test file to check if typescript is working properly
+
+import NiceModal, { useModal, antdModalV5 } from '@ebay/nice-modal-react';
+
+const MyModal1 = NiceModal.create(({ p1, p2 }: { p1: string; p2: number }) => {
+  const modal = useModal();
+  return (
+    <div {...antdModalV5(modal)}>
+      <h1>Foo</h1>
+      <button onClick={modal.hide}>Close</button>
+    </div>
+  );
+});
+
+const MyModal2 = NiceModal.create(() => {
+  const modal = useModal();
+  return (
+    <div {...antdModalV5(modal)}>
+      <h1>Foo</h1>
+      <button onClick={modal.hide}>Close</button>
+    </div>
+  );
+});
+
+NiceModal.register('modal-1', MyModal1, { p2: 1 });
+
+export default function TsTest() {
+  const modal1 = useModal(MyModal1, { p3: 'foo', p2: 123 });
+  modal1.show({ p1: 'foo', p2: 123, p4: 'hello' }); // expected: p4 should not be accepted
+
+  NiceModal.show(MyModal1); // valid?
+  NiceModal.show(MyModal1, { p1: 'foo', p2: 123 }); // valid
+  NiceModal.show(MyModal1, { p1: 'foo', p2: '123' }); // expected ts error: p2 should be number
+  NiceModal.show(MyModal1, { p1: 'foo' }); // unexpected ts error: p2 is already set when register
+
+  const modal1_1 = useModal('modal-1', { p3: 'foo', p2: 123 });
+  modal1_1.show();
+
+  const modal2 = useModal(MyModal2);
+  modal2.show();
+  modal2.show({ p1: 'foo', p2: 123 }); // expected ts error
+
+  return <>hello ts</>;
+}

src/index.tsx

@@ -160,7 +160,7 @@ export const reducer = (
 };
 
 // Get modal component by modal id
-function getModal(modalId: string) {
+function getModal(modalId: string): React.FC<any> | undefined {
   return MODAL_REGISTRY[modalId]?.comp;
 }
 
@@ -223,6 +223,7 @@ export function show<T extends any, C extends any>(
   modal: React.FC<C>,
   args?: NiceModalArgs<React.FC<C>>,
 ): Promise<T>;
+
 // export function show<T extends any, C extends React.FC>(modal: C, args?: Omit<React.ComponentProps<C>, 'id'>): Promise<T>;
 export function show<T extends any>(modal: string, args?: Record<string, unknown>): Promise<T>;
 export function show<T extends any, P extends any>(modal: string, args: P): Promise<T>;
@@ -383,7 +384,7 @@ export function useModal(modal?: any, args?: any): any {
     ],
   );
 }
-export const create = <P extends {}>(
+export const create = <P extends Record<string, unknown>>(
   Comp: React.ComponentType<P>,
 ): React.FC<P & NiceModalHocProps> => {
   return ({ defaultVisible, keepMounted, id, ...props }) => {