TypeScriptでおこなうCAST（型変換）｜基礎から注意点まで

（最終更新月：2023年11月）

✔当記事は以下のような疑問を持つ方におすすめです

「TypeScriptで型変換（キャスト）はどのようにおこなうのか？」

「TypeScriptでの型アサーション（キャスト）の正しい記述方法を知りたい」

「TypeScriptで型を変換する実践的なコード例を見たい」

✔当記事でご紹介する内容

TypeScriptにおける型変換の概要
型アサーションの具体的な記述方法
型変換を使った実用的なサンプルコード

当記事では、TypeScriptにおける型変換（キャスト）の基礎知識から、型アサーション（キャスト）の効果的な使い方までを、実例を交えて分かりやすくご説明します。

記事の内容を最後までしっかりと把握していただければ、TypeScriptの型システムをより効率的に扱えるようになるでしょう。

ご興味のある方は、どうぞ最後までこの記事をご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/19 14:24:31時点 Amazon調べ-詳細)

型キャスト入門

こちらでは、TypeScriptでの型キャストについてお伝えしていきます。

型キャストについて理解することで、効率的なコーディングとバグの減少に役立つでしょう。

型キャストの定義
キャストが要求される状況
型キャストの基本シナリオと例

型キャストの定義

型キャストとは、変数がある型から別の型へと明示的に変換されるプロセスのこと。

たとえば、number型の値をstring型に変換することがこれに該当します。

TypeScriptでは、型キャストは次のように書きましょう。

let someValue: any = ""これは文字列です"";
let strLength: number = (someValue as string).length;

この例では、any型のsomeValueをstringとして型キャストしています。

キャストが要求される状況

型キャストが必要となる一般的なシチュエーションには、APIのレスポンス処理やDOM操作などが含まれます。

たとえば、下記のようにHTML要素を取得する際にも型キャストが使われます。

let inputElement = document.getElementById('myInput') as HTMLInputElement;
console.log(inputElement.value);

getElementByIdがデフォルトでHTMLElementを返すため、HTMLInputElementへの型キャストがおこなわれています。

型キャストの基本シナリオと例

具体的な型キャストのシナリオを示しましょう。

JSONからデータを取得して、特定のインターフェースにキャストする場面が考えられます。

interface User {
  name: string;
  age: number;
}

let userData = '{""name"": ""Alice"", ""age"": 30}' as unknown as User;
console.log(userData.name); // Alice

この例では、JSON形式の文字列データを、Userインターフェース型としてキャストしています。

アップキャストとアサーション

ここでは、アップキャストと型アサーションについて解説します。

この2つを理解することで、より柔軟かつ安全にコードを書き進めることが可能です。

アップキャストの概念と利用
型アサーションの基本文法
実際のコードでのアップキャストの例

アップキャストの概念と利用

アップキャストは、サブタイプからスーパータイプ（一般的な型）への型変換を指します。

これは、TypeScriptの型システムの中で自動的に行われることが多く、手動でキャストをおこなう必要はほとんどありません。

たとえば、次のコードはアップキャストの一例です。

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Employee extends Person {
  department: string;
  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }
}

let person: Person = new Employee('Alice', 'Engineering');

ここでEmployeeはPersonのサブクラスであり、Employee型のオブジェクトをPerson型の変数に代入することができる例です。

それがアップキャストです。

型アサーションの基本文法

型アサーションは、開発者がコンパイラに対し、「私は何をやっているか知っている」と伝える方法です。

アサーションには2つの書き方があります。

// アングルブラケット構文
let someValue: any = ""これは文字列です"";
let strLength: number = (<string>someValue).length;

// as構文
let someOtherValue: any = ""これも文字列です"";
let anotherStrLength: number = (someOtherValue as string).length;

どちらのケースも、someValueが実際にはstring型であると型システムに伝えています。

実際のコードでのアップキャストの例

上で説明したEmployeeクラスとPersonクラスを使ってアップキャストの実際のコード例を示しましょう。

function sayHello(person: Person) {
  return ""Hello, "" + person.name;
}

const employee = new Employee('Alice', 'Engineering');
console.log(sayHello(employee)); // ""Hello, Alice""

この例では、sayHello関数がPerson型の引数を取るとしています。

そのため、EmployeeインスタンスはPerson型として受け入れられ、正しく機能します。

より安全なダウンキャスト

ここではダウンキャストとは何か、利用シナリオ、安全な実践方法について解説します。

ダウンキャストはリスクを伴うこともありますが、正しく使用すればコードの表現力を高める手段になるのです。

ダウンキャストの手法と例
代替ダウンキャスト方法
ダウンキャストの実践ケーススタディ

ダウンキャストの手法と例

ダウンキャストは、スーパータイプからサブタイプへの型変更のこと。

これにより、サブタイプ固有のプロパティやメソッドにアクセスできるようになります。

以下はダウンキャストの一例です。

let person: Person = new Employee('Alice', 'Engineering');
let employee = person as Employee;

console.log(employee.department); // ""Engineering""

このコードスニペットでは、Person型の変数personをEmployee型へキャストして、departmentにアクセスしています。

