What is the correct type for event in Checkbox event handler?

[mcalligator]

My code works, but is flagged by TypeScript as having an implicit 'any' type, which I'd like to fix. However, I can't identify the correct type to associate with the event detail passed into the handler for my Checkbox. Here's the relevant handler code:

  function handleDeleteToggle(e) {  // <-- Issue flagged here
    const checked = e.detail.checked;
    setDeleteChecked(checked);
  }

And here's the TSX where it's invoked from:

        <Checkbox
          checked={deleteChecked}
          onChange={handleDeleteToggle}
          disabled={user.isNew}
        ></Checkbox>

I've tried declaring e as a variety of things, including ChangeDetail, CheckboxProps.ChangeDetail, and NonCancelableEventHandler<CheckboxProps.ChangeDetail>, to no avail: whatever I set it to, I get another error in the onChange prop in the TSX:

Type '(e: NonCancelableEventHandler<ChangeDetail>) => void' is not assignable to type 'NonCancelableEventHandler<ChangeDetail>'.
  Types of parameters 'e' and 'event' are incompatible.
    Type 'NonCancelableCustomEvent<ChangeDetail>' is not assignable to type 'NonCancelableEventHandler<ChangeDetail>'.
      Type 'NonCancelableCustomEvent<ChangeDetail>' provides no match for the signature '(event: NonCancelableCustomEvent<ChangeDetail>): void'.ts(2322)
interfaces.d.ts(19, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & CheckboxProps & RefAttributes<Ref>'
(property) CheckboxProps.onChange?: NonCancelableEventHandler<CheckboxProps.ChangeDetail> | undefined

I'll admit I'm fairly new to TypeScript, so may be overlooking something basic, but if someone could advise on the right way to fix this (and explain why it;s right), I'd be really grateful.

[just-boris]

You can do this

import { Checkbox, CheckboxProps } from '@cloudscape-design/components';


const handleDeleteToggle: CheckboxProps['onChange'] = event => {
  ...
}

[mcalligator]

Thanks for the reply Boris; your suggestion works.

it wasn't clear from the Type declarations that this would require a function expression, rather than a declaration. This is an area of TypeScript I'm not yet familiar with, so I'll need to do some homework to understand it better. Thanks again.