typescriptのtypeの値制限方法について

Question

こんばんは。

typescriptのコードを書いていて、書き方がわからなかったので、教えていただきたいです。

export const FONT_SIZE = {
  s: 12,
  b: 14,
  m: 16,
  l: 20,
  xl: 24
}

import {FONT_SIZE} from '../../'

type Props = {
  size?: 's' | 'b' | 'm' | 'l' | 'xl',
}

ここでFONT_SIZEからtype Propsのsizeのプロパティを制限したいです。
今は直打ちを書いているのですが、これをimportしたFONT_SIZEのkeyで制限したいです。

うまくできなかったのですが、書き方で解決策はありますでしょうか？

Answer 1

こんにちは
以下のようにしてみると、いかがでしょうか？

フォントのサイズに関する型や、具体的なサイズの情報を集めたファイル名を仮に fontSize.ts とします。これに以下のように、TFontSize 型を定義します。(※先頭のTは私が個人的な慣習として型名につける接頭辞ですので、型名は適宜変えて下さい）

export const FONT_SIZE = {
  s: 12,
  b: 14,
  m: 16,
  l: 20,
  xl: 24
} as const;

export type TFontSize = keyof typeof FONT_SIZE;

export const DEFAULT_SIZE = FONT_SIZE.m;

上記のようにすると、 TFontSize は、実質的に "s" | "b" | "m" | "l" | "xl" として機能するので、たとえば、以下のようなコンポーネントText

import React from 'react';
import styled from 'styled-components';
import { TFontSize, FONT_SIZE, DEFAULT_SIZE } from "./fontSize";

type TProps = {
  size?: TFontSize;
}

const Text = styled.span`
  font-size: ${(props: TProps) => props.size ? FONT_SIZE[props.size] : DEFAULT_SIZE}px;
`;

export default Text;

を作ったとして、これを利用するときに

<Text size="m">Hello World</Text>

とは書けますが、

<Text size="medium">Hello World</Text>

は、FONT_SIZE のキーに "medium"が無いのでエラーになります。

以上、参考になれば幸いです。

Comments

[ayu]

回答ありがとうございます！

自分がやりたかったことは、まさしくこれです！

`as const`で値を固定化できたんですね:memo:

`keyof typefof`も初めて知りました。

typescriptまだまだいろんな技があると思うのですが、学習していきたいと思います。

ありがとうございました！

[jun68ykt]

どういたしまして。
> 自分がやりたかったことは、まさしくこれです！
とのことで、よかったです????

Answer 2

FONT_SIZEのkeyで制限したいです。

keyで値を取得というのであれば、こんな感じです。

const FONT_SIZE = {
  s: 12,
  b: 14,
  m: 16,
  l: 20,
  xl: 24
}

let size = "m"; // 変更するキー
let fontsize = FONT_SIZE[size.toLowerCase()];

console.log( fontsize );

Comments

[ayu]

ありがとうございます！

自分の質問の書き方が悪かったのですが、試したかったのは、型で判定したいということでした:bow: