Q:

Deconstruct nested parameters with typescript and default values

If I had the following in javascript:
//deconstructed
({ theme: { colors: { border = '#cccccc' } = {} } = {} } => border)

//Creating similar with nested params
//Optional Chaining
props?.theme?.colors?.border ?? '#cccccc' 

//bog standard js
props.theme && props.theme.colors ? props.theme.colors.border : '#cccccc'

Here is what I have managed to get so far with typescript
(props:Props, { theme: { colors: { border = '#cccccc' } = {} } = {} }: { theme: Object }) => border

But this falls over with:
TypeScript error in /var/www/poc/src/components/text-input/text-input.tsx(53,17):
No overload matches this call.
  Overload 1 of 3, '(first: TemplateStringsArray | CSSObject, ...interpolations: SimpleInterpolation[]): FlattenSimpleInterpolation', gave the following error.
    Argument of type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) => any' is not assignable to parameter of type 'SimpleInterpolation'.
      Type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) => any' is missing the following properties from type 'FlattenSimpleInterpolation': concat, join, slice, indexOf, and 17 more.
  Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemeProps<any>>, ...interpolations: Interpolation<ThemeProps<any>>[]): FlattenInterpolation<...>', gave the following error.
    Argument of type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) => any' is not assignable to parameter of type 'Interpolation<ThemeProps<any>>'.
      Type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) => any' is not assignable to type 'InterpolationFunction<ThemeProps<any>>'.
  Overload 3 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Props, any>>, ...interpolations: Interpolation<...>[]): FlattenInterpolation<...>', gave the following error.
    Argument of type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) => any' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Props, any>>'.
      Type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) => any' is not assignable to type 'InterpolationFunction<ThemedStyledProps<Props, any>>'.  TS2769

    51 | /* css border variants (this is an example of splitting up styles a bit more than the example in StyledLabel) */
    52 | const normalBorder = css`
  > 53 |     1px solid ${(props:Props, { theme: { colors: { border = '#cccccc' } = {} } = {} }: { theme: Object }) => border};
       |                 ^
    54 | `;
    55 | 
    56 | const errorBorder = css`

A:

Here is a working example of destructured parameters with default values: 
const myFn = ({ theme: { colors: { border = '#cccccc' } = {} } = {} } = {}) => border

myFn() // #cccccc
myFn({}) // #cccccc
myFn({ theme: {} }) // #cccccc
myFn({ theme: { colors: {} } }) // #cccccc
myFn({ theme: { colors: { border: '#000000' } } }) // #000000

// Not sure, how your `props` are related to the theme object, so I omitted them here

Destructuring assignments can really become hard to read with deeply nested structures. It even becomes more complex, when you give explicit types to myFn or parameters:
type Themeable = {
    theme?: {
        colors?: {
            border?: string
        }
    }
}

const myFn = ({ theme: { colors: { border = '#cccccc' } = {} } = {} }: Themeable = {}) 
  => border 

TS docs advise to keep them as simple as possible or manually write the assignments for better readability:

Use destructuring with care. As the previous example demonstrates, anything but the simplest destructuring expression is confusing. This is especially true with deeply nested destructuring, which gets really hard to understand even without piling on renaming, default values, and type annotations. Try to keep destructuring expressions small and simple. You can always write the assignments that destructuring would generate yourself.

Code sample

