Literal Typesの使い方や使い道、Wideningの概念

公開日: 2023/05/05 @Miz_dev

TypeScript

Literal Types

プリミティブ型の以下の 3 つを細分化したもの。

取りうる値の中で、とある値に限定させたい場面で有用となる。

Boolean Literal Types

以下のように、trueに限定して受け取りたいといったような場合に使用する。

const foo: boolean = true;

const foo: true = true;

String Literal Types

以下のように、とある文字列に限定して受け取りたい場合に使用する。
文字列を指定しているので、タイポを防ぐという意味でも有用。

const foo: string = "foo";

const foo: "foo" = "foo";

Number Literal Types

以下のように、とある数値に限定して受け取りたい場合に使用する。
数値を指定しているので、タイポを防ぐという意味でも有用。

const foo: number = 0;

const foo: 0 = 0;

Literal Types の使い所

値を限定することができるので、コードを書く時の補完や予期せぬ値やタイポを防ぐことができる。
特定の値を入れさせたい場合に便利。

const と let の型推論の違い

const

const の型推論では Literal Types が表示される。
再代入不可のため、特定の値だと推論できるため。

let

Literal Types ではなく、通常の型が表示される。
let は再代入可能なので、あとから別の値が入る可能性があり、特定の値だと推論できないため。

Widening とは

const で型推論された Literal Types を再代入可能な変数やオブジェクトのプロパティのような、後から変えられうるところに代入してしまうと、Literal Types ではない例えば string 型に拡張されてしまうことを Wideningという。

const での Literal Types は Widening の性質を持っているため、Widening Literal Typesと呼ばれる。

Widening への対処

型アノテーション

型アノテーションを付与することによって、Literal Types のままにすることができる。
→Widening の性質を解除することができる。

const foo: "foo" = "foo";

型アサーション

以下のように as “foo”を使って、Literal Types を指定する。

const foo = "foo" as "foo";

const assertion

以下のように as constを使って、Literal Types を指定する。

const foo = "foo" as const;

型アサーションでの対処が少し冗長のため、こちらを使用する場合が多い。

Widening の注意点

Widening は Literal Types に限った話ではない。
Widening はあくまで性質のこと。

「型が拡張されてしまう = Widening」