React LinkPropsの意味

Question

質問

LinkPropsはpropsの型だと思うのですがOmit<RouterLinkProps, 'to'>を指定する意味がわかりません。教えてください。お願いします。

import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
import { LinkProps } from '@mui/material/Link';

const LinkBehavior = React.forwardRef<
  HTMLAnchorElement,
  Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
>((props, ref) => {
  const { href, ...other } = props;
  // Map href (MUI) -> to (react-router)
  return <RouterLink ref={ref} to={href} {...other} />;
});

参考サイト：https://mui.com/material-ui/guides/routing/

Answer 1

Omit<RouterLinkProps, 'to'>を指定する意味がわかりません。

toは別途to={href}と書き込んでいるので、toをpropに入れるとその挙動を阻害することになってしまいます。ということで、型としても外しています。

Comments

[tiikk]

回答ありがとうございます。
LinkPropsを検索してもなかなか参考になるサイトが出てこないのですが、
どこを見てこのようなことを学びましたか？
import { LinkProps } from '@mui/material/Link';とreact-router-domで2回LinkPropsで同じ名前が使われていますがなぜこのようなことをしていますか？

[maisumakun]

> import { LinkProps } from '@mui/material/Link';とreact-router-domで2回LinkPropsで同じ名前が使われていますがなぜこのようなことをしていますか？

両者の型がたまたま同じ名前だっただけです。

[maisumakun]

> LinkPropsを検索してもなかなか参考になるサイトが出てこないのですが

「コンポーネントとそのpropsに振る型」ぐらいの、もっと大きな枠組みで考えましょう。その1パターンにすぎないLinkPropsについて掘り下げたものが少ないのは必然です。

[tiikk]

返信ありがとうございます。
LinkPropsはどこかの公式ドキュメントに説明がありますでしょうか？

[maisumakun]

型そのものの定義は確認してみましたか？

よほど複雑な型でない限り、型の内容は定義を確認すれば明らかです。

[tiikk]

型の定義は確認していません。
どこから型の定義を確認することができますでしょうか？

[maisumakun]

エディタは何を使っていますか？

VSCodeなど、右クリックでのメニューから定義をたどれるような環境もあります。

[tiikk]

VScode を使っています。
そのような方法で確認するのですね。ありがとうございます。やってみます。

[tiikk]

LinkPropsは調べても何も出てきません。僕は他の人のコードが使っていたので知りました。どんな風にこのような型を見つけているのでしょうか？

[maisumakun]

> LinkPropsは調べても何も出てきません。

型定義すら見つからないのでしょうか。

> どんな風にこのような型を見つけているのでしょうか？

RouterLinkのpropsの型として指定されていませんか？

[tiikk]

Vscodeでの確認はできました。
僕は他人のコード見てこんなものがあるのかと見つけたのですが、サイトなどで調べると何も出てこないので皆さんはどう見つけているのか気になりました。