[Typescript] Rest (spread) parameter in destructured object with Typescript interface

[Typescript] Rest (spread) parameter in destructured object with Typescript interface

The solution I found was to add a TypeScript Index Signature to the interface.

An index signature is used when you don't know property names ahead of time but do know property key and value types, it's defined as [key: KeyType]: ValueType

Example: See the INavLink interface

'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';

export { NavLink };

function NavLink({ children, href, exact, ...props }: INavLink) {
    const pathname = usePathname();
    const isActive = exact ? pathname === href : pathname.startsWith(href);

    if (isActive) {
        props.className += ' active';
    }

    return <Link href={href} {...props}>{children}</Link>;
}

interface INavLink {
    children: React.ReactNode,
    href: string,
    exact?: boolean,
    [key: string]: any
}