TypeScript のキャスティング

Volardev 編集部 April 29, 2026

型（Types）を扱う際、ライブラリから不適切な型が提供されている場合など、変数の型をオーバーライド（上書き）する必要が生じることがあります。このプロセスのことをキャスティング（Casting）、または型アサーション（Type Assertion）と呼びます。

1. as を使用したキャスティング

変数をキャストする最も直接的な方法は as キーワードを使用することです。これにより、特定の変数の型を直接変更できます。

例

let x: unknown = 'hello';

// x を string としてキャストして length プロパティにアクセス
console.log((x as string).length);

キャスティングは、変数内部のデータの型を実際に変換するわけではないことに注意してください。例えば、以下のコードは変数 x が依然として数値を保持しているため、期待通りには動作しません。

let x: unknown = 4;

// 数値には length プロパティがないため、undefined が出力されます
console.log((x as string).length);

TypeScript は、明らかに正しくないと思われるキャスティングを防ぐために、キャスティングに対してもタイプチェック（Typecheck）を試みます。例えば、以下の例では、データを変換せずに string を number にキャストするのは不合理であると判断され、型エラーがスローされます。

// エラー: 型 'number' から型 'string' への変換は、どちらの型も他方と十分にオーバーラップしていないため、
// 間違いである可能性があります。これが意図的である場合は、まず式を 'unknown' に変換してください。
console.log((4 as string).length);

このようなエラーを強制的に回避する方法については、後述の「強制的なキャスティング」セクションで解説します。

2. <> を使用したキャスティング

<>（アングルブラケット）を使用する方法も、as を使ったキャスティングと全く同じように動作します。

例

let x: unknown = 'hello';

console.log((<string>x).length);

ただし、この形式のキャスティングは、React プロジェクトなどの TSX ファイルでは動作しません。構文がタグと混同される可能性があるためです。

3. 強制的なキャスティング (Force casting)

TypeScript がキャスティング時にスローする型エラーを強制的にオーバーライドするには、まず unknown にキャストし、その後に目的の型にキャストします。

例

let x = 'hello';

// まず unknown にキャストしてから number にキャストする
console.log(((x as unknown) as number).length); 

// x は実際には数値（number）ではないため、この length プロパティの参照は undefined を返します