ProgrammingTypeScript開発者

TypeScriptにおけるリテラルタイプとは何ですか?それはどのように使用されますか?リテラルタイプを使用することで変数の値に厳格な制限を実装する方法と、使用時の罠について教えてください。

Hintsage AIアシスタントで面接を突破

回答

リテラルタイプは、変数の可能な値を一般的な型(例えば、単に数値ではなく、数値5や文字列「yes」などの特定の厳密な定数)に制限することを可能にします。

これは、固定されたパラメータ、ステータスなどを持つAPIを作成するのに役立ちます。

type Direction = 'left' | 'right' | 'up' | 'down'; function move(dir: Direction) { // ... } move('left'); // OK move('top'); // コンパイルエラー!

数値、boolean、さらには全体の構造(タプルリテラルタイプ)でも機能します:

type WeekDay = 1 | 2 | 3 | 4 | 5 | 6 | 7; const day: WeekDay = 6; // OK

制限とニュアンス:

  • リテラル型には暗黙的に値を変換することはできません(たとえば、ユーザー入力からの文字列を確認なしに'left' | 'right'型の変数に割り当てることはできません)。
  • 定数とlet変数を使用する際は、出力の型について注意することが重要です:
const d = 'left'; // 型は'left'(リテラル) let e = 'left'; // 型はstring(通常)

ひっかけ問題

質問: const x = "yes"; と定義した変数はどの型になりますか?そして、それに別の文字列値を代入できますか?

回答:

  • const x = "yes"; と宣言すると、xは「yes」という型になります(リテラルタイプ)ので、他の値を「yes」以外に代入することはできません(constなので変更もできません)。
  • let x = "yes"; と宣言すると、xはstringとして型付けされ、任意の文字列を代入することができます。
const x = 'yes'; // x: 'yes' let y = 'yes'; // y: string

リテラルタイプに関する微妙な知識からの実際のエラーの例。


物語

タスクのステータス用のプロジェクトでenumを使用していましたが、開発者がそれをstringに置き換えました。その結果、APIはステータスとして任意の文字列を受け入れるようになり、製品の開発中に多くのバグが発生しました。制御が失われたためです。


物語

開発者はデータの検証にリテラルタイプを使用しようとしましたが、フォームフィールドからのパラメータを直接代入しました — TSはこれを許可しました、なぜならinputフィールドの型はstringであり、リテラル(例えば、「ok」 | 「fail」)ではなかったからです。input値が検証されなかったため、ランタイムで許可されている値の集合にない値が出現しました。


物語

リテラル値を受け取る関数のテストを書く際に、自動生成されたテストが予期しない文字列パラメータを渡してしまい、テストが通らなくなりました。後に、let宣言時の型推論の注意不足から型が弱められ、コンパイラがそれをキャッチできなかったことが判明しました。