12 советов по внедрению TypeScript в React-приложениях

Совет 8: литеральный тип vs enum

Думаю, стоит заметить, что при использовании литеральных типов сильно усложняется рефакторинг, т.к. IDE не может увидеть связь между литералом в типе и строковым значением параметра.

Так же, типы часто приходится экспортировать/импортировать, и если таких типов много или если где-то используется много компонентов, и каждый из них содержит в себе типизированный параметр, то количество импортов может сильно вырасти. Для себя я вывел идею того, что типы, которые будут использоваться вне компонента, но вместе с ним, можно записать в статичные поля и получится что-то подобное:

enum FlexDirection {...};
enum AlignItems {...};

interface StaticFields {
  FlexDirection: FlexDirection;
  AlignItems: AlignItems;
}

const FlexContainer: React.FC<Props> & StaticFields = () => {...};

FlexContainer.FlexDirection = FlexDirection;
FlexContainer.AlignItems = AlignItems;

<FlexContainer flexDirection={FlexContainer.FlexDirection...}>...</FlexContainer>