Мне кажется наоборот, doDelete из ContainerProps хочет ContainerItem, у которого явно есть поле foo. Логично.
С другой стороны этого поля нет на DeletableItem. И именно DeletableItem передается в коллбек из DeleteItemButton.

Мне видится вообще какое-то противоречие, почему метод onDelete в принципе существует в двух разных экземплярах. doDelete: (item: ContainerItem) => void; и onDelete: (item: DeletableItem) => void;.

Возможно ему нужен дополнительно isDeleteRestricted, который проставляется в Container

через общий тип это вполне можно выразить и не плодить

Я там ничего не решаю)

Ну и это вопрос уже не к типам

это просто вырожденный пример, где я пытался воспроизвести )
поэтому выглядит ненмого упорото

вобще идея была в том что кнопке DeleteItemButton не надо знать о каких либо других свойствах кроме необходимых ей, соотвественно не хотелось использовать один и тот же тип, или наследовать т.к. в теории может прилетать не только containerItem но и любой другой объект соотвествующий DeletableItem

я пока воткнул any
onDelete: (item: any) => void;
вместо
onDelete: (item: DeletableItem) => void;

но хотелось бы понять как это можно сделать красивее, не завязываясь на конкретный тип

Через дженерик

+

когда позанимаешься недолго переводами технических терминов, то начинает уже подёргивать от кальки 🙈

спасибо, а зачем с запятой? <T,> особенности типов в jsx?

опечатка

не без нее не работает

😳

о, тогда расскажите

Плюс я бы убрал конструкцию [index: string]: any; и таки наследовал любые типы айтемов от DeletableItem. Сейчас это работает из-за duck typing, это не очень хорошо, мне кажется

Это тайпскрипт кривой просто 😂

та это просто jsx дизайнили вдохновлясь пхп

Ну ладно, jsx кривой)