TypeScript の文字列リテラル型

概要: このチュートリアルでは、指定した文字列リテラルを受け入れる型を定義できる TypeScript の文字列リテラル型について学習します。

文字列リテラル型を使用すると、指定された 1 つの文字列リテラルのみを受け入れる型を定義できます。

次はリテラル文字列 'click'を受け入れる文字列リテラル型を定義します。

let click: 'click';Code language: JavaScript (javascript)

click は文字列リテラル 'click' だけを受け入れる文字列リテラル型です。リテラル文字列 'click' を click に代入すると、有効になります。

click = 'click'; // validCode language: JavaScript (javascript)

ただし、別の文字列リテラルを click に代入すると、TypeScript コンパイラーはエラーを出します。たとえば、次のようになります。

click = 'dblclick'; // compiler errorCode language: JavaScript (javascript)

エラー

Type '"dblclick"' is not assignable to type '"click"'.Code language: JavaScript (javascript)

文字列リテラル型は、変数が格納可能な文字列値を制限するために役立ちます。

文字列リテラル型は Union 型 とうまく組み合わせて、変数の文字列リテラル値の有限セットを定義できます。

let mouseEvent: 'click' | 'dblclick' | 'mouseup' | 'mousedown';
mouseEvent = 'click'; // valid
mouseEvent = 'dblclick'; // valid
mouseEvent = 'mouseup'; // valid
mouseEvent = 'mousedown'; // valid
mouseEvent = 'mouseover'; // compiler errorCode language: JavaScript (javascript)

複数の場所で文字列リテラル型を使用すると、冗長になります。

これを避けるには、型エイリアスを使用できます。たとえば、次のようになります。

type MyMouseEvent = 'click' | 'dblclick' | 'mouseup' | 'mousedown';
let mouseEvent: MyMouseEvent;
mouseEvent = 'click'; // valid
mouseEvent = 'dblclick'; // valid
mouseEvent = 'mouseup'; // valid
mouseEvent = 'mousedown'; // valid
mouseEvent = 'mouseover'; // compiler error

let anotherEvent: MyMouseEvent;Code language: JavaScript (javascript)

概要

• TypeScript の文字列リテラル型は、指定した文字列リテラルを受け入れる型を定義します。
• 文字列リテラル型を Union 型および型エイリアスと一緒に使用して、有限セットの文字列リテラルを受け入れる型を定義します。