質問編集履歴
5
エラー修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -25,7 +25,11 @@
|
|
|
25
25
|
src/components/Post.tsx
|
|
26
26
|
|
|
27
27
|
import {Post} from "@/types/post";
|
|
28
|
+
type Props = {
|
|
29
|
+
post: Post;
|
|
30
|
+
}
|
|
31
|
+
|
|
28
|
-
export const Post = ({post: Pos
|
|
32
|
+
export const Post = ({post}: Props) => {
|
|
29
33
|
<div>
|
|
30
34
|
<h2>{post.title}</h2>
|
|
31
35
|
<p>{post.content}</p>
|
4
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
型定義ファイル
|
|
15
15
|
```Typescript
|
|
16
16
|
src/types/post.tsx
|
|
17
|
-
type Post = {
|
|
17
|
+
export type Post = {
|
|
18
18
|
title: string;
|
|
19
19
|
content: string;
|
|
20
20
|
}
|
3
補足
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
### 現状
|
|
10
10
|
|
|
11
11
|
以下、例になります。記事用のコンポーネントで扱うPost.tsxに記事データを扱うPropsを渡しています。
|
|
12
|
-
この時、記事データのPropsをPostとして扱いたいのですが、Postコンポーネントはここで定義されているので利用できません。
|
|
12
|
+
この時、記事データのPropsの型定義変数をPostとして扱いたいのですが、Postコンポーネントはここで定義されているので利用できません。
|
|
13
13
|
|
|
14
14
|
型定義ファイル
|
|
15
15
|
```Typescript
|
2
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -32,6 +32,8 @@
|
|
|
32
32
|
</div>
|
|
33
33
|
}
|
|
34
34
|
```
|
|
35
|
+
#### 問題点
|
|
36
|
+
変数名が重複定義されてしまっている（Post）
|
|
35
37
|
|
|
36
38
|
### 既存のアイデア
|
|
37
39
|
|
1
誤字修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
Next.js、Typescriptを学習中の身になります。
|
|
2
2
|
型定義用のPropsデータをtypesディレクトリで一括管理しています。
|
|
3
3
|
その際、コンポーネントに用いている変数名と型定義で用いている関数が意味的に重複してしまうことがあります。
|
|
4
|
-
このような場合、どのように変数の名称を設計
|
|
4
|
+
このような場合、どのように変数の名称を設計して重複を避けていますでしょうか？
|
|
5
5
|
|
|
6
6
|
### 実現したいこと
|
|
7
7
|
Propsで扱う変数とコンポーネントで扱う変数の重複を避けたい
|