👩‍🦰

【TypeScript】stringとかnumberとかじゃなく特定の値の型（リテラル型）

に公開
React
TypeScript
リテラル
ユニオン
tech

リテラル型とは？

リテラル型とはプリミティブ型の特定の値だけを代入可能にする型を表現できるものです。

どういうことか？

通常stringだとかnumberのような幅の広い型で値を制限しますが、そのような型ではなく、特定の"hoge"とか"moge"のような特定の決まった値だけを許可する型を作ることができます。
（数値リテラルやbooleanリテラルなどもあります。）

実際に見てみましょう

通常は以下のような定義です。

type Test = {
  name: string
}

リテラル型はこうです。

type Test = {
  name: "Taro"
}

実際の使い方

実際よく使うのはユニオン型と併用して以下のような条件分岐する時です。

type CardProps = {
  type: "A" | "B"
}

export function Card({ type }: CardProps) {
  return (
    <article>
      {type === "A" && <p>これはAパターンです。</p>}
      {type === "B" && <p>これはBパターンです。</p>}
    </article>
  )
}

typeがAの時は「これはAパターンです。」
typeがBの時は「これはBパターンです。」
というテキストを出し分けるパターンです。
私は実務ではよく条件分岐でUIを変えたい時にリテラル型（とユニオン型）を使用します。

まとめ

リテラル型は「特定の値そのものを型として扱う」仕組みです。
限られた値だけを許可できるため、型の安全性が高まります。
また、多くの場合はユニオン型と組み合わせて使用し、条件分岐によるUIの出し分けなど、使いどころによってはとても便利なものですね！

Discussion