typescript: Better way to type optional without default value?

Question

I am writing react application with typescript. To provide a typed props I am using the code below.

type ScheduleBoxContentProps = {
  desc: ReactNode,
  lottie: LottieProps,
} & Partial<{className: string}>;

As you can see, I want className prop to be optional, but don't want to define defaultProps for it. In addition, desc and lottie props should be provided.

Is there any better way to define optional without default ?

Edit

I am sorry for the missing context.

If I use React.FC with my custom prop type then there is no problem. Because React.FC uses Partial inside of it.

type MyProps = {
  className?: string;
}
// no erros and warnings
const Component: React.FC<MyProps> = (props) => <div />;

But I don't want my component to accept the children props. I want my component to alert when children props are coming. Thus I am using function components with code below.

// error: default value for className is not provided. 
const Component = ({className}: MyProps) => <div className={className} />;

and it tells me that className's default value are defined. I should define it explicitly. Using code below.

Component.defaultProps = {className: ''};

IMO, it seems little bit unnecessary code, so I decided to use Partial on optional props.

type MyProps = Partial<{className: string}>;

Is there any better way to achieve this? Or, using defaultProps is the best practice?

Luiz Ferraz · Accepted Answer · 2021-03-07 02:50:48Z

2

You can just add ? after the property name:

type ScheduleBoxContentProps = {
  desc: ReactNode,
  lottie: LottieProps,
  
  // This ? is literally what Partial does
  className?: string,
};

As for your edited example, what I think would be the most simple is to set the default value in the destructuring syntax:

const Component = ({className = ''}: MyProps) => <div className={className} />;

edited Mar 7, 2021 at 2:50

answered Mar 7, 2021 at 2:28

Luiz Ferraz

1,56510 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

wurikiji Over a year ago

Sorry for missing context. I added some more information about my situation.

Luiz Ferraz Over a year ago

I edited my response with a possible solution

wurikiji Over a year ago

I was thinking too complicated. You point me out the right solution with a basic :) Thanks a lot!. I would use your solution for simple props and Partial for other complicated props if it happens.

angelos_lex · Accepted Answer · 2021-03-07 02:27:45Z

1

What about

className?: string;

answered Mar 7, 2021 at 2:27

angelos_lex

1,6711 gold badge18 silver badges24 bronze badges

1 Comment

wurikiji Over a year ago

Sorry for missing context. I added some more information about my situation.

Collectives™ on Stack Overflow

typescript: Better way to type optional without default value?

Edit

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

Edit

2 Answers 2

3 Comments

1 Comment

Related