Ребята, вы делали narrowing в Реакт ? IPropsA = {a: string} IPropsB

= {b: string}

const SomeComponent:React.FC<IPropsA | IPropsB> = ({a, b}) => {
render .....
}
Тайпскрипт ругает что в пропсах нет а и b

Подскажете как правильно ??

неужели я должен буду делать так
if('a' in props) {
.....
}

if('b' in props) {
.....
}

кажется, что так надо типизацию переписать как будто типа a?: string b?: string поприятнее будет, можно просто проверить if (b) или if (a) либо написать оболочку для компонента с нужными типами) ну это первое что в голову пришло

я наоборот хотел сделать построже, ? не особо люблю, стараюсь меньше юзать

ну тогда обертка вроде бы должна помочь

Чуть подправлю запись для обьяснения: type IProps = IPropsA | IPropsB здесь `Props` так называемое не дескриминируемое множество. То есть такое, где тайпскрипт не может отличить `IPropsA` от `IPropsB` Вам нужно либо везде писать IF либо сделать множество дескриминируемым. Делается это добавлением некого поля-дескриминатора: type IPropsA { type: "PropsA" a: string }; type IPropsB { type: "PropsB" b: string }; type Props = IPropsA | IPropsB // теперь нужно только подсказать тс какой обьект где: const SomeComponent:React.FC<IPropsA | IPropsB> = (props) => { if(props.type === "PropsA") { console.log(props.a) // a больше не undefined, т.к ТС уже знает что это IPropsA } }

да ты прав по идее так и должно быть видимо мне тогда придется в рендерах писать типа вот так {props.type==='PropsA' && <some div>} но вот почему то обычная такая проверка не совсем работает работает вот такая проверка лучше {'a' in props && <some div>}

type A = { a: string; }; type B = { b: string; }; type C = A & B; const x: C = { a: 'sadas', b: 'asdsad', };

Не обязательно так. Зависит от юзкейса. Если ты создаешь единый интерфейс к множеству компонентов, то можно делать как то так, на примере кнопок: // outline-button type OutlineButtonProps = { variant: "outline"; a: string } const OutlineButton:FC<OutlineButtonProps> = ... // solid-button type SolidButtonProps = { variant: "solid" b: string } const SolidButton: FC<SolidButtonProps> = .... // button type ButtonProps = SolidButtonProps | OutlineButtonProps const components: Record<ButtonProps["variant"], ReactElement<ButtonProps>> = { "solid": SolidButton, "outline": OutlineButton, } const Button: FC<ButtonProps> = (props) { const Component = components[props.variant] ?? throw new Error("..."); return <Component {...props} /> } P.S писал по памяти, так что не уверен что правильно выбрал\проаннотировал интерфейсы, но общая идея должна быть понятна.

type TProps , раз уж про венгерскую нотацию речь зашла ) interface IProps...

Да я там в целом зафакапил почти весь текст. Хотел по быстрому продемонтрировать концепт при этом пользуясь словарем спрашивающего, растерялся. :(