javascript - Kako dekonstruirati objekt u Typescriptu kada su svojstva opcionalna?

Imam generičku komponentu koja ima neka opcionalna svojstva, trebam destrukturirati propertije, ali dobivam pogreške

    interface IScenarioPageProps extends IScenarioStateWithDispatch {
    isOverlayVisible?: boolean;
    renderOverlayContent?: () => void;
}

const Page = (props: IStepStateWithDispatch | IScenarioPageProps | ITaskStateWithDispatch) => {
    const { taskState, stepState, isOverlayVisible, renderOverlayContent } = props;
    const { selectedTaskId, selectedTask } = taskState;
    const { selectedStepId, selectedStep } = stepState;

    const style = StyleSheet.create({
        content: {
            'background-color': getTheme().palette.white,
            height: '100vh'
        }
    });

    return (
        <div className={css(style.content)}>
            {isOverlayVisible && <Modal>{renderOverlayContent()}</Modal>}
        </div>
    );
};

export default Page;

Kako mogu destrukturirati te opcionalne svojstva bez dobivanja TypeScript pogreške?

Odgovor #1

Budući da Page komponenta koristi renderOverlayContent prop bez obzira na sve, a prop nije predstavljen u tipu IStepStateWithDispatch ili ITaskStateWithDispatch (to je razlog pogreške), mogu pretpostaviti da želite da Page komponenta zahtijeva sve propove iz sučelja IStepStateWithDispatch, IScenarioPageProps i ITaskStateWithDispatch.

Ako je moje pretpostavka točna, tada trebate zamijeniti | s & u deklaraciji tipa props. To će TypeScriptu reći da objekt props ima svojstva iz svih sučelja.

const Page = (props: IStepStateWithDispatch & IScenarioPageProps & ITaskStateWithDispatch) => {
    // ...
}

Ako moja pretpostavka nije točna (komponenta je polimorfna), tada trebate provjeriti je li renderOverlayContent prop dan i zatim ga koristiti:

// ...

// const {renderOverlayContent} = props; // Remove this

return (
    <div className={css(style.content)}>
        {isOverlayVisible &&
            <Modal>
                {'renderOverlayContent' in props && props.renderOverlayContent && props.renderOverlayContent()}
            </Modal>
        }
    </div>
);