6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【TypeScript】TypeScript特有のリテラル型の使いどころ

Last updated at Posted at 2020-12-18

TypeScript特有の型「リテラル型」

TypeScriptの学習を進めていくと「リテラル型」という型が出現します。
これはTypeScript特有の型のようです。

リテラル型は、
「任意に指定したリテラル(文字列リテラル、数値リテラル....)以外を許可しない型」です。
(文字の意味そのままの説明になってしますが...。)

> let morningGreeting: 'Hello' = 'Hello';
>  morningGreeting = 'Good Evening';
[eval].ts:2:1 - error TS2322: Type '"Good Evening"' is not assignable to type '"Hello"'.

上記はコンパイルエラーとなります。

変数morningGreeting'Hello'という文字列リテラル型と定義されているので、
'Good Evening'という文字列リテラルは許容されず、'Hello'以外は受け入れられません。

型については理解できるのですが、文字列を決めうちで定義してどこに活かせるのか初見の時は疑問でした。

単独ではそこまで使い道がない

色々なコードを読み、リテラル型は単独で使われることがほとんどありませんでした。

大抵は下記のように、ユニオン型と君合わせて、複数のリテラル型を定義して列挙型のように使用されています。

> let greeting: 'Hello'| 'Hey' | 'Hi' = 'Hello';
> greeting = 'Hello';
> greeting = 'Yah';
[eval].ts:2:1 - error TS2322: Type '"Yah"' is not assignable to type '"Hello" | "Hey" | "Hi"'.

このように、enumの列挙型のようなことが実現できます。
enumよりシンプルな書き方でスッキリしますし、直感的で読みやすいので、
ユニオン型とリテラル型を組み合わせて書く型が多いようです。

> enum Greeting { 
>  Hello =  'Hello',
>  Hey = 'Hey',
>  Hi = 'Hi',
> }
 
> let greeting: Greeting = Greeting.Hello; 
> greeting = 'Yah'; 
[eval].ts:7:1 - error TS2322: Type '"Yah"' is not assignable to type 'Greeting'.

説明のために変数への代入で説明しましたが、実際に使うとなればtypeで型を定義して使うことが多いと思います。


type Greeting = 'Hello'| 'Hey' | 'Hi';

const hoge: Greeting = 'Hello';
const fuga: Greeting = 'Yah'; //コンパイルエラー

TypeScriptは様々な型を組み合わせることができるので、そこも面白いポイントだなと思っています。

最後まで読んで頂きありがとうございました。

6
2
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
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?