1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【TypeScript】リテラル型とは?レビューで学んだ型安全のコツ

Posted at

はじめに

コードレビューで「TypeScriptのリテラル型を使った方が良い」と指摘を受けました。
しかしリテラル型が何かよく分からなかったので、調べてまとめてみます。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです

リテラル型とは?

TypeScriptではプリミティブ型の特定の値だけを代入可能にする型を表現できます。そのような型をリテラル型と呼びます。

つまり、リテラル型とは「その値そのものしか許さない型」のことです。
特定の値」を型として扱うことで、より安全に値を制約できるようになります。

文字列リテラル

特定の文字列しか受け付けない型。

type Direction = "north" | "south" | "east" | "west";

let direction: Direction;
direction = "north";  // ✅ OK
direction = "nort";   // ❌ エラー(typo)

数値リテラル

特定の数値しか受け付けない型。

type Numbers = 1 | 2 | 3 | 4 | 5 | 6;

let number: Numbers;
number = 3;   // ✅ OK
number = 7;   // ❌ エラー

真偽値リテラル

truefalseのみに制約。

type Flag = true | false;

let flag: Flag;
flag = true;   // ✅ OK
flag = false;  // ✅ OK

実例

現在、イベント予約システムのようなものを開発しています。
コンポーネントに対してpropsを渡し、その値によって表示を切り替える処理をしており、そのpropsの型定義にリテラル型を使うよう指摘を受けました。

修正前は以下のようにstring型で定義していました。

type EventCardProps = { type: string };

この場合、任意の文字列を受け取れてしまいます。しかし実際には受け取る文字列は限られています。
そこで以下のように修正しました。

type EventCardStatus = "mastered" | "reserved" | "attended"; 
type EventCardProps = { type: EventCardStatus; };

リテラル型を使うことで、mastered reserved attended以外の文字列は受け取れなくなり、型定義がより安全になりました。

終わりに

今回はTypeScriptのリテラル型について調べてみました。
特に「限られた値しか入らないprops」を扱う場合などに便利で、型安全性を高めるのに役立ちます。

これからはリテラル型を積極的に使って、より堅牢な型定義を心がけていきたいです。

参考

『サバイバルTypeScript』

『型安全性を高めるTypeScriptのリテラル型の活用例』Zenn

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?