Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can the .show() method be smarter about its return type? #105

Open
cssinate opened this issue Feb 10, 2023 · 6 comments
Open

Can the .show() method be smarter about its return type? #105

cssinate opened this issue Feb 10, 2023 · 6 comments
Labels
enhancement New feature or request

Comments

@cssinate
Copy link

cssinate commented Feb 10, 2023

export function show<T extends string>(modal: T, args?: Record<string, unknown>): Promise<unknown>;

Right now, the .show() method always returns Promise<unknown>. If I'm not mistaken, whatever I end up passing into .resolve() is what gets returned to .show().

I'm only still learning TypeScript, but can't you use generics to accept a type? Right now, I'm having to do a manual type-check method in order to assert my return type. It feels like I shouldn't have to do that.

For example, if when constructing the modal, you do

modal.resolve(true)

In the app when you do

modal.show().then((res) => whatever...

TypeScript thinks res is unknown. Surely there's a way I can assert that it's a boolean?

@cssinate cssinate reopened this Feb 10, 2023
@chen86860
Copy link

You can using NiceModal.show and pass generic type while calling it. eg:

  NiceModal.show<boolean>(someModal).then((res) => {
    // res is boolean you passed in
    console.log(res);
  });

@tangdw
Copy link

tangdw commented Mar 17, 2023

You can using NiceModal.show and pass generic type while calling it. eg:

  NiceModal.show<boolean>(someModal).then((res) => {
    // res is boolean you passed in
    console.log(res);
  });

能在 someModal 里面定义,然后 show 的时候自动推断吗?

@supnate supnate added the enhancement New feature or request label Oct 2, 2023
@kbzowski
Copy link

kbzowski commented Nov 19, 2023

Any chance to have types support also for imperative code (using hooks)?

const modal = useModal(MyModal);
...
modal.show<ReturnType>().then(result => {})

@weiskopfsodefa
Copy link

This would be very nice!
Using the generic type from the .show() function doesn't really help, it's as good as casting my result as [some type] which doesn't have to be in sync with the actual return value. Also I have to look up what types my ModalComponent might return.

I think it should at least be a return type specified in the ModalComponent which is checked against my resolve values and then used by the .show() function.

Something like this:

const ConfirmDialog = NiceModal.create<
{
  //input
  title: string
}, 
  //output
  boolean
>(({ title }) => {
  const modal = useModal()
  ...
  // would error if resolve value is not typeof boolean
  modal.resolve(true)
  ...
})
// confirmResult is typeof boolean (specified from the output of ConfirmDialog)
const confirmResult = await NiceModal.show(
  ConfirmDialog,
  { title: 'Hi' }
)

@s97712
Copy link

s97712 commented Jul 20, 2024

I think you can pass a modal parameter with a return type through NiceModal.create.

const ConfirmDialog = NiceModal.create<{
  //input
  title: string
}, 
  //output
  boolean
>((modal, { title }) => {
  ...
  // would error if resolve value is not typeof boolean
  modal.resolve(true)
  ...
})

@theogravity
Copy link

I think you can pass a modal parameter with a return type through NiceModal.create.

const ConfirmDialog = NiceModal.create<{
  //input
  title: string
}, 
  //output
  boolean
>((modal, { title }) => {
  ...
  // would error if resolve value is not typeof boolean
  modal.resolve(true)
  ...
})

That won't work. Create only has a single generic:

<P extends {}>(Comp: React.ComponentType<P>) => React.FC<P & NiceModalHocProps>;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

8 participants