LinkProps在从next/link迁移时缺失于next-intl/link。

huangapple go评论61阅读模式
英文:

LinkProps is missing in next-intl/link (when migrating from next/link)

问题

I used LinkProps to create custom Link wrappers and pass native props along with my custom ones. Pretty standard pattern:

import { type LinkProps } from "next/link";
import { type ImageProps } from "next/image";

export interface NavbarItemProps extends LinkProps {
  title: string;
  icon: ImageProps['src'],
}

// and then goes my component:
export function NavbarItem({ icon, title, ...props }: NavbarItemProps) {
  // ...
}

但是一旦我迁移到next-intl/link,我发现它不导出任何LinkProps
而旧的LinkProps与来自next-intl/link的新Link组件不兼容,因为它覆盖了locale选项:

type Props = Omit<ComponentProps<typeof BaseLink>, 'locale'> & {
  locale?: string;
};

PS. 我使用的版本:

next v13.4.2
next-intl v2.14.2

迄今为止我找到的唯一解决方案(以帮助其他人解决相同的问题) - 我从组件的参数中提取了这个新的/被覆盖的props类型(请参见我的下面的评论)。

如果next-intl的作者为我们导出这种类型,就像我们在next/link中所做的那样,那将是很好的,它将使这种迁移更加顺畅。

英文:

I used LinkProps to create custom Link wrappers and pass native props along with my custom ones. Pretty standard pattern:

import {type LinkProps} from &quot;next/link&quot;;
import {type ImageProps} from &quot;next/image&quot;;

export interface NavbarItemProps extends LinkProps {
  title: string;
  icon: ImageProps[&#39;src&#39;],
}

// and then goes my component:
export function NavbarItem({ icon, title, ...props }: NavbarItemProps) {
  // ...
}

but once I migrated to next-intl/link - I found out that it doesn't export any LinkProps.
And old LinkProps is incompatible with the new Link component from next-intl/link because of overridden locale option:

type Props = Omit&lt;ComponentProps&lt;typeof BaseLink&gt;, &#39;locale&#39;&gt; &amp; {
  locale?: string;
};

PS. Versions I used:

next v13.4.2
next-intl v2.14.2

The only solution I found so far (to help the others who faced the same issue) - I extracted that new/overridden props type from the component's parameters (see my comment below).

Would be nice if next-intl authors exported that type for us to import, just like we had with the next/link. It would make such migrations smoother.

答案1

得分: 2

Consider using the existing type of react for this purpose:

import Link from "next-intl/link";

// use the predefined type from react for this purpose
export type LinkProps = React.ComponentProps<typeof Link>;

// now you can extend it as usual
export interface NavbarItemProps extends LinkProps {
  title: string;
  // ...
}
英文:

Consider using the existing type of react for this purpose:

import Link from &quot;next-intl/link&quot;;

// use the predefined type from react for this purpose
export type LinkProps = React.ComponentProps&lt;typeof Link&gt;;

// now you can extend it as usual
export interface NavbarItemProps extends LinkProps {
  title: string;
  // ...
}

答案2

得分: 1

关闭缺失类型的差距 - 我只是从组件的参数中提取了它:

import Link from "next-intl/link"; // this is our new Link that doesn't export LinkProps

// extracting it from the parameters
type LinkProps = Parameters<typeof Link>[0];

// now we can extend it as usual
export interface NavbarItemProps extends LinkProps {
  title: string;
  // ...
}
英文:

to close the gap with a missing type - I just extracted it from the component's parameters:

import Link from &quot;next-intl/link&quot;; // this is our new Link that doesn&#39;t export LinkProps

// extracting it from the parameters
type LinkProps = Parameters&lt;typeof Link&gt;[0];

// now we can extend it as usual
export interface NavbarItemProps extends LinkProps {
  title: string;
  // ...
}

huangapple
  • 本文由 发表于 2023年5月22日 12:42:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76303080.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定