Как правильно типизировать ts?

Question

Я только недавно начал изучать типизацию ts и столкнулся с проблемой, как правильно типизировать одну из функций, при использование split() которая возвращает string а мне надо определённый набор

КОД

type Alignment = 'start' | 'center' | 'end';
interface TooltipProps {
...
    placement?:
    'top-start' | 'top' | 'top-end' |
    'right-start' | 'right' | 'right-end' |
    'bottom-start' | 'bottom' | 'bottom-end' |
    'left-end' | 'left' | 'left-start';
...
}

const changeAlignment = (placement: TooltipProps['placement'], newAlignment: Alignment): TooltipProps['placement'] => {
    const parts = placement.split('-');
    if (!parts[1]) parts.push(newAlignment);
    else parts[1] = newAlignment;
    return newAlignment === 'center' ? parts[0] as TooltipProps['placement'] : parts.join('-') as TooltipProps['placement'];
}

В функции changeAlignment я использовал 'as' не знаю на сколько это правильно, просто я читал много статей, и во многих говорили максимально избегайте 'as' и вот я не знаю можно ли тут обойдись без него, или в нем ничего плохого?

Answer 1

«Не видеть леса за деревьями»

Есть такое выражение. У вас именно такой случай. Следуя за мыслями об этих типах, as-ах и другим программизмом, вы усложнили код и перестали видеть общую картину.

В вашем вопросе решением будет упрощение бизнес-логики и упрощение типов до атомарных сущностей.

type Alignment = 'start' | 'center' | 'end';
type PlacementV = 'top' | 'right' | 'bottom' | 'left';
type PlacementH = Exclude<Alignment, 'center'>;
type Placement = PlacementV | `${PlacementV}-${PlacementH}`;

interface TooltipProps {
  placement?: Placement;
}

const changeAlignment = (
  placement: Placement,
  newAlignment: Alignment
): Placement => {
  const [firstPart] = placement.split('-', 1) as [v: PlacementV];
  return newAlignment === 'center' ? firstPart : `${firstPart}-${newAlignment}`;
};

БЛОГ НА HUSL

Как правильно типизировать ts?

Ответы (1 шт):