Así que esto es realmente difícil de describir sin código, así que déjame mostrarte esto primero:

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

Como puede ver, esto es realmente feo e ilegible. Estamos tratando de crear un componente de espaciado en el que sea posible pasar el margin y el padding como accesorios (o las propiedades CSS individuales como paddingLeft y marginBottom ). Ahora padding podría tomar un número o una cadena del SpacingMultiplier (lo multiplicará por 0.25rem ya que estamos usando una cuadrícula de 4px) hasta un total de 4 argumentos (arriba, derecha, abajo, izquierda). ¿Hay alguna manera mejor de escribir esto como en expresiones regulares que podrías con {4} o algo así?

Primero definimos el tipo SpacingMultiplier . Luego definimos que este SpacingMultiplier puede ser una string o un number y luego definimos que podría tomar hasta 4 argumentos (en caso de definir padding o margin ). Pero la forma en que estamos haciendo esto ahora es, en mi opinión, fea e ilegible.

¿Hay alguna forma mejor y más legible de hacer esto correctamente?

¡Gracias!