Как правильно прописать типы?

Question

[lexstile]

Изначально было так:

export enum SelectSize {
    medium = 'medium',
    large = 'large',
}
export const selectSizeValues: { [key in SelectSize]: string } = {
    [SelectSize.medium]: '24px 56px 8px 16px',
    [SelectSize.large]: '32px 64px 8px 24px',
};

Я хочу сделать так:

export enum SelectSize {
    medium = 'medium',
    large = 'large',
}
export enum SelectSize1 {
    bottom = 'bottom',
    left = 'left',
    right = 'right',
    top = 'top',
}
export const selectSizeValues: { [key in SelectSize]: /* Какой тип прописать тут? */ } = {
    [SelectSize.medium]: {
        bottom: '8px',
        left: '16px',
        right: '56px',
        top: '24px',
    },
    [SelectSize.large]: {
        bottom: '8px',
        left: '24px',
        right: '64px',
        top: '32px',
    },
};

Как правильно прописать стили для последнего?

Answer 1

[G F]

export enum SelectSize {
  medium = "medium",
  large = "large",
}

// создай тип
type PositionProps = {
  bottom: string;
  left: string;
  right: string;
  top: string;
};

// или интерфейс
interface PositionProps {
  bottom: string;
  left: string;
  right: string;
  top: string;
};

export const selectSizeValues: { [key in SelectSize]: PositionProps } = {
  [SelectSize.medium]: {
    bottom: "8px",
    left: "16px",
    right: "56px",
    top: "24px",
  },
  [SelectSize.large]: {
    bottom: "8px",
    left: "24px",
    right: "64px",
    top: "32px",
  },
};