CODEWITHSUNDEEP
javascriptreactjstypescriptecmascript-6
Subrato Pattanaik
Subrato Pattanaik

Reputation: 6049

How to give optional property to function type which is having props?

I have created one interface in typescript which is going to be the custom type to my Another component.

interface Props{
  input: string | number;
  handleChange: ({name: string, continue: boolean}) => void;  
}

function Another({input, handleChange}: Props): JSX.Element {
// returning some JSX  
}

I want to make the name and continue parameters optional for handleChange function type. I tried with the below approach but didn't work as expected.

interface Props{
  input: string | number;
  handleChange: ({name?: string, continue?: boolean}) => void;  
}

Upvotes: 1

Views: 722

Answers (2)

Subrato Pattanaik
Subrato Pattanaik

Reputation: 6049

All credits to @bigblind. We need to pass an object as a whole as @bigblind said.

I did like the below which helped me pass my test cases.

interface handleChangeProps{
 name?: string;
 continue?: boolean;
}

interface Props{
  input: string | number;
  handleChange: ({name, continue}: handleChangeProps) => void;  
}

Upvotes: 0

bigblind
bigblind

Reputation: 12867

You can assign a name to the object as a whole, and make that optional, for instance:

interface Props{
  input: string | number;
  handleChange: (arg?: {name?: string, continue?: boolean}) => void;  
}

now, hadneChange can be called without any parameters, or with an object, possibly having a name and a continue field.

Upvotes: 2

Related Questions