So this is really hard to describe without code so let me show this first:

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;
}

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 margin and padding passed as props (or the individual CSS properties like paddingLeft and marginBottom). Now padding could take a number or string from the SpacingMultiplier (it'll multiply it by 0.25rem 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 {4} or something?

We first define the SpacingMultiplier type. Then we define that this SpacingMultiplier can be either a string or a number and then we define that it could take up to 4 arguments (in case of defining padding or margin). But the way we're doing this now is, in my opinion, ugly and unreadable.

Is there any better and more readable way to properly do this?

Thanks!