Как в TypeScript, добавлять свойство по условию?

Question

[Вика Мармеладка]

Нужно добавить интерфейсу:

export interface ModalProps extends CuiModalProps {
    children: ReactElement | ReactElement[]
    setterClosePopup: Dispatch<SetStateAction<boolean>>
    namePopup?: string
    isOpen?: boolean
    withBorder?: boolean
    view?: 'labeled'
    className?: string
}

свойство label со значение string при условии, если свойство view имеет значение 'labeled', иначе label должен получить значение never

Answer 1

[Aetae]

Нужно больше чёткости. Какой ещё бывает view кроме labled?
Через интерфейсы это сделать нельзя - можно через union типов, но обязательно должно быть поле-дискриминатор, различное для каждого случая.

Если такого поля нет - конкретный тип сделать нельзя, однако судя по приставке Props, можно предположить, что это какие-то props какого-то React компонента, тогда этого можно добиться с помощью перегрузки:

export interface ModalProps extends CuiModalProps {
    children: ReactElement | ReactElement[]
    setterClosePopup: Dispatch<SetStateAction<boolean>>
    namePopup?: string
    isOpen?: boolean
    withBorder?: boolean
    className?: string
}
export interface ModalPropsLabled extends ModalProps {
    view: 'labeled'
    label: string
}

export const Component: ((pros: ModalProps) => ReactNode) & ((pros: ModalPropsLabled) => ReactNode) = (pros: ModalProps | ModalPropsLabled) => { ... }

Comments

[Вика Мармеладка]

Помимо labled, может быть undefined, так как оно не обязательно

[Aetae]

Вика Мармеладка,

type Desc = {
  view: 'labeled'
  label: string
} | {
  view?: undefined
}

export interface ModalProps extends CuiModalProps {
    namePopup?: string
    isOpen?: boolean
    withBorder?: boolean
    className?: string
}

export const Component = (pros: ModalProps & Desc) => { ... };