【無料配布】10日間で学べるTypeScript学習資料

TypeScriptのキャスト(as)と型変換:JSONやEnumのパース

typescript-cast

TypeScriptの「型キャスト(as)」はコンパイラに型を認識させる強力な機能ですが、実際のデータ変換(パース)とは異なるため、使い方を誤ると予期せぬ実行時エラーの温床になります。

本記事では、初心者が陥りがちな罠に触れつつ、実務で頻出するJSONのパースやEnum(列挙型)の相互変換を例に、安全で正しい型変換のベストプラクティスを解説します。

目次

TypeScriptの型キャストとは?基本の書き方

TypeScriptで開発をしていると、「コンパイラが推論した型」と「開発者が実際に想定している型」が一致しない場面に遭遇します。

このとき、コンパイラに対して「この値はこの型として扱ってほしい」と強制的に指示を出す仕組みが型キャスト(厳密には型アサーション:Type Assertion)です。

他の言語(JavaやC#など)に慣れている方は、実行時にデータの種類を変換する動的キャストをイメージするかもしれません。

しかし、TypeScriptのキャストは「コンパイル時のチェックを通過させるためのマーカー」に過ぎず、実行時の実際のデータ構造を変換するわけではない点に注意が必要です。

ここでは、具体的な値のキャストや変数のキャストの方法など、TypeScriptで型をキャストする方法の基本を解説します。

TypeScriptの型キャストとは?基本の書き方
  • 「as Type」と「<Type>」の書き方の違いと使い分け
  • 関数の引数・戻り値や変数の型をキャストする

「as Type」と「<Type>」の書き方の違いと使い分け

TypeScriptにおける指定の型へのキャストには、大きく分けて2つの構文が存在します。

それがasキーワードを使う方法とアングルブラケット< >を使う方法です。

この2つの違いは、機能的には同じですが、現在のTypeScript開発においては「as構文」が推奨されています。

// --- 1. as を使ったキャスト(推奨) ---
const someValue: unknown = "Hello TypeScript!";
// 変数を string 型としてキャストして、文字列の length プロパティにアクセスする
const strLength1: number = (someValue as string).length;

// --- 2. <Type> を使ったキャスト(非推奨・TSXでエラーになる) ---
const anotherValue: unknown = "Hello World!";
const strLength2: number = (<string>anotherValue).length;

console.log(strLength1, strLength2); // どちらも正常に動作する

関数の引数・戻り値や変数の型をキャストする

実際の開発では、外部ライブラリの型定義が曖昧な場合や、DOM要素を取得する場合などに関数の周辺でキャストを多用します。

例えば、変数を特定の型にキャストするだけでなく、関数に渡す引数をキャストする場面や、APIなどから返ってきた不明確な戻り値をキャストする場面です。

初心者がやりがちな危険なミスは、型エラーを消すためだけにas anyを乱用したり、全く関係のない型へ無理やりキャストしてしまうことです。

型キャストは「開発者がコンパイラに嘘をつく」ことができる強力な機能です。

もし実際のデータがキャストした型と異なっていた場合、コンパイルは通るのに実行時に原因不明のクラッシュを引き起こすことになります。

キャストは「本当にその型であることが100%確実な場合」のみに留め、基本的にはtypeofinstanceofなどの「型ガード」を使って安全に型を絞り込むアプローチを優先しましょう。

// --- 1. 戻り値の型をキャストする(DOM要素の取得など) ---
// document.getElementById は通常 HTMLElement | null を返す
const inputElement = document.getElementById("user-name");

// もし inputElement が確実に入力フォーム(<input>)だと分かっている場合、
// HTMLInputElement にキャストすることで value プロパティにアクセスできる
if (inputElement) {
  const nameValue = (inputElement as HTMLInputElement).value;
  console.log(`入力された名前: ${nameValue}`);
}

// --- 2. 関数の引数をキャストする ---
interface User {
  id: number;
  name: string;
}

function printUserInfo(user: User) {
  console.log(`[ID: ${user.id}] ${user.name}`);
}

// 外部APIなどから取得した、型が未確定なデータ
const apiResponse: any = { id: 1, name: "Taro Yamada", age: 30 };

// apiResponse には age が含まれているが、引数として渡す際に
// User 型としてキャスト(typescript cast function parameter)することでエラーを回避
printUserInfo(apiResponse as User);

プリミティブ型(文字列・数値・真偽値・Date)の変換

TypeScriptにおいて、「型のキャスト(アサーション)」と「値の変換(パース・コンバート)」は明確に区別する必要があります。

初心者が陥る勘違いは、「as stringas numberと書けば、実行時にもそのデータ型に変換される」と思い込んでしまうことです。

TypeScriptのキャストはあくまでコンパイル時の型チェックをごまかす(型を上書きする)だけであり、実行時のデータそのものを変換するわけではありません。

ここでは、実務で必須となるプリミティブ型の「正しい型付け」と「安全な実行時変換」の手法を解説します。

プリミティブ型(文字列・数値・真偽値・Date)の変換
  • String(文字列)へのキャスト・変換
  • Number・Int(数値・整数)へのキャスト・パース
  • Boolean(真偽値)やDate(日付型)へのキャスト・変換

String(文字列)へのキャスト・変換

データを文字列として扱いたい場合、TypeScriptの型アサーションではなく、JavaScriptの標準機能を使って実データを変換する必要があります。

数値や真偽値を文字列にするには、String()関数や.toString()メソッド、あるいはテンプレートリテラル(`${val}`)を使用します。

また、APIから取得したany型やunknown型のデータを安全に文字列化する際も注意が必要です。

オブジェクトや未定義の値に対して .toString()を呼び出すと、「Cannot read properties of undefined」という実行時エラーを引き起こします。

そのため、実務ではString()関数を使うか、オプショナルチェーン(?.)とNull合体演算子(??)を組み合わせるのが安全です。

// ❌ 危険な例(型だけを強制し、実態は数値のまま)
const badNum: any = 123;
const badStr = badNum as string; 
// console.log(badStr.toUpperCase()); // 実行時にエラーでクラッシュする!

// ⭕️ 正しい例(実データを文字列に変換する)
const num = 100;
const strFromNum = String(num); // "100"

const bool = true;
const strFromBool = String(bool); // "true"

// undefinedやnullが混入する可能性がある場合の安全な変換
function safeCastToString(value: unknown): string {
  if (value === undefined || value === null) {
    return "";
  }
  // オブジェクトの場合は JSON.stringify を使うと中身が見える
  if (typeof value === "object") {
    return JSON.stringify(value);
  }
  return String(value);
}

console.log(safeCastToString(undefined)); // ""
console.log(safeCastToString({ id: 1 })); // "{"id":1}"

Number・Int(数値・整数)へのキャスト・パース

文字列などを数値として扱いたい場合も同様に、実行時の変換が必要です。

特にユーザーの入力値(フォームデータ)は文字列として取得されるため、文字列から数値への変換は頻繁に行われます。

TypeScript自体にはint(整数)やfloat(浮動小数点数)という型はなく、すべてnumber型として扱われます。

しかし、実務では整数値が求められるケースが多く、文字列を整数に変換する場合や、小数を整数にする場合には、明示的な処理が必要です。

const strPrice = "2980";
const strWithUnit = "150px";
const floatNum = 3.1415;

// --- 基本的な数値への変換 ---
const price1 = Number(strPrice); // 2980
const price2 = +strPrice;        // 2980 (単項プラス演算子を使った簡略記法)

// --- 整数(int)へのパースと小数の切り捨て ---
// 10進数であることを明示するため、第2引数に10を指定するのがベストプラクティス
const parsedInt = parseInt(strWithUnit, 10); // 150

// 小数を整数(int)にキャスト(切り捨て)する場合
const intFromFloat1 = Math.floor(floatNum); // 3 (負の数の挙動に注意)
const intFromFloat2 = Math.trunc(floatNum); // 3 (単純な小数点以下の切り捨て機能)

// --- 安全な変換(NaNのハンドリング) ---
function safeCastToNumber(value: any): number {
  const num = Number(value);
  // 変換結果が NaN だった場合は 0 を返す(あるいはエラーを投げる)
  return Number.isNaN(num) ? 0 : num;
}

console.log(safeCastToNumber("abc")); // NaN になるため 0 が返る

Boolean(真偽値)やDate(日付型)へのキャスト・変換

最後に、真偽値と日付型への変換です。

JavaScriptでは、値が存在するかどうかを判定する際に、truthy(真っぽい値)と falsy(偽っぽい値:0, "", null, undefined, NaN など)という概念があります。

これを明示的にtruefalseに変換するには、二重否定!!Boolean()関数を使います。

// --- Booleanへのキャスト ---
const someString = "Hello";
const isTruthy1 = Boolean(someString); // true
const isTruthy2 = !!someString;        // true (実務で非常によく使われる記法)

// 🚨 罠:文字列の "false" の扱い
const apiResponseString = "false";
console.log(Boolean(apiResponseString)); // true になってしまう!

// ⭕️ 正しい文字列からBooleanへの変換
function stringToBoolean(str: string): boolean {
  return str.toLowerCase() === "true";
}
console.log(stringToBoolean("false")); // false


// --- Date型へのキャスト ---
const dateStr = "2023-10-01T12:00:00Z";
const badDateStr = "2023-99-99"; // 存在しない日付

// 文字列からDateオブジェクトへの変換
const myDate = new Date(dateStr);

// 🚨 罠:不正な日付のハンドリング
const invalidDate = new Date(badDateStr);
console.log(invalidDate); // "Invalid Date" (エラーは出ない)

// ⭕️ 正しいDateの検証
function safeCastToDate(dateString: string): Date | null {
  const d = new Date(dateString);
  // getTime() が NaN になるかどうかで、有効な日付か判定できる
  if (Number.isNaN(d.getTime())) {
    console.error("無効な日付フォーマットです");
    return null; // またはデフォルトの日付を返す、エラーを投げるなど
  }
  return d;
}

console.log(safeCastToDate(badDateStr)); // null

JSON・Object・Interface・Classのキャスト

プリミティブ型の扱い方をマスターしたら、次はWeb開発で最も頻繁に操作することになる複雑なデータ構造のキャストについて見ていきましょう。

TypeScriptのキャストは「実行時のデータ構造を変換するものではない」ということです。

特に、API通信で取得したJSONや、動的に生成されたオブジェクトに対して無闇にキャストを多用すると、予測不能なバグを引き起こす原因になります。

JSON・Object・Interface・Classのキャスト
  • JSON形式のデータからInterface・Objectへのキャスト
  • Objectから特定のClassやType・Interfaceへのキャスト
  • 配列(Array)へのキャスト

JSON形式のデータからInterface・Objectへのキャスト

Web APIとの通信や、localStorageからデータを読み込む際、データはJSON文字列として取得されます。

これをJavaScriptのオブジェクトに変換するためにJSON.parse()を使用しますが、この戻り値はany型になるため、TypeScriptの恩恵を受けるには型を指定する必要があります。

JSONデータを特定のInterfaceへキャストする、あるいはObjectの型へキャストする場合、asキーワードを使ってアサーションを行うのが一般的です。

interface UserProfile {
  id: number;
  username: string;
  isActive: boolean;
}

// 外部から取得したと仮定したJSON文字列
const jsonString = '{"id": 1, "username": "Taro"}'; // 🚨 isActiveが欠けている!

// --- 一般的なキャスト(リスクあり) ---
// typescript cast json to interface
const user = JSON.parse(jsonString) as UserProfile;

// コンパイルは通るが、実行時に undefined になる
console.log(user.isActive); // undefined

// --- 安全なパースとチェックの例 ---
function safeParseUser(jsonStr: string): UserProfile | null {
  try {
    // typescript cast json to object
    const parsed = JSON.parse(jsonStr) as Partial<UserProfile>;
    
    // 実行時に必須プロパティが存在するかチェックする(型ガード)
    if (typeof parsed.id === 'number' && typeof parsed.username === 'string') {
      // 安全が確認できたら、完全な型として扱う
      return parsed as UserProfile;
    }
    console.error("データの形式が不正です");
    return null;
  } catch (e) {
    console.error("JSONのパースに失敗しました");
    return null;
  }
}

console.log(safeParseUser(jsonString)); // エラーとして弾かれる(安全)

Objectから特定のClassやType・Interfaceへのキャスト

開発中、任意のオブジェクトに対して、特定のInterfaceやTypeを適用したい場面がよくあります。

これは、オブジェクトリテラル({})を作成する際や、外部から受け取ったObjectを指定の型として扱う際に使用します。

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

// クラスの定義(メソッドを持つ)
class Dog {
  name: string;
  age: number;

  constructor(data: AnimalData) {
    this.name = data.name;
    this.age = data.age;
  }

  bark() {
    console.log(`${this.name} says: Bow wow!`);
  }
}

// 外部から取得したプレーンなオブジェクト(typescript cast object to interface)
const rawData: any = { name: "Pochi", age: 3 };
const animalData = rawData as AnimalData; 

// ❌ 危険なキャスト(typescript cast object to class / typescript cast interface to class)
const fakeDog = animalData as Dog;
// fakeDog.bark(); // 🚨 TypeError: fakeDog.bark is not a function (クラッシュ!)

// ⭕️ 正しいクラスのインスタンス化
const realDog = new Dog(animalData);
realDog.bark(); // "Pochi says: Bow wow!" (正常に動作する)

配列(Array)へのキャスト

最後に、データの集まりを配列としてキャストする方法です。

APIのレスポンスが「配列のはずが any になっている場合や、「連想配列(オブジェクト)として取得したデータを、通常の配列に変換したい」場合に利用します。

// --- 1. any から配列への安全なキャスト(typescript cast any to array) ---
const unknownData: any = ["Apple", "Banana", "Cherry"];
const notAnArrayData: any = "Just a string";

// ❌ 危険:中身を確認せずにキャストする
// const badArray = notAnArrayData as string[];
// badArray.map(item => console.log(item)); // 🚨 クラッシュ!

// ⭕️ 正しい:Array.isArray で型ガード(型の絞り込み)を行う
if (Array.isArray(unknownData)) {
  // typescript cast to array (このブロック内では unknownData は any[] として扱われる)
  const fruits = unknownData as string[];
  fruits.map(fruit => console.log(`Fruit: ${fruit}`)); // 安全
}

// --- 2. オブジェクトから配列への変換(typescript cast object to array) ---
// キーがID、値がユーザー名になっているようなオブジェクト
const usersObject = {
  "101": "Taro",
  "102": "Jiro",
  "103": "Saburo"
};

// ❌ キャストでは変換できない
// const usersArray = usersObject as unknown as string[]; // 意味がない

// ⭕️ Object.values() や Object.entries() を使って配列を生成する
const usernamesArray: string[] = Object.values(usersObject);
console.log(usernamesArray); // ["Taro", "Jiro", "Saburo"]

const userEntries: [string, string][] = Object.entries(usersObject);
userEntries.forEach(([id, name]) => {
  console.log(`ID: ${id}, Name: ${name}`);
});

Enum(列挙型)と型・値の相互キャスト

TypeScriptのEnum(列挙型)は、InterfaceTypeといった他の型とは決定的に異なる特徴を持っています。

それは、「コンパイル時に消去されず、実行時にもJavaScriptのオブジェクトとして存在する」という点です。

そのため、Enumを扱う際のキャスト(型変換)は、単なるコンパイル時の型合わせ(アサーション)ではなく、実際のデータ値との整合性を意識しなければなりません。

ここでは、実務で頻出するAPIレスポンスやデータベースの値、Enumを相互に変換・キャストする方法を解説します。

Enum(列挙型)と型・値の相互キャスト
  • StringやNumberからEnumへのキャスト
  • EnumからStringやNumberへのキャスト

StringやNumberからEnumへのキャスト

APIから取得した文字列(例:"ACTIVE")や、データベースに保存されている数値(例:1)を、フロントエンドのロジックでEnumとして扱いたい場面は非常に多く存在します。

文字列からEnumへのキャストや数値・整数からEnumへのキャスト行う場合、簡単な書き方はasキーワードを使うことですが、ここには大きな罠が潜んでいます。

初心者が非常によくやるミスが、外部から来た文字列に対してconst status = "INVALID_STATUS" as UserStatus; のように直接キャストしてしまうことです。

TypeScriptコンパイラはこれを許容してしまいますが、実行時にはEnumに存在しない値がそのままシステムに流れ込み、後続の switch 文などで処理が漏れて原因不明のバグを引き起こします。

Enumへのキャストは、必ず「その値がEnumの定義内に実際に存在するか」を実行時に検証(バリデーション)してから行うのが鉄則です。

// --- 文字列のEnum(String Enum) ---
enum UserRole {
  ADMIN = "admin",
  USER = "user",
  GUEST = "guest",
}

// 外部から来た未定義の文字列
const apiRoleString: string = "admin";
const badRoleString: string = "super_admin";

// ❌ 危険なキャスト(typescript cast string to enum)
// const role1 = badRoleString as UserRole; // コンパイルは通るが、バグの温床になる

// ⭕️ 安全なキャスト(実行時チェックを含む)
function safeCastToRoleEnum(value: string): UserRole | null {
  // Object.values を使って、値がEnum内に存在するかチェックする
  if (Object.values(UserRole).includes(value as UserRole)) {
    return value as UserRole;
  }
  return null;
}

console.log(safeCastToRoleEnum(apiRoleString)); // "admin" (UserRole.ADMIN)
console.log(safeCastToRoleEnum(badRoleString)); // null (安全に弾かれる)


// --- 数値のEnum(Numeric Enum) ---
enum LogLevel {
  INFO = 1,
  WARN = 2,
  ERROR = 3,
}

// 外部から来た数値(typescript cast number to enum / typescript cast int to enum)
const apiStatusCode: number = 2;

// Numeric Enumの場合も同様にバリデーションを行う
function safeCastToLogLevel(value: number): LogLevel | null {
  if (Object.values(LogLevel).includes(value as LogLevel)) {
    return value as LogLevel;
  }
  return null;
}

console.log(safeCastToLogLevel(apiStatusCode)); // 2 (LogLevel.WARN)

EnumからStringやNumberへのキャスト

逆に、フロントエンドでEnumとして管理している値を、APIのリクエストボディに含めたり、画面に文字列として表示したりするために、EnumからStringへのキャストや、EnumからNumberへのキャストを行いたいケースもあります。

基本的に、String Enumの値は実行時には単なる文字列であり、Numeric Enumの値は単なる数値です。

そのため、特定の関数に渡す際に型エラーが出る場合は、標準の String()Number()、あるいは単純な as string / as number で処理が可能です。

実務で非常に多くのエンジニアが混乱するのが、「数値Enum(Numeric Enum)」の挙動です。

TypeScriptの数値Enumはコンパイルされると、「キーから値」へのマッピングだけでなく、「値からキー」へのマッピング(リバースマッピング)も自動生成されます。

そのため、Object.keys()Object.values() を使って数値Enumを配列化しようとすると、文字列のキーと数値の値が両方混ざった配列が生成されてしまい、「配列をループしてセレクトボックスを作ろうとしたら、表示がおかしくなった」というトラブルが頻発します。

文字列へのキャストをループ内で扱う際は、この仕様を理解しておく必要があります。

// 文字列Enum
enum Status {
  DRAFT = "draft",
  PUBLISHED = "published",
}

// 数値Enum
enum Direction {
  UP = 1,
  DOWN = 2,
}

const currentStatus = Status.PUBLISHED;
const currentDirection = Direction.UP;

// --- 1. 単純なキャスト ---
// Enumを文字列として出力する(typescript cast enum to string)
const statusStr: string = String(currentStatus); // "published"

// Enumを数値として計算などに使う(typescript cast enum to number)
const directionNum: number = currentDirection as number; // 1


// --- 2. 🚨 Numeric Enumのリバースマッピングの罠 ---

// String Enumの keys/values は直感的
console.log(Object.keys(Status));   // ["DRAFT", "PUBLISHED"]
console.log(Object.values(Status)); // ["draft", "published"]

// しかし、Numeric Enumの場合は両方混ざる!
console.log(Object.keys(Direction));   // ["1", "2", "UP", "DOWN"]
console.log(Object.values(Direction)); // ["UP", "DOWN", 1, 2]

// ⭕️ 解決策:数値Enumからキー(文字列)だけ、あるいは数値だけを抽出するヘルパー関数
function getNumericEnumValues(enumObj: any): number[] {
  // typeof が number のものだけを抽出(typescript cast enum to number の応用)
  return Object.values(enumObj).filter(v => typeof v === "number") as number[];
}

function getNumericEnumKeys(enumObj: any): string[] {
  // typeof が string であり、かつ数値にパースできないもの(キー名)だけを抽出
  return Object.keys(enumObj).filter(k => Number.isNaN(Number(k)));
}

console.log(getNumericEnumValues(Direction)); // [1, 2]
console.log(getNumericEnumKeys(Direction));   // ["UP", "DOWN"]

any・unknown・Union型からの安全なキャスト

TypeScriptを実務で導入していても、外部APIのレスポンスやサードパーティ製ライブラリの戻り値など、どうしても型が事前に定まらないケースは発生します。

そのような場面で登場するのが anyunknown、そして複数の型を許容する Union 型(共用体型)です。

しかし、これらの型が不確定なデータに対して「とりあえずエラーを消すため」にキャストを多用すると、TypeScriptを導入した意味が失われてしまいます。

ここでは、不確定な型から特定の型へ安全にキャストし、ランタイムエラーを防ぐためのベストプラクティスを解説します。

any・unknown・Union型からの安全なキャスト
  • anyやunknownから特定の型へのキャスト
  • Union型から単一型へのキャストと型の絞り込み
  • 二重キャストによる強制キャストと安全な変換

anyやunknownから特定の型へのキャスト

TypeScriptには、型チェックを完全に放棄する any と、型安全な any とも呼ばれる unknown が存在します。

外部のJSONデータなどを任意の型へキャストする場合、かつては any がよく使われていました。

しかし現在では、型が不明なデータはひとまず unknown として受け取るのが主流です。

unknown 型のデータを特定の型へキャストするや、特定のオブジェクトへキャストする場合、TypeScriptは「本当にその型であるか確認しましたか?」と型ガード(バリデーション)を要求してきます。

初心者が一番やってはいけないのが、型エラーが出たときに、とりあえず as any にキャストすることでエラーを握りつぶす行為です。

これをするとコンパイラは一切の警告を出さなくなり、存在しないメソッドを呼び出しても気づけません。

常に unknown を使い、実行時に型をチェックする癖をつけましょう。

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

// 外部から取得した型が不明なデータ(anyではなくunknownを使うのがベストプラクティス)
const fetchData = (): unknown => {
  return { name: "Alice", age: 25 };
};

const responseData = fetchData();

// ❌ 危険:チェックせずにキャストする(typescript cast unknown to type)
// const badUser = responseData as UserData;
// console.log(badUser.name.toUpperCase()); // もしデータが数値だったらここでクラッシュする

// ⭕️ 安全:型ガード(ユーザー定義型ガード)を用いて実行時チェックを行う
function isUserData(data: unknown): data is UserData {
  // typescript cast unknown to object として、まずはオブジェクトであることを確認
  if (typeof data !== "object" || data === null) return false;
  
  // プロパティの存在と型を確認
  const obj = data as Record<string, unknown>;
  return typeof obj.name === "string" && typeof obj.age === "number";
}

if (isUserData(responseData)) {
  // このブロック内では responseData は確実に UserData として扱われる(安全なキャスト)
  console.log(`User: ${responseData.name}, Age: ${responseData.age}`);
} else {
  console.error("無効なデータ形式です");
}

Union型から単一型へのキャストと型の絞り込み

実務では、「文字列または数値(string | number)」や「管理者または一般ユーザー(Admin | User)」のように、複数の型を取り得るUnion型を頻繁に扱います。

Union型から単一の型へキャストする場合、開発者は「今の処理フローでは、この変数は絶対にこっちの型だ」と分かっていることがあります。

このとき、as を使ってUnion型をキャストすることも文法上は可能です。

例えば Admin | User という型があるとき、if ((user as Admin).role === "admin") のように、as でキャストしてプロパティに無理やりアクセスしようとするコードをよく見かけます。

これは非常に読みづらく、もし仕様変更でプロパティ名が変わった際にバグを生み出しやすいアンチパターンです。

Union型から単一型を抽出する場合は、キャストではなく in 演算子や、タグ付きUnionと呼ばれる共通のプロパティを使った「型の絞り込み」を行うのが正解です。

interface Admin {
  type: "admin";
  adminLevel: number;
}

interface GeneralUser {
  type: "user";
  nickname: string;
}

type AppUser = Admin | GeneralUser;

function printUserInfo(user: AppUser) {
  // ❌ 悪い例:asを使って無理やりキャストする(typescript cast union type)
  // if ((user as Admin).type === "admin") {
  //   console.log(`管理者レベル: ${(user as Admin).adminLevel}`);
  // }

  // ⭕️ 良い例1:タグ付きUnionによる絞り込み(最も推奨される)
  // TypeScriptは `type` プロパティのチェックだけで、型を安全に絞り込んでくれる
  if (user.type === "admin") {
    // ここでは自動的に Admin 型として扱われる(キャスト不要)
    console.log(`管理者レベル: ${user.adminLevel}`);
  } else {
    // ここでは自動的に GeneralUser 型として扱われる
    console.log(`ユーザー名: ${user.nickname}`);
  }

  // ⭕️ 良い例2:in 演算子を使った絞り込み
  if ("adminLevel" in user) {
    console.log(`管理者レベル: ${user.adminLevel}`);
  }
}

printUserInfo({ type: "admin", adminLevel: 5 });

二重キャストによる強制キャストと安全な変換

TypeScriptのコンパイラは非常に賢いため、「全く互換性のない型へのキャスト」を検知するとコンパイルエラーを出してくれます。

例えば、string 型の変数を number 型に as でキャストしようとすると、「型 ‘string’ を型 ‘number’ に変換するのは間違っている可能性があります」と怒られます。

しかし、どうしてもコンパイラを黙らせて強制的にキャストしたい場面が、古いコードの移行時などに稀に存在します。

その際に使われるのが、一度 unknown(または any)を経由する「二重キャスト(value as unknown as TargetType)」という手法です。

二重キャストは、TypeScriptの型システムを完全に破壊する「禁じ手」に近いです。

「コンパイルが通らないからとりあえず as unknown as Type をつける」という癖がつくと、実行時エラーの温床になります。

どうしても条件によって安全に型を割り当てたい場合は、二重キャストを使うのではなく、ZodやYupなどのスキーマバリデーションライブラリを利用するか、自前で条件付きキャストや安全なキャストを行う関数を定義して、実行時にデータを検証するべきです。

const someValue = "12345";

// ❌ コンパイルエラー:互換性のない型への直接キャストはTSが弾いてくれる
// const badNum = someValue as number; 

// ⚠️ 危険:二重キャストによる強制キャスト(typescript force type cast)
// unknownを経由することでコンパイラを騙せるが、実行時の実態は "12345" (文字列) のまま
const forcedNum = someValue as unknown as number; 
// console.log(forcedNum.toFixed(2)); // 実行時に TypeError でクラッシュ!


// ⭕️ ベストプラクティス:typescript safe cast(安全な変換関数を用意する)
// typescript conditional cast のように、条件を満たした場合のみ型と値を変換する
function safeCastToNumber(val: unknown): number | null {
  if (typeof val === "number") return val;
  if (typeof val === "string") {
    const parsed = Number(val);
    return Number.isNaN(parsed) ? null : parsed;
  }
  return null;
}

const safeNum = safeCastToNumber(someValue);
if (safeNum !== null) {
  console.log(safeNum.toFixed(2)); // "12345.00"(安全に実行できる)
} else {
  console.error("数値に変換できませんでした");
}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次