reactjs - Vad är rätt gränssnitt för NavLink isActive?

Jag skapade en "dum" komponent med NavLink och jag håller på att skapa interface för dess props, men när jag lägger till isActive i mitt interface för att skicka props så klagar den.

Jag skulle vilja veta vilket som är det korrekta interface att lägga till på isActive, med tanke på att denna komponent är "dum" och kommer att återanvändas, så att dess föräldrar kommer att skicka en funktion till isActive.

NAVLINK-KOMPONENTGRÄNSSNITT:

interface ITextLinkProps {
    to: string;
    exact: boolean;
    children: React.ReactChild | React.ReactChild[];
    style?: CSSProperties;
    activeStyle?: React.CSSProperties;
    'aria-current': boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';
    isActive?: (match: any, location: any) => {};
    onMouseOver?: MouseEventHandler<HTMLAnchorElement>;
    onMouseLeave?: MouseEventHandler<HTMLAnchorElement>;
}

FEL:

Type '{ children: ReactChild | ReactChild[]; to: string; exact: boolean; style?: CSSProperties | undefined; activeStyle?: CSSProperties | undefined; 'aria-current': boolean | ... 6 more ... | "date"; isActive?: ((match: any, location: any) => {}) | undefined; onMouseOver?: MouseEventHandler<...> | undefined; onMouseLeave?...' is not assignable to type 'NavLinkProps<unknown>'.
  Types of property 'isActive' are incompatible.
    Type '((match: any, location: any) => {}) | undefined' is not assignable to type '(<Params extends { [K in keyof Params]?: string | undefined; }>(match: match<Params> | null, location: Location<unknown>) => boolean) | undefined'.
      Type '(match: any, location: any) => {}' is not assignable to type '<Params extends { [K in keyof Params]?: string | undefined; }>(match: match<Params> | null, location: Location<unknown>) => boolean'.
        Type '{}' is not assignable to type 'boolean'.  TS2322

Jag försökte redan lägga till den egna interface för denna egenskap, som är:

isActive?<Params extends { [K in keyof Params]?: string }>(match: match<Params> | null, location: H.Location<S>): boolean;

Men typescript börjar anklaga importfel:

match' refers to a value, but is being used as a type here. Did you mean 'typeof match'?  TS2749

     9 |    'aria-current': boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';
    10 |    isActive?<Params extends { [K in keyof Params]?: string }>(
  > 11 |        match: match<Params> | null,
       |               ^
    12 |        location: H.Location<S>
    13 |    ): boolean;
    14 |    onMouseOver?: MouseEventHandler<HTMLAnchorElement>;

Svar #1

Den korrekta typen är NavLinkProps.

import { NavLink, NavLinkProps } from 'react-router-dom';

const CustomNavLink = (props: NavLinkProps) => <NavLink {...props} />

Om du vill utöka standardgränssnittet kan du göra något som

import { NavLink, NavLinkProps } from 'react-router-dom';

interface ITextLinkProps extends NavLinkProps {
  customProp: string;
}

const CustomNavLink = (props: ITextLinkProps) => <NavLink {...props} />

Se till att din isActive-prop returnerar ett booleskt värde:

isActive={() => {
  return true;
}} 

Svar #2

Det ser ut som att din returtyp är felaktig. Du vill ha (match: any, location: any) => boolean.
Du kan se det i sista raden av felet:

        Type '{}' is not assignable to type 'boolean'.  TS2322

Du kan också försöka använda rekvisitan direkt: NavLinkProps<unknown>["isActive"].