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

[cssinate]

nice-modal-react/src/index.tsx

Line 216 in 979c283

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?

[chen86860]

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]

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 的时候自动推断吗？

[kbzowski]

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

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

[weiskopfsodefa]

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]

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]

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>;