リテラルの型とアサーション

TypeScript は、変数の可能な値を絞り込み、必要に応じてコンパイラにより具体的な型を強制的に認識させるための高度なツールを提供します。

リテラル型

リテラル型は、正確な単一の値 (特定の文字列や数値など) を表します。これらは通常、共用体型と組み合わせられます。

type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;

light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLight

型アサーション (as)

TypeScript がコンパイル時に認識できない型に関する情報がある場合があります。このような場合、as キーワードを使用して type アサーション を使用できます。

const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;

アサーションはコンパイラに次のように伝えます: 「信じてください、この要素は HTMLCanvasElement であることはわかっています」。実行時にチェックやキャストは実行されません。型チェッカーのみに役立ちます。

定数アサーション (as const)

const を使用してオブジェクトまたは配列を宣言しても、TypeScript ではその内部プロパティを変更できます。最後に as const を追加すると、構造全体が凍結されて読み取り専用になり、すべてのプロパティが正確なリテラル型に変換されます。

const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-only

テンプレートのリテラル型

テンプレート リテラル型は JavaScript テンプレート文字列の上に構築されますが、型の位置で使用されます。これらにより、複数のリテラル型を 1 つに組み合わせることができます。

type Size = 'small' | 'large';
type Color = 'red' | 'blue';

// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;

テンプレート リテラル タイプの文字列ユーティリティ

TypeScript は、テンプレート リテラル タイプ内の文字を操作するための特別なユーティリティ タイプを提供します。

• Capitalize<StringType>: 文字列の最初の文字を大文字にします。
• Uncapitalize<StringType>: 文字列の最初の文字の大文字を削除します。
• Uppercase<StringType>: 文字列全体を大文字に変換します。
• Lowercase<StringType>: 文字列全体を小文字に変換します。

type ActionType = 'click' | 'hover';

// Generates: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;

自分で試してみてください

演習 1: 方向リテラル結合

演習 2: JSON.parse のアサーション

演習 3: イベントのテンプレート リテラル

演習 4: Capitalize を使用したテンプレート リテラル型