Typescriptの型定義用Propsの変数名を他と重複しないようにするにはどうすれば良いでしょうか？

Question

Next.js、Typescriptを学習中の身になります。
型定義用のPropsデータをtypesディレクトリで一括管理しています。
その際、コンポーネントに用いている変数名と型定義で用いている関数が意味的に重複してしまうことがあります。
このような場合、どのように変数の名称を設計して重複を避けていますでしょうか？

実現したいこと

Propsで扱う変数とコンポーネントで扱う変数の重複を避けたい

現状

以下、例になります。記事用のコンポーネントで扱うPost.tsxに記事データを扱うPropsを渡しています。
この時、記事データのPropsの型定義変数をPostとして扱いたいのですが、Postコンポーネントはここで定義されているので利用できません。

型定義ファイル

src/types/post.tsx
export type Post = {
title: string;
content: string;
}

コンポーネントファイル

src/components/Post.tsx

import {Post} from "@/types/post";
type Props = {
post: Post;
}

export const Post = ({post}: Props) => {
<div>
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
}

問題点

変数名が重複定義されてしまっている（Post）

既存のアイデア

解決策①

Post.tsxをArticle.tsxなどとして、変数重複を避ける。
→Postコンポーネントとして扱えた方が意味的に管理しやすく、できればPostを使いたい。

解決策②

型定義で用いる変数をPostPropsのように末尾を統一して、重複を避ける。
→冗長な気がしていて、他に良い方法があるのではないかと思っています。

何度かこのような状況に出くわしてまして、良い感じの命名方法がないか悩んでいます。
良かったら実務でどのように変数管理しているかや、この場合のアイデアをご教授いただけると幸いです。
そもそもコンポーネントの設計がおかしいといったご指摘も歓迎です。

わかりづらい箇所がありましたら、お手数ですがコメントにて知らせてくださいませ。

Comments

[hoshi-takanori]

すでに解決してるのでこちらに書きますが、まず PostProps という名前は Post というコンポーネントの props 全体を表すために使うのが一般的だと思います。つまり、function Post(props: PostProps) または function Post({ title, content }: PostProps) みたいな感じになるはず。ご質問の Post という型は、Post コンポーネントの引数であるという以上に、Post という (表示とはある程度独立した) データとして重要な意味を持つ型だと思います。
で、この先は個人的な意見ですが、自分はなるべくデータそのものに Post というシンプルな名前を付けたいですね。そして、それを表示するものは (自分の専門であるモバイルアプリでは) PostView のような名前にします。React の流儀は詳しくありませんが、例えば複数の Post を一覧表示する画面と一つの Post を表示する画面があるなら、それぞれ PostList と PostDetail にするとか…。

[mrgishi]

ご指摘ありがとうございます！！
>自分はなるべくデータそのものに Post というシンプルな名前を付けたいですね。
私もこの考えになります。
質問は簡略化していますが、PostHeader、PostBody、PostFooterのようにパーツを分解した子コンポーネントも用意していて、Postコンポーネントを親として機能している状態です。
また、表示用にはpost/[id].tsxのようなファイルが存在していて、ここでPostコンポーネントを読み込みつつ、全体をPostPageと定義しています。（実質ヘッダー等も含む）

結論、PostViewのように定義する方法も記事要素として、PostHeader...等の親としてのルールづけはしやすそうで検討すべきだなと感じました。
いただいた内容のどれも現状よりは良い感じに整理できそうなので悩みどころではありますが、学習中なのでどれも一度試してみて肌に合うものを探してみようと思います。

[hoshi-takanori]

あと、たぶんご存知だとは思いますが、よくある TypeScript の落とし穴として、
export const Post = ({ post: Post }) => {
だと、分割代入された post の値を Post という名前で受け取ることになります。
(JavaScript がそういう構文を採用したので、TypeScript としてはどうしようもないというか…。)

post の型を Post として宣言するには、面倒ですが
export const Post = ({ post }: { post: Post }) => {
と書く必要があります。

[mrgishi]

まさに頻繁に躓いている箇所になります。
現状、代入する変数をまとめるProps変数を用意して対処しており、その形でサンプルコード修正しておきました。
>export const Post = ({ post }: { post: Post }) => {
この形式でいけると知らなかったです。
追記いただき誠にありがとうございます！

Answer 1

単純に、import時に名前を変えれば回避はできます。

import {Post as PostType} from "@/types/post";
export const Post = ({post: PostType}) => {
<div>
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
}

---

もっとも、型とコンポーネントのどちらか片方がローカルなものならこれで構わないのですが、両方を広い範囲で使うとなると、両方使いたい場所で都度どちらかの名前を変える必要が出て煩雑となります。

「何かしら違う名前を付ける」、あるいは「型の方をTypes.Postのように名前空間に入れる」など、別の名前にするべきだと考えます。

Comments

[maisumakun]

> そもそもコンポーネントの設計がおかしいといったご指摘も歓迎です。

「ものとしては異なるけれど同じ名前空間を共有するもの」に同じ名前を振ってしまう、という構造は確実に良くないです。

[mrgishi]

ご回答ありがとうございます！！
複数状況に応じた回答をしてくださり、とても感謝です。

1.
>単純に、import時に名前を変えれば回避はできます。
なるほどです。いただいたサンプルで今回質問させていただいた重複の回避は完全に問題なさそうです。
一旦こちらで解決しました！

2.
>「ものとしては異なるけれど同じ名前空間を共有するもの」に同じ名前を振ってしまう、という構造は確実に良くない
>型の方をTypes.Postのように名前空間に入れる
構造的なご指摘もいだたきありがとうございます！
この方法が全体として重複を避ける際にすごい便利そうだなと感じました！
一区切りついたら、全体をTyoesにまとめて管理してみます。

完全に解決していただきました！！