javascript - problem med union og skjæringstype i react props

type LinkProps =  {
    children: any:
    ....(some more common props)

};
type LinkWithToProps = LinkProps & {
    to: string | { pathname: string };
};
type LinkWithOnclickProps = LinkProps & {
    onClick: (params: any) => void;
};
type propsType = LinkWithOnclickProps | LinkWithToProps
const InternalLink = (props: propsType) => {
    const {to, onClick, children} = props;
}

Jeg prøver å bruke union- og snittkonseptet her for props i en React-komponent. Det jeg ønsker å gjøre er at komponenten min enten kan ha en "to"-prop eller en "onClick"-prop, men hvis begge ikke er tilstede, bør TypeScript klage.

Så vidt jeg forstår kombinerer jeg mine linkProps med både LinkWithToProps og LinkWithOnclickProps og deretter bruker jeg | slik at bare én av dem brukes om gangen.

men TypeScript klager på at Property 'to' does not exist on type 'propsType'. og det samme for onlCick også. Jeg er ikke sikker på hva jeg gjør galt her

Svar #1

Slik fungerer TS-unioner.

Jeg tror det bare finnes én typesikker løsning. Du bør legge til en nødvendig egenskap på begge typene. Her har du et eksempel:

import React from 'react';

type LinkProps = {
    children: any;

};
type LinkWithToProps = LinkProps & {
    to: string | { pathname: string };
} & { type: 'with' }

type LinkWithOnclickProps = LinkProps & {
    onClick: (params: any) => void;
} & { type: 'without' };

type Props = LinkWithOnclickProps | LinkWithToProps

const InternalLink: React.VFC<Props> = (props: Props) => {
    if (props.type === 'with') {
        const p = props; // LinkWithToProps
    }

    if (props.type === 'without') {
        const p = props; // LinkWithOnclickProps
    }
    return null
}

Du kan også bruke typeguards.

Her kan du finne flere eksempler

I ditt tilfelle: const {to, onClick, children}=props; TS klarer ikke å finne ut hvilken egenskap som eksisterer og hvilken som ikke gjør det. I dette spesifikke tilfellet er TS kun 100% sikker på children-egenskapen.

Du bør hjelpe TS med tilstanden

Relaterte artikler