hozana / next-translate-routes

Flexible and translated routes for Next.js without custom server
MIT License
116 stars 30 forks source link

Typescript support for Link properties #53

Closed zto-sbenning closed 1 year ago

zto-sbenning commented 2 years ago

The following code is not valid on typescript 4.8.4:

import Link from "next-translate-routes/link";

export default function Sample() {
    return (
        <Link href="/some/url" target="_blank">Some link</Link>
    )
}

It generate the error:

Type '{ children: Element[]; href: string; target: HTMLAttributeAnchorTarget; }' is not assignable to type 'IntrinsicAttributes & InternalLinkProps & { children?: ReactNode; }'.
  Property 'target' does not exist on type 'IntrinsicAttributes & InternalLinkProps & { children?: ReactNode; }'.ts(2322)

target="_blank" causes the error.

It might be because of the declaration of next-translate-routes/link:

import { LinkProps } from 'next/link';
import React from 'react';
/**
 * Link component that handle route translations
 */
export declare const Link: React.FC<React.PropsWithChildren<LinkProps>>;
export default Link;

as LinkProps seems to only be the internal props for next/link and those does not includes React.AnchorHTMLAttributes<HTMLAnchorElement>:


export declare type LinkProps = InternalLinkProps;
/**
 * React Component that enables client-side transitions between routes.
 */
declare const Link: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & {
    children?: React.ReactNode;
} & React.RefAttributes<HTMLAnchorElement>>;
export default Link;

I might be all wrong, but I think the declaration should include

Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & {
    children?: React.ReactNode;
} & React.RefAttributes<HTMLAnchorElement>

and not only LinkProps .

cvolant commented 1 year ago

You are right for Next@13, but next-translate-routes does not support next@13 yet. With next@12, you cannot set target attribute to Link, you must give it to the <a> child. I take note not to forget to update this type when updating next-translate-routes to support next@13, but there is a lot to work on. (If you are willing to help on this...)