如何在 typescript + React 中为 Object 类型的可选嵌套 props 提供默认值？

Question

I'm using Typescript and React. I typically assign default props while destructuring them like so:

import * as React from "react"

type ComponentProps = {
  a: string;
  b?: number;
}

const Component: React.FC<ComponentProps> = ({
  a,
  b = 2
}) => {

  //...

}

But if a prop is an object, or even a nested object, is there a way to assign default values to some properties while keeping some as required?

For example:

import * as React from "react"

type ComponentProps = {
  a: {
    b: number;
    c?: string;
  };
  d?: {
    e?: number;
    f?: string;
  };
  g?: {
    h?: number;
    f: string;
  };
}

const Component: React.FC<ComponentProps> = ({

  /* I'm not sure what to do here...*/

}) => {
  //...
}

I guess I'm actually asking three questions.

1. While destructuring, can I assign a default value to the optional property of a required object, such as ac ?
2. While destructuring, if I assign default values to de and df, and when used only de is provided, will df still be retained?
3. Can you have a required property of an optional object, such as gf ? I think in my mind it's like saying, "This prop is optional, but if you provide it you must provide gf ".

Answer 1

It's possible , but nested destructuring can be difficult to read. I'd recommend avoiding the pattern when possible.

While destructuring, can I assign a default value to the optional property of a required object, such as ac ?

If you had to, for a default value for c :

const Component: React.FC<ComponentProps> = ({
  a: {
    b,
    c = 'foo',
  }
  // ...
}) => {
  //...
}

While destructuring, if I assign default values to de and df, and when used only de is provided, will df still be retained?

Yes, if you assign a default object to the whole d :

const Component = ({
  d: {
    e = 5,
    f = 'foo',
  } = {},
}: ComponentProps) => {
  //...
}

Can you have a required property of an optional object, such as gf

Yes, that's just fine.