ただし、ダウンキャストを誤ると、実行時エラーにもつながるので、注意が必要です。

代替ダウンキャスト方法

型ガードというTypeScriptの機能を使って、型安全なダウンキャストをおこなう方法もあります。

特定の型であることを確認するための式を使用。

例えば以下のように書けます。

function isEmployee(person: Person): person is Employee {
  return (person as Employee).department !== undefined;
}

if (isEmployee(person)) {
  console.log(person.department); // ""Engineering""
}

isEmployee関数は、Person型のオブジェクトが実際にEmployee型であるかをチェックし、対応するプロパティにアクセスします。

ダウンキャストの実践ケーススタディ

ダウンキャストの実際の使用例として、次のようなAPIレスポンス処理を考えてみましょう。

type ApiResponse = {
  data: Employee | Manager;
};

function handleResponse(response: ApiResponse) {
  if ('department' in response.data) {
    let employee = response.data as Employee;
    console.log(`Employee: ${employee.name}, Department: ${employee.department}`);
  } else {
    let manager = response.data as Manager;
    console.log(`Manager: ${manager.name}, Team: ${manager.team}`);
  }
}

// APIレスポンスのシミュレーション
let response: ApiResponse = {
  data: {
    name: 'Alice',
    department: 'Engineering'
  }
};

handleResponse(response);

このケーススタディでは、レスポンスデータがEmployee型かManager型のどちらかであると仮定しています。

そして、プロパティチェックをおこない、それぞれに適した処理を実行しています。

キャストとアサーションの違い

型キャストと型アサーションは類似していますが、その使い分けを理解することが重要です。

このセクションでは、両者の違いと使用における慎重なアプローチについて説明します。

型アサーションとキャストの区別
コンパイルエラーと型アサーション
タイプセーフティとキャストのバランス

型アサーションとキャストの区別

型キャストは、他言語では型変換を実行するために使われることがありますが、TypeScriptでは厳密には型変換をするものではありません。

TypeScriptの「キャスト」は、主に型アサーションの形で現れ、コンパイラに型情報を強制する役割を持っています。

以下はその例です。

let someValue: any = ""これは文字列だと思います"";
let strLength: number = (someValue as string).length;

型アサーション（as string）により、開発者はsomeValueがstring型であるとコンパイラに伝えていますが、実際の値の型を変更しているわけではないことに注意してください。

コンパイルエラーと型アサーション

型アサーションが独自の型情報をコンパイラに提供することで、コンパイル時にエラーを回避するのに役立ちます。

しかし、この機能を過信すると実行時エラーのリスクが高まることがあるため、慎重な使用が必要です。

たとえば、もしsomeValueが実際には数字を格納していた場合、実行時にエラーが発生し得ます。

タイプセーフティとキャストのバランス

型安全性を維持しつつ型アサーションを使用するための最良のプラクティスとしては、以下の点が挙げられます。

型アサーションよりも型ガードを使用する
プログラムの論理を鑑みて、型アサーションが本当に必要か検討する
型アサーションを使う場合は、可能性のある値の範囲を狭めるための追加の検証をおこなう

これにより、型アサーションによる恩恵を享受しつつ、型安全性を損なうリスクを最小限に保てます。

効果的な型管理

TypeScriptでは型の管理が重要な役割を果たし、より安全で保守が容易なコードを書くために効果的な型管理技術を使用することが推奨されています。

タイプガードと型の洗練
タイプガード関数の実装
アサーション関数の活用
型安全性を最大化する技術

タイプガードと型の洗練

タイプガードとは、変数が特定の型であるかを実行時に確認するコードパターンのこと。

タイプガードは、条件式を使って行われます。

これは「型の狭め」（Type Narrowing）としても知られ、次のように実装されます。

function isString(test: any): test is string {
  return typeof test === ""string"";
}

function example(foo: any){
  if (isString(foo)) {
    // このブロック内ではfooはstring型として扱われる
    console.log(""It is a string: "" + foo);
  }
}

上記の関数isStringはタイプガードです。

コード内でisString(foo)がtrueと評価されると、fooはstring型として扱われます。

タイプガード関数の実装

タイプガード関数を実装する際には、戻り値の型をisキーワードを使用した型述語（Type Predicate）にします。

これにより、関数が特定の型であることを保証できるのです。

以下に実践的なタイプガード関数の例を示します。

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

let pet: Fish | Bird;

if (isFish(pet)) {
  pet.swim();
} else {
  pet.fly();
}

この例ではisFish関数がタイプガードとして機能しており、Fish型かどうかを判断しています。

アサーション関数の活用

アサーション関数は、主にデバッグの文脈で使用され、特定の条件を満たしているかをチェックする時に使えるもの。

たとえば、以下のように使えます。

function assert(condition: any, message?: string): asserts condition {
  if (!condition) {
    throw new Error(message || ""Assertion failed"");
  }
}

function multiply(x: any, y: any) {
  assert(typeof x === ""number"", ""x is not a number"");
  assert(typeof y === ""number"", ""y is not a number"");

  return x * y;
}

