title: Typescript type definition can occur x amount of times in another type
body: <p>So this is really hard to describe without code so let me show this first:</p>
  <pre><code>type SpacingMultiplier = 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
  type SpacingMultiplierStringOrNumber = `${SpacingMultiplier}` | SpacingMultiplier;
  type MultiValueSpacingMultiplier =
    | `${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier}`
    | `${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier}`
    | `${SpacingMultiplier} ${SpacingMultiplier}`
    | SpacingMultiplierStringOrNumber;
  
  export interface Spacing {
    padding?: MultiValueSpacingMultiplier;
    paddingTop?: SpacingMultiplierStringOrNumber;
    paddingBottom?: SpacingMultiplierStringOrNumber;
    paddingLeft?: SpacingMultiplierStringOrNumber;
    paddingRight?: SpacingMultiplierStringOrNumber;
    margin?: MultiValueSpacingMultiplier;
    marginTop?: SpacingMultiplierStringOrNumber;
    marginBottom?: SpacingMultiplierStringOrNumber;
    marginLeft?: SpacingMultiplierStringOrNumber;
    marginRight?: SpacingMultiplierStringOrNumber;
  }
  </code></pre>
  <p>So as you can see, this is really ugly and unreadable. We are trying to create a spacing component in which it's possible to have <code>margin</code> and <code>padding</code> passed as props (or the individual CSS properties like <code>paddingLeft</code> and <code>marginBottom</code>). Now <code>padding</code> could take a number or string from the SpacingMultiplier (it'll multiply it by <code>0.25rem</code> since we're using a 4px grid) up to a total of 4 arguments (top, right, bottom, left). Is there any better way to write this like in regex you could with <code>{4}</code> or something?</p>
  <p>We first define the <code>SpacingMultiplier</code> type. Then we define that this <code>SpacingMultiplier</code> can be either a <code>string</code> or a <code>number</code> and then we define that it could take up to 4 arguments (in case of defining <code>padding</code> or <code>margin</code>). But the way we're doing this now is, in my opinion, ugly and unreadable.</p>
  <p>Is there any better and more readable way to properly do this?</p>
  <p>Thanks!</p>