回答編集履歴
5
テキスト追加
answer
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
<Text size="medium">Hello World</Text>
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
は、`
|
|
51
|
+
は、`FONT_SIZE` のキーに `"medium"`が無いのでエラーになります。
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
以上、参考になれば幸いです。
|
4
テキスト追加
answer
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
m: 16,
|
|
11
11
|
l: 20,
|
|
12
12
|
xl: 24
|
|
13
|
-
};
|
|
13
|
+
} as const;
|
|
14
14
|
|
|
15
15
|
export type TFontSize = keyof typeof FONT_SIZE;
|
|
16
16
|
|
3
テキスト追加
answer
CHANGED
|
@@ -4,23 +4,21 @@
|
|
|
4
4
|
フォントのサイズに関する型や、具体的なサイズの情報を集めたファイル名を仮に `fontSize.ts` とします。これに以下のように、`TFontSize` 型を定義します。(※先頭の`T`は私が個人的な慣習として型名につける接頭辞ですので、型名は適宜変えて下さい）
|
|
5
5
|
|
|
6
6
|
```typescript
|
|
7
|
-
const FONT_SIZE_KEYS = [ "s", "b", "m", "l", "xl" ] as const;
|
|
8
|
-
|
|
9
|
-
export type TFontSize = typeof FONT_SIZE_KEYS[number];
|
|
10
|
-
|
|
11
|
-
export const FONT_SIZE
|
|
7
|
+
export const FONT_SIZE = {
|
|
12
8
|
s: 12,
|
|
13
9
|
b: 14,
|
|
14
10
|
m: 16,
|
|
15
11
|
l: 20,
|
|
16
12
|
xl: 24
|
|
17
|
-
}
|
|
13
|
+
};
|
|
18
14
|
|
|
15
|
+
export type TFontSize = keyof typeof FONT_SIZE;
|
|
16
|
+
|
|
19
17
|
export const DEFAULT_SIZE = FONT_SIZE.m;
|
|
20
18
|
|
|
21
19
|
```
|
|
22
20
|
|
|
23
|
-
上記のようにすると、 `TFontSize` は実質
|
|
21
|
+
上記のようにすると、 `TFontSize` は、実質的に `"s" | "b" | "m" | "l" | "xl"` として機能するので、たとえば、以下のようなコンポーネント`Text`
|
|
24
22
|
|
|
25
23
|
```tsx
|
|
26
24
|
import React from 'react';
|
|
@@ -53,4 +51,4 @@
|
|
|
53
51
|
は、`FONT_SIZE_KEYS` に `"medium"`が無いのでエラーになります。
|
|
54
52
|
|
|
55
53
|
|
|
56
|
-
|
|
54
|
+
以上、参考になれば幸いです。
|
2
テキスト追加
answer
CHANGED
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
xl: 24
|
|
17
17
|
} as const;
|
|
18
18
|
|
|
19
|
+
export const DEFAULT_SIZE = FONT_SIZE.m;
|
|
20
|
+
|
|
19
21
|
```
|
|
20
22
|
|
|
21
23
|
上記のようにすると、 `TFontSize` は実質、 `"s" | "b" | "m" | "l" | "xl"` として機能するので、たとえば、以下のようなコンポーネント`Text`
|
|
@@ -23,18 +25,20 @@
|
|
|
23
25
|
```tsx
|
|
24
26
|
import React from 'react';
|
|
25
27
|
import styled from 'styled-components';
|
|
26
|
-
import { TFontSize, FONT_SIZE } from "./fontSize";
|
|
28
|
+
import { TFontSize, FONT_SIZE, DEFAULT_SIZE } from "./fontSize";
|
|
27
29
|
|
|
28
|
-
const DEFAULT_SIZE = 12;
|
|
29
|
-
|
|
30
30
|
type TProps = {
|
|
31
31
|
size?: TFontSize;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
const Text = styled.span`
|
|
35
35
|
font-size: ${(props: TProps) => props.size ? FONT_SIZE[props.size] : DEFAULT_SIZE}px;
|
|
36
36
|
`;
|
|
37
37
|
|
|
38
|
+
export default Text;
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
38
42
|
```
|
|
39
43
|
を作ったとして、これを利用するときに
|
|
40
44
|
|
1
テキスト追加
answer
CHANGED
|
@@ -27,13 +27,12 @@
|
|
|
27
27
|
|
|
28
28
|
const DEFAULT_SIZE = 12;
|
|
29
29
|
|
|
30
|
-
type
|
|
30
|
+
type TProps = {
|
|
31
31
|
size?: TFontSize;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
export const Text = styled.span`
|
|
35
|
-
font-size: ${(props:
|
|
35
|
+
font-size: ${(props: TProps) => props.size ? FONT_SIZE[props.size] : DEFAULT_SIZE}px;
|
|
36
|
-
color: blue;
|
|
37
36
|
`;
|
|
38
37
|
|
|
39
38
|
```
|