Type `globalTypes` to assist writing `preview.js`

Is your feature request related to a problem? Please describe It's a bit painful setting up globals in preview.js, having to refer back to docs and risk errors without strict types.

Describe the solution you'd like I tried writing a preview.d.ts that enforces the structure from Storybook docs, but my preview.js didn't seem to enforce it or provide intellisense. I don't have much experience writing definition files, but it should work something like:

import { IconKey } from '@storybook/components/dist/icon/icons'

export declare type GlobalType<T> = {
  name: string
  description?: string
  defaultValue?: T
  toolbar: {
      icon?: IconKey
      items: Array<{
          title: string
          value: T
          left?: string
          right?: string
          icon?: IconKey
      }>
  }
}

export declare type GlobalTypes = Record<string, GlobalType<unknown>>

export declare const globalTypes: GlobalTypes

Describe alternatives you've considered Alternatively, Storybook could allow preview.js to be provided as preview.ts and expose GlobalTypes with other types like Meta and Story. That would allow using the utility type above to enforce strictly typed values in items array. e.g.

// .storybook/preview.ts

import { GlobalType } from '@storybook/react/types-6-0'

type CountryCodes = 'en' | 'fr' | 'es' | 'zh' | 'kr'

export const globalTypes: {
  locale: GlobalType<CountryCodes>
} = {
  locale: {
    name: 'Locale',
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: [
        { value: 'en', right: '🇺🇸', title: 'English' },
        { value: 'fr', right: '🇫🇷', title: 'Français' },
        { value: 'es', right: '🇪🇸', title: 'Español' },
        { value: 'zh', right: '🇨🇳', title: '中文' },
        { value: 'kr', right: '🇰🇷', title: '한국어' },
      ],
    },
  },
}

Are you able to assist to bring the feature to reality? Yep, can do with a little help understanding your conventions.