ここでのassert関数は、条件がfalseであればエラーを投げることで、実行時に型の保証を行います。

型安全性を最大化する技術

型安全性を最大化するには、型システムの全範囲を活用することが重要です。

例えば、「definitelyTyped」を使ってサードパーティライブラリの型定義を活用したり、厳格な型チェックオプションを有効にするなどのアプローチがあります。

また、型を適切に定義し、アサーションやキャストを適切に使用することで、型の誤りによる動作不良や未発見のバグを未然に防げるでしょう。

キャストのリスクと責任

型キャスト操作は便利ですが、そのリスクと責任についても認識しておく必要があります。

安全な型キャストを行い、リスクを避けるための情報と責任ある型操作について学びましょう。

キャスト操作の潜在的リスク
安全なキャストのための戦略
責任を伴う型操作の重要性

キャスト操作の潜在的リスク

型キャスト操作は、誤った場合、型安全ではない可能性があるため、実行時エラーに繋がるリスクが伴います。

とくに、any型から他の型へのキャストは注意が必要です。

let item: any = 50; // 実際にはnumber型の値
let castedItem = item as string; // コンパイルは通るが実行時にエラーの可能性がある

このコードはコンパイル時はエラーになりませんが、castedItemをstringとして扱った際に実行時に予期せぬバグを引き起こします。

安全なキャストのための戦略

安全なキャストをおこなうためには、明確なチェックロジック（タイプガード）を組み込むことが効果的です。

let potentialString: any = ""I might be a string, who knows?"";
if (typeof potentialString === ""string"") {
  let safeString = potentialString as string; // これは安全なキャストです。
}

このように実行前に変数が期待する型であるかを必ず検証することが大切です。

責任を伴う型操作の重要性

型キャストやアサーションの使用には責任が伴います。

実装者は、キャストによって、明示的に型の安全性を緩和していることを認識し、必要な場合にのみ使用すべきです。

コードレビューや自動テストを通じて、型操作の妥当性を周期的に評価することが推奨されます。

注釈とアサーションの対比

こちらでは、両者の機能と役割の違いについて説明し、実際のコード例での使用方法を見ていきましょう。

型注釈と型アサーションは混同されることがありますが、それぞれが異なる役割を持っています。

型注釈の働き
注釈とアサーションの対比
ケーススタディ：注釈とアサーションの適切な使用

型注釈の働き

型注釈は、変数や関数などの要素に期待される型を設定するために使用されます。

プログラム内の型の契約が明確になり、コンパイラが型の整合性をチェックする基準となるのです。

let message: string = ""Hello, TypeScript!""; // messageはstring型と注釈している

この例では、変数messageにstring型が注釈されており、numberなど他の型の値を代入しようとするとコンパイラはエラーを発生させます。

注釈とアサーションの対比

型注釈はコードの書かれた時点で変数の型を宣言するのに対し、型アサーションは既に存在する変数やオブジェクトに対して、その型を再宣言する際に使用されます。

型アサーションはコンパイラに対して、特定の場所での型の助言をおこなうものです。

// 注釈の使用
function greet(message: string) {
  console.log(message);
}

// アサーションの使用
let someValue: any = ""Hello as a string"";
let strLength: number = (someValue as string).length;

上記の例では、「注釈」を使って関数のパラメータの型を定義し、「アサーション」を使って既存の変数に特定の型があると主張しています。

ケーススタディ：注釈とアサーションの適切な使用

型注釈と型アサーションを適切にブレンドしたコード例を検討しましょう。

経験豊富な開発者は、型推論に頼ることも多いですが、外部APIやライブラリから来るデータを扱う場合には、型アサーションが便利です。

interface User {
  id: number;
  name: string;
}

function getUser(): any {
  // APIからデータを取得する想定
  // ...
}

// 注釈はgetUserの戻り値に対して使用
let user: User = getUser(); // APIからのデータはany型として取得されるため危険

// アサーションは任意のチェックの後、取得したデータに対して使用
let safeUser = getUser() as User; // チェックを入れる事で安全性が高まる

このケーススタディでは、不明確な型を持つ関数からの戻り値を扱う際に、型注釈だけでなく型アサーションを適切に使用する方法を示しています。

最適なキャストの実践

理論と実践のバランスを取りながら、型キャストの最適な使い方について学びましょう。

コーディングの現場でよく見られる問題とその解決方法、リファクタリングによる型キャストの最適化について解説することで、型キャストのスキルを深めます。

具体的なコーディング例を通じて理解する
キャスト操作の頻出問題及び対策
リファクタリングを通じたキャストの最適化

具体的なコーディング例を通じて理解する

最適な型キャストをおこなうには、まずは具体例を通じて理解することが大切です。

一例として、配列の要素に対する型キャストを見ていきましょう。

const rawValues: any[] = [1, ""two"", true, { name: ""Object"" }];
const castedValues: (string | number)[] = rawValues.map(value => {
  if (typeof value === ""number"") {
    return value; // 数値の場合はそのまま
  } else {
    return String(value); // それ以外は文字列にキャスト
  }
});

このコードでは、混在する型の配列を安全に特定の型へキャストしています。