ControlBar TypeScript error: No overload matches this call

[PhaedrusTheGreek]

ControlBar demos don't work when pasted into a new tsx file

EUI: 24.0.0

TypeScript error in /path/to/control-bar.tsx(94,22):
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<EuiControlBarProps>): EuiControlBar', gave the following error.
    Type '({ controlType: string; id: string; iconType: string; 'aria-label': string; responsive?: undefined; breadcrumbs?: undefined; color?: undefined; text?: undefined; onClick?: undefined; title?: undefined; label?: undefined; } | ... 5 more ... | { ...; })[]' is not assignable to type '((DisambiguateSet<(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<ButtonControlProps, (DisambiguateSet<BreadcrumbControl, TabControl> & ButtonHTMLAttributes<...> & { ...; }) | (DisambiguateSet<...> & BreadcrumbControl)> & DisambiguateSet<...> & ButtonHTMLAttributes<...> & { ...; }) | (Disambiguat...'.
      Type '{ controlType: string; id: string; iconType: string; 'aria-label': string; responsive?: undefined; breadcrumbs?: undefined; color?: undefined; text?: undefined; onClick?: undefined; title?: undefined; label?: undefined; } | ... 5 more ... | { ...; }' is not assignable to type '(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<ButtonControlProps, (DisambiguateSet<BreadcrumbControl, TabControl> & ButtonHTMLAttributes<...> & { ...; }) | (DisambiguateSet<...> & BreadcrumbControl)> & DisambiguateSet<...> & ButtonHTMLAttributes<...> & { ...; }) | (Disambiguate...'.
        Type '{ controlType: string; id: string; iconType: string; 'aria-label': string; responsive?: undefined; breadcrumbs?: undefined; color?: undefined; text?: undefined; onClick?: undefined; title?: undefined; label?: undefined; }' is not assignable to type '(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<ButtonControlProps, (DisambiguateSet<BreadcrumbControl, TabControl> & ButtonHTMLAttributes<...> & { ...; }) | (DisambiguateSet<...> & BreadcrumbControl)> & DisambiguateSet<...> & ButtonHTMLAttributes<...> & { ...; }) | (Disambiguate...'.
          Type '{ controlType: string; id: string; iconType: string; 'aria-label': string; responsive?: undefined; breadcrumbs?: undefined; color?: undefined; text?: undefined; onClick?: undefined; title?: undefined; label?: undefined; }' is not assignable to type 'DisambiguateSet<SpacerControl, (DisambiguateSet<(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<ButtonControlProps, (DisambiguateSet<BreadcrumbControl, TabControl> & ButtonHTMLAttributes<...> & { ...; }) | (DisambiguateSet<...> & BreadcrumbControl)> & DisambiguateSet<...> & ButtonHTMLAttributes<...> & { ...; }) |...'.
            Type '{ controlType: string; id: string; iconType: string; 'aria-label': string; responsive?: undefined; breadcrumbs?: undefined; color?: undefined; text?: undefined; onClick?: undefined; title?: undefined; label?: undefined; }' is not assignable to type 'ButtonControl'.
              Property 'label' is optional in type '{ controlType: string; id: string; iconType: string; 'aria-label': string; responsive?: undefined; breadcrumbs?: undefined; color?: undefined; text?: undefined; onClick?: undefined; title?: undefined; label?: undefined; }' but required in type 'ButtonControl'.
  Overload 2 of 2, '(props: EuiControlBarProps, context?: any): EuiControlBar', gave the following error.
    Type '({ controlType: string; id: string; iconType: string; 'aria-label': string; responsive?: undefined; breadcrumbs?: undefined; color?: undefined; text?: undefined; onClick?: undefined; title?: undefined; label?: undefined; } | ... 5 more ... | { ...; })[]' is not assignable to type '((DisambiguateSet<(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<(DisambiguateSet<ButtonControlProps, (DisambiguateSet<BreadcrumbControl, TabControl> & ButtonHTMLAttributes<...> & { ...; }) | (DisambiguateSet<...> & BreadcrumbControl)> & DisambiguateSet<...> & ButtonHTMLAttributes<...> & { ...; }) | (Disambiguat...'.  TS2769

    92 |   if (isDisplaying) {
    93 |     display = (
  > 94 |       <EuiControlBar controls={codeControls} showContent={contentIsVisible}>
       |                      ^
    95 |         <div style={{ padding: '2rem', maxWidth: '60rem', margin: '0 auto' }}>
    96 |           <EuiPanel>
    97 |             <EuiText> 

[chandlerprall]

When defining codeControls, TS sees all those lovely string values as marks them as string type, when EuiControlBar has stricter validation, e.g. controlType: 'button' has additional rules.

Instead of const codeControls = [, add a type definition with

const codeControls: React.ComponentProps<typeof EuiControlBar>['controls'] = [

This forces TS to resolve those strings into the expected types, and also helpfully flags the 2nd-from-the-last control as incorrect, as our typescript definition for icon is incomplete and does not like the onClick parameter. You can cheat here by passing onClick: (() => {}) as any as undefined, to get around the error while we fix the types.