Возможно ли реализовать более изящную типизацию объектов и деструктивное присваивание?

Question

[nickerlan]

Поймал себя на том, что постоянно пишу вот такие-вот странные конструкции, два раза повторяя себя в названии переменных:

export const Component = ({
  prop1,
  prop2,
  prop3,
}: {
  prop1: string;
  prop2: number;
  prop3: boolean;
})=>{
//...
}

Есть ли вариант изящнее это реализовать?

Answer 1

[Aetae]

А ты для начала придумай синтаксис для этого, который бы не вступал в прямой кофликт с JS и при этом был интуитивен.)
Вот тут на тему много копий сломано, но, ИМХО, нет нормальных достойных релиза вариантов.)

Answer 2

[wonderingpeanut]

Можно вынести тип пропсов в отдельный тип/интерфейс

type ComponentProps = {
  prop1: string;
  prop2: number;
  prop3: boolean;
}

и указать тип пропсов "ComponentProps"

export const Component = ({ prop1, prop2, prop3 }: ComponentProps) => {
  ...
}

Можно так же воспользоваться типом FC (дженерик) и передать этому типу тип пропсов

export const Component: FC<ComponentProps> = ({ prop1, prop2, prop3 }) => {
  ...
}

Comments

[nickerlan]

При таком подходе мне опять же нужно написать два раза одно и тоже:(
prop1, prop2, prop3

Потом добавляю новый и правлю в двух местах. Не удобно очень.

[wonderingpeanut]

nickerlan, ты же описываешь объект, какие свойства в нем должны быть и их тип. Благодаря этому тайпскрипт и позволяет "подсматривать", какие свойства есть в объекте.

А насчет писать два раза одно и то же - многие редакторы позволяют выделить все совпадения и разом их изменить. Например, в vscode ты можешь выделить часть кода, которую хочешь заменить, затем выделить все повторяющиеся участки кода с помощью ctrl+d, и разом все отредактировать

[WbICHA]

Можно так же воспользоваться типом FC (дженерик) и передать этому типу тип пропсов

Но лучше не стоит.

[WbICHA]

Потом добавляю новый и правлю в двух местах.

nickerlan, если ты это делаешь постоянно, то значит ты плохо продумал своё приложение.
А если это иногда, то в чём проблема-то? Копи-паст имени свойства и усё.

[nickerlan]

WbICHA, не понял этот тезис про "плохо продумал". Программирование само по себе продумывание. И в реализации компонента нарушается раз за разом принцип DRY. Что постоянно слегка раздражает:(

Альтернативно пробовал без деструктурирущего присваивания, но писать props каждый раз - загромождает код, а короткая переменная типа p.prop1 как то тоже криво, потому что для внешнего читателя кода это будет какая то непонятная переменная.

[WbICHA]

nickerlan,

нарушается раз за разом принцип DRY.

Ты не понял что такое драй...

[wonderingpeanut]

nickerlan, немного не улавливаю, как ты хочешь, чтобы это выглядело) Можешь показать условный пример?

[nickerlan]

wonderingpeanut, Aetae выше в ответе, помеченном как решение, дал ссылку на ветку обсуждения, где очень много вариантов предложено, почти каждый из которых мне бы подошел. Но пока похоже буксует этот вопрос.