title: Deconstruct nested parameters with typescript and default values
body: <p>If I had the following in javascript:</p>
  
  <pre class="lang-js prettyprint-override"><code>//deconstructed
  ({ theme: { colors: { border = '#cccccc' } = {} } = {} } =&gt; border)
  
  //Creating similar with nested params
  //Optional Chaining
  props?.theme?.colors?.border ?? '#cccccc' 
  
  //bog standard js
  props.theme &amp;&amp; props.theme.colors ? props.theme.colors.border : '#cccccc'
  </code></pre>
  
  <p>Here is what I have managed to get so far with <code>typescript</code></p>
  
  <pre class="lang-js prettyprint-override"><code>(props:Props, { theme: { colors: { border = '#cccccc' } = {} } = {} }: { theme: Object }) =&gt; border
  </code></pre>
  
  <p>But this falls over with:</p>
  
  <pre class="lang-js prettyprint-override"><code>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; }) =&gt; any' is not assignable to parameter of type 'SimpleInterpolation'.
        Type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) =&gt; any' is missing the following properties from type 'FlattenSimpleInterpolation': concat, join, slice, indexOf, and 17 more.
    Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction&lt;ThemeProps&lt;any&gt;&gt;, ...interpolations: Interpolation&lt;ThemeProps&lt;any&gt;&gt;[]): FlattenInterpolation&lt;...&gt;', gave the following error.
      Argument of type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) =&gt; any' is not assignable to parameter of type 'Interpolation&lt;ThemeProps&lt;any&gt;&gt;'.
        Type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) =&gt; any' is not assignable to type 'InterpolationFunction&lt;ThemeProps&lt;any&gt;&gt;'.
    Overload 3 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction&lt;ThemedStyledProps&lt;Props, any&gt;&gt;, ...interpolations: Interpolation&lt;...&gt;[]): FlattenInterpolation&lt;...&gt;', gave the following error.
      Argument of type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) =&gt; any' is not assignable to parameter of type 'Interpolation&lt;ThemedStyledProps&lt;Props, any&gt;&gt;'.
        Type '(props: Props, { theme: { colors: { border } } }: { pretty: Object; }) =&gt; any' is not assignable to type 'InterpolationFunction&lt;ThemedStyledProps&lt;Props, any&gt;&gt;'.  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`
    &gt; 53 |     1px solid ${(props:Props, { theme: { colors: { border = '#cccccc' } = {} } = {} }: { theme: Object }) =&gt; border};
         |                 ^
      54 | `;
      55 | 
      56 | const errorBorder = css`
  
  </code></pre>