質問編集履歴
3
タグ修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
2
タイトル修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
＿＿＿＿＿＿＿＿＿＿
|
body
CHANGED
|
File without changes
|
1
テキスト修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,158 +1,1 @@
|
|
|
1
|
-
|
|
2
|
-
あるチェーン系店舗の業務システム開発をやってまして、ReactでSPA開発してます。言語はTypeScript です。
|
|
3
|
-
|
|
4
|
-
型定義ファイルについて質問させてください。
|
|
5
|
-
|
|
6
|
-
サーバーサイドに用意されているGET系APIに3種類あります。
|
|
7
|
-
|
|
8
|
-
支店一覧取得： GET /branches
|
|
9
|
-
支店別売上取得： GET /branches/__:branch_id__/sales_amounts
|
|
10
|
-
支店別従業員取得： GET /branches/__:branch_id__/staffs
|
|
11
|
-
|
|
12
|
-
かえってくるJSONはこんな感じです。(本当はもっとデータ数多いです）
|
|
13
|
-
|
|
14
|
-
GET /branches:
|
|
15
|
-
```json
|
|
16
|
-
{
|
|
17
|
-
"branches": [
|
|
18
|
-
{ "id": 101, "name": "札幌大通り店", "address": "北海道札幌市○○区××", "tel": "011-xxx-xxxx" },
|
|
19
|
-
{ "id": 203, "name": "仙台駅前店", "address": "宮城県仙台市○○区××", "tel": "022-xxx-xxxx" }
|
|
20
|
-
]
|
|
21
|
-
}
|
|
22
|
-
```
|
|
23
|
-
GET /branches/:branch_id/sales_amounts:
|
|
24
|
-
```json
|
|
25
|
-
{
|
|
26
|
-
"sales_amounts": [
|
|
27
|
-
{ "month": "2019-10", "sales": 4505432, "numOfCustomers": 795 },
|
|
28
|
-
{ "month": "2019-11", "sales": 6211230, "numOfCustomers": 980 },
|
|
29
|
-
{ "month": "2019-12", "sales": 5341990, "numOfCustomers": 871 }
|
|
30
|
-
]
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
GET /branches/:branch_id/staffs
|
|
34
|
-
|
|
35
|
-
```json
|
|
36
|
-
{
|
|
37
|
-
"staffs": [
|
|
38
|
-
{ "id": "UFK005", "name": "鈴木 太郎", "gender": "M", "birthYear": 1977, "isManager": true },
|
|
39
|
-
{ "id": "UFX018", "name": "北村 優子", "gender": "F", "birthYear": 1990 },
|
|
40
|
-
{ "id": "UFT044", "name": "田中 浩二", "gender": "M", "birthYear": 1983 }
|
|
41
|
-
]
|
|
42
|
-
}
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
これらのJSONをフロントエンドでうけとって処理するため、各配列要素の型定義を書く場所として、ソースコードのディレクトリ`src/`に
|
|
46
|
-
`models/`
|
|
47
|
-
というサブディクレクトリを掘って、ここに、3つのファイルを作りました。各ファイルには型と、その型の初期値になるオブジェクトが入ってます。
|
|
48
|
-
|
|
49
|
-
**1.src/models/branch.ts**
|
|
50
|
-
```typescript
|
|
51
|
-
export type Branch = {
|
|
52
|
-
id: number;
|
|
53
|
-
name: string;
|
|
54
|
-
address: string;
|
|
55
|
-
tel: string;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export const defaultBranch: Branch = {
|
|
59
|
-
id: 0,
|
|
60
|
-
name: "",
|
|
61
|
-
address: "",
|
|
62
|
-
tel: ""
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
**2.src/models/sales_amount.ts**
|
|
68
|
-
```typescript
|
|
69
|
-
export type SalesAmount = {
|
|
70
|
-
month: string | null;
|
|
71
|
-
sales: number;
|
|
72
|
-
numOfCustomers: number;
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
export const defaultSalesAmount: SalesAmount = {
|
|
76
|
-
month: null
|
|
77
|
-
sales: 0;
|
|
78
|
-
numOfCustomers: 0;
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
**3.src/models/staff.ts**
|
|
84
|
-
|
|
85
|
-
```typescript
|
|
86
|
-
|
|
87
|
-
export type Staff = {
|
|
88
|
-
id: string | null;
|
|
89
|
-
name: string;
|
|
90
|
-
gender: string | null;
|
|
91
|
-
birthYear: number;
|
|
92
|
-
isManager?: boolean;
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
export const defaultStaff: Staff = {
|
|
96
|
-
id: null
|
|
97
|
-
name: "";
|
|
98
|
-
gender: null,
|
|
99
|
-
birthYear: 0,
|
|
100
|
-
isManager: false
|
|
101
|
-
};
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
これらのファイルを入れるのに、 `models/` というディレトリ名が適しているのかは分かりませんし、この質問の本題もそこではないです。（ models/ というディレクトリ名にしたのは、現在バックエンドの開発をしているメンバーの一人が以前フロントエンドもやっていて、その人が models/ という名前にしたようです）
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
質問はここからになります。
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
現状、上記でとりあえずシステム的には問題なく動いているのですが、`models/` にある型定義をリファクタリングしようとしており、実装方法として以下をやっていくことを考えています。
|
|
111
|
-
|
|
112
|
-
① ディレクトリ `src/models` を `src/@types` と名前を変える。
|
|
113
|
-
|
|
114
|
-
② 各ファイルの拡張子を、 `.ts` から 型定義ファイルの `.d.ts` にする。
|
|
115
|
-
|
|
116
|
-
③ 各型の定義を `declare type` にする。
|
|
117
|
-
|
|
118
|
-
（例）**src/@types/branch.d.ts**
|
|
119
|
-
|
|
120
|
-
```typescript
|
|
121
|
-
declare type Branch = {
|
|
122
|
-
id: number;
|
|
123
|
-
name: string;
|
|
124
|
-
address: string;
|
|
125
|
-
tel: string;
|
|
126
|
-
};
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
このようにしておいて、 TypeScriptの設定ファイルの `typeRoots` に `src/@types`を追加すれば、型Branchを使うときに、import する必要がなくなるというメリットがあると思いました。
|
|
130
|
-
|
|
131
|
-
このリファクタをやろうとしている前提で、質問は2つあります。
|
|
132
|
-
|
|
133
|
-
【質問1】
|
|
134
|
-
このように、 `branch.ts` を`branch.d.ts` にして、 `declare` を追加することにしたときに、同じファイル `branch.d.ts` の中に、初期値オブジェクト `defaultBranch` も書いて、これをexportして使うことはできますか？ つまり、こんな感じ
|
|
135
|
-
|
|
136
|
-
**src/@types/branch.d.ts**
|
|
137
|
-
```typescript
|
|
138
|
-
declare type Branch = {
|
|
139
|
-
id: number;
|
|
140
|
-
name: string;
|
|
141
|
-
address: string;
|
|
142
|
-
tel: string;
|
|
143
|
-
};
|
|
144
|
-
|
|
145
|
-
export const defaultBranch: Branch = {
|
|
146
|
-
id: 0,
|
|
147
|
-
name: "",
|
|
148
|
-
address: "",
|
|
149
|
-
tel: ""
|
|
150
|
-
};
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
をイメージしてますが、これは`.d.ts`ファイルとして適切な書き方になってますでしょうか？
|
|
154
|
-
|
|
155
|
-
【質問2】
|
|
156
|
-
この例でいう `models/` に入っている業務モデル（ドメイン指向でいうエンティティ？詳しくは分かりませんが。）の型を、`@types/` という、Definitely Typed にちなんだ名前のディレクトリに入れて、 `declare` を追加するというリファクタリングは筋のよいやり方でしょうか？ もし何らかの記事で、ベストプラクティスとして推薦されているのでしたらその記事をご教示いただけるとうれしいです。または、もし何か明らかな理由で、筋が悪いのであれば、その理由を教えてください。
|
|
157
|
-
|
|
158
|
-
よろしくお願いいたします。
|
|
1
|
+
|