TypeScriptの基礎 - 型アサーションのソースを表示

== 概要 ==
型アサーション (Type Assertion) は、TypeScriptの型システムに対して <u>この値はこの型である</u> と開発者が明示的に伝える仕組みである。<br>
<br>
型推論ではコンパイラが十分に型を特定できない場合や、開発者がコンパイラよりも型情報を正確に把握している場面で使用する。<br>
<br>
型アサーションはコンパイル時のみに作用し、JavaScriptへのトランスパイル後には消去される。<br>
実行時に型変換やランタイムチェックは一切行われないため、誤った型アサーションは実行時エラーの原因となる。<br>
<br>
構文としては <code>as</code> 構文 (<code>value as Type</code>) が推奨される。<br>
旧来のアングルブラケット構文 (<code>&lt;Type&gt;value</code>) はJSX (.tsx) ファイルでXML構文と競合するため、現在は非推奨である。<br>
<br>
TypeScript 4.9で導入された <code>satisfies</code> 演算子は、型の適合性を検証しつつ元の推論 (リテラル型等) を保持する新しい手段を提供する。<br>
<br>
<center>
{| class="wikitable"
|+ 型アサーションの種類と概要
! 種類 !! 概要
|-
| <code>as</code> 構文による型アサーション || 最も一般的な型アサーション構文であり、式の後に <code>as</code> キーワードと型を記述する。
|-
| ダブルアサーション || <code>as unknown as Type</code> のパターンであり、<br>互いに関連のない型間の変換に使用するが濫用は禁物
|-
| Non-null assertion operator (<code>!</code>) || 値が <code>null</code> または <code>undefined</code> でないことをコンパイラに伝える後置演算子
|-
| <code>as const</code> アサーション || オブジェクトや配列を <u>リテラル型として固定</u> して、<br><code>readonly</code> かつ最も狭い型に推論させる。
|-
| <code>unknown</code> 型と型アサーション || <code>any</code> より安全な <code>unknown</code> 型の値を、型チェック後に操作する方法
|-
| <code>satisfies</code> 演算子 || TypeScript 4.9で導入され、型の適合性を検証しつつ元の推論を保持する。
|-
| 型アサーションの推奨される事柄 || 型ガードや型の絞り込みを優先し、型アサーションは補助的な手段として使用する。
|}
</center>
<br>
型ガードや型の絞り込みによる安全な型特定を優先し、型アサーションは必要最小限に留めることが推奨される。<br>
<br>
型ガードと型の絞り込みの詳細は、[[TypeScriptの基礎 - 型の絞り込み]]のページを参照すること。<br>
<br><br>

== as構文による型アサーション ==
<code>as</code> 構文は、TypeScriptで最も広く使用される型アサーションの記述方法である。<br>
コンパイル後のJavaScriptコードには <code>as</code> は出現せず、型情報はコンパイル時にのみ使用される。<br>
<br>
==== 基本的な構文 ====
<code>as</code> キーワードは、アサーション対象の式の後に記述する。<br>
<br>
 <syntaxhighlight lang="typescript">
 const value = "hello" as string;
 const element = document.getElementById("app") as HTMLDivElement;
 </syntaxhighlight>
<br>
旧来の山括弧構文 (<code>&lt;Type&gt;</code>) も存在するが、JSX (.tsx) ファイルとの構文上の競合が生じるため、現在は <code>as</code> 構文の使用が推奨される。<br>
<br>
 <syntaxhighlight lang="typescript">
 // 旧来の構文 (JSXファイルでは使用不可のため非推奨)
 const element = <HTMLDivElement>document.getElementById("app");
 
 // 推奨されるas構文
 const element2 = document.getElementById("app") as HTMLDivElement;
 </syntaxhighlight>
<br>
==== 使用が適切な場面 ====
<code>as</code> 構文の使用が適切な場面を以下に示す。<br>
<br>
* DOM要素の取得
*: <code>querySelector</code> や <code>getElementById</code> の戻り値は汎用的な型で返されるため、具体的な要素型にアサーションする。
*: <syntaxhighlight lang="typescript">
 // querySelectorの戻り値は、Element | null
 const button = document.querySelector(".btn") as HTMLButtonElement;
 
 // getElementByIdの戻り値は、HTMLElement | null
 const input = document.getElementById("username") as HTMLInputElement;
 
 // アサーション後は具体的な要素型のプロパティ・メソッドが使用可能
 input.value = "Alice";
 button.disabled = true;
 </syntaxhighlight>
*: <br>
* APIレスポンスの型付け
*: <code>response.json()</code> の戻り値は <code>any</code> 型のため、期待する型にアサーションする。
*: <syntaxhighlight lang="typescript">
 interface User {
    id: number;
    name: string;
    email: string;
 }
 
 const response = await fetch("/api/user");
 const data = await response.json() as User;
 
 console.log(data.name);  // string型として扱われる
 </syntaxhighlight>
*: <br>
* 型ガード後の明示的なアサーション
*: <code>typeof</code> や <code>instanceof</code> によるチェック後、より具体的な型に確定する場面で使用する。
*: <syntaxhighlight lang="typescript">
 function processInput(value: string | number) {
    if (typeof value === "string") {
       // この時点では、TypeScriptがstringと推論するため、asは不要なことが多い
       const str = value as string;
       console.log(str.toUpperCase());
    }
 }
 </syntaxhighlight>
<br>
==== ダブルアサーション ====
<u>TypeScriptは、互いに関連のない型間の直接アサーションを許可しない。</u><br>
<u>このような場合、<code>as unknown as Type</code> パターン (ダブルアサーション) を使用することがある。</u><br>
<br>
 <syntaxhighlight lang="typescript">
 // 互いに関連のない型への直接アサーションはコンパイルエラー
 const num = 42 as string;  // TS2352 エラー
 
 // unknownを経由するダブルアサーション (コンパイルは通る)
 const num2 = 42 as unknown as string;
 </syntaxhighlight>
<br>
ダブルアサーションを使用すべきでない理由を以下に示す。<br>
<br>
* unknownを経由すると、あらゆる型変換が構文上可能になる。
*: 型システムの保護機能を完全に無効化することを意味する。
* 実行時エラーのリスクが著しく高まる。
*: コンパイル時にエラーが検出されないまま、実行時に予期しない動作が発生する。
* 型ガード関数 や typeof / instanceofで代替すべき
*: 安全な型の絞り込みによって、ダブルアサーションの必要がない設計を優先する。
<br>
<u>ダブルアサーションは、型定義が不正確なサードパーティライブラリとの連携など、真に避けられない場面に限定して使用すること。</u><br>
<br><br>

== Non-null assertion operator (!) ==
Non-null assertion operator (<code>!</code>) は、値が <u>null</u> または <u>undefined</u> でないことをコンパイラに伝える後置演算子である。<br>
<code>!</code> を式の末尾に付与することにより、<u>null</u> と <u>undefined</u> をユニオン型から除外する。<br>
<br>
==== 基本的な構文 ====
 <syntaxhighlight lang="typescript">
 function liveDangerously(x?: number | null) {
    // !を付与することで、null / undefinedを除外し、numberとして扱う
    console.log(x!.toFixed());
 }
 </syntaxhighlight>
<br>
<u><code>!</code> は型情報のみに影響し、実行時には何の処理も行われない点に注意が必要である。</u><br>
<u>実際に <code>null</code> や <code>undefined</code> が渡された場合は、実行時エラーが発生する。</u><br>
<br>
==== 使用場面 ====
<code>!</code> の使用が適切な場面を以下に示す。<br>
<br>
DOM 要素の取得後 (確実に存在する場合):<br>
<br>
 <syntaxhighlight lang="typescript">
 // querySelectorの戻り値は、Element | null
 // HTMLに.submit-btnが必ず存在する場合は、!を使用できる
 const button = document.querySelector(".submit-btn")!;
 button.addEventListener("click", () => {
    console.log("clicked");
 });
 </syntaxhighlight>
<br>
オプショナルプロパティへのアクセスを以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 interface Config {
    host: string;
    port?: number;
 }
 
 function getPort(config: Config): number {
    // port が設定されていることが保証されている場合
    return config.port!;
 }
 </syntaxhighlight>
<br>
==== リスクと代替手段 ====
<code>!</code> の使用には実行時エラーのリスクが伴うため、より安全な代替手段を優先することを推奨する。<br>
<br>
<center>
{| class="wikitable"
|+ ! / ?. / ifチェックの比較
! 手法 !! 安全性 !! 使用場面 !! リスク
|-
| <code>!</code> (Non-null assertion) || 低い || 確実にnullでないことが分かっている場合 || 実行時エラーの可能性
|-
| <code>?.</code> (オプショナルチェーン) || 高い || null / undefinedの可能性がある値へのアクセス || undefinedを処理する必要あり
|-
| ifチェック || 最も高い || 複数の処理が必要な場合 || コード行数が増える
|}
</center>
<br>
代替手段のコード例を以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 const button = document.querySelector(".submit-btn");
 
 // 代替手段1 : ifチェック (最も安全)
 if (button) {
    button.addEventListener("click", () => {
       console.log("clicked");
    });
 }
 
 // 代替手段2 : オプショナルチェーン ?. (推奨)
 button?.addEventListener("click", () => {
    console.log("clicked");
 });
 </syntaxhighlight>
<br>
ユニオン型の詳細については、[[TypeScriptの基礎 - ユニオン型]]のページを参照すること。<br>
<br><br>

== as constアサーション ==
<code>as const</code> は、オブジェクトや配列に対してリテラル型を保持させ、全プロパティを <code>readonly</code> にするアサーションである。<br>
型推論をより具体的 (狭い型) にしたい場合に有効である。<br>
<br>
型推論の詳細については、[[TypeScriptの基礎 - 型推論]]のページを参照すること。<br>
<br>
==== 基本的な構文 ====
<code>as const</code> を使用した場合 および 使用しない場合の型推論の違いを以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 // 通常の型推論
 const config1 = { host: "localhost", port: 3000, debug: true };
 // 型: { host: string; port: number; debug: boolean }
 
 // as constを使用
 const config2 = { host: "localhost", port: 3000, debug: true } as const;
 // 型: { readonly host: "localhost"; readonly port: 3000; readonly debug: true }
 </syntaxhighlight>
<br>
配列への適用では、タプル型として推論される。<br>
配列とタプルの詳細については、[[TypeScriptの基礎 - 配列とタプル]]のページを参照すること。<br>
<br>
 <syntaxhighlight lang="typescript">
 const colors1 = ["red", "green", "blue"];
 // 型: string[]
 
 const colors2 = ["red", "green", "blue"] as const;
 // 型: readonly ["red", "green", "blue"]
 </syntaxhighlight>
<br>
==== 実用的なパターン ====
<code>as const</code> を活用したenum的なパターンを以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 export const Colors = {
    red: "RED",
    blue: "BLUE",
    green: "GREEN",
 } as const;
 
 // typeof と keyof を組み合わせてユニオン型を生成
 type ColorValue = typeof Colors[keyof typeof Colors];
 // 型: "RED" | "BLUE" | "GREEN"
 
 function applyColor(color: ColorValue): void {
    console.log(`Applying color: ${color}`);
 }
 
 applyColor(Colors.red);  // OK
 applyColor("RED");       // OK
 applyColor("YELLOW");    // コンパイルエラー
 </syntaxhighlight>
<br>
このパターンにより、<code>enum</code> キーワードを使用せずに型安全な定数の集合を定義できる。<br>
<code>as const</code> により全プロパティが <code>readonly</code> となり、値の変更が型レベルで防止される。<br>
<br><br>

== unknown 型と型アサーション ==
<code>unknown</code> 型は、<code>any</code> 型と同様に任意の値を受け入れるが、型チェックを強制することで型安全性を保持する。<br>
外部データやAPIレスポンスを扱う際の型付けパターンとして重要である。<br>
<br>
==== unknown 型の安全な扱い ====
<code>unknown</code> 型の値は、型チェックを行わない限り操作できない。<br>
<br>
 <syntaxhighlight lang="typescript">
 let value: unknown;
 value = 42;           // 代入可能
 value = "hello";      // 代入可能
 
 // 型チェックなしの操作はコンパイルエラー
 value.toUpperCase();  // エラー: Object is of type 'unknown'.
 </syntaxhighlight>
<br>
<code>typeof</code> や <code>instanceof</code> による型チェック後は、安全に操作できる。<br>
<br>
 <syntaxhighlight lang="typescript">
 function processValue(value: unknown) {
    if (typeof value === "string") {
       console.log(value.toUpperCase());   // 安全: string として扱われる
    }
 
    if (value instanceof Error) {
       console.log(value.message);   // 安全: Error として扱われる
    }
 }
 </syntaxhighlight>
<br>
下表に、<code>unknown</code> と <code>any</code> の比較を示す。<br>
<br>
<center>
{| class="wikitable"
|+ unknown と any の比較
! 特性 !! unknown !! any
|-
| 代入可能性 || どの型からも代入可能 || どの型からも代入可能
|-
| 操作可能性 || 操作不可 (型チェック必須) || 操作可能 (チェック不要)
|-
| 型安全性 || 高い || 低い
|-
| 使用場面 || 外部データ、API レスポンス || レガシーコード
|}
</center>
<br>
==== JSON.parseの型付け ====
<code>JSON.parse</code> の戻り値は <code>any</code> 型であるため、型ガード関数を使用して安全に型付けするパターンが推奨される。<br>
<br>
 <syntaxhighlight lang="typescript">
 interface User {
    id: number;
    name: string;
    email: string;
 }
 
 // 型ガード関数で、User型かどうかを実行時に検証
 function isUser(obj: unknown): obj is User {
    return (
       typeof obj === "object" &&
       obj !== null  &&
       "id" in obj   &&
       "name" in obj &&
       "email" in obj
    );
 }
 
 const jsonString = '{"id":1,"name":"Alice","email":"alice@example.com"}';
 const parsed: unknown = JSON.parse(jsonString);
 
 if (isUser(parsed)) {
    console.log(parsed.name);   // 安全: User型として扱われる
 }
 </syntaxhighlight>
<br>
<u>型ガード関数 (<code>obj is User</code> 構文) を使用することにより、実行時チェックと型の絞り込みを同時に実現できる。</u><br>
<br>
型ガードの詳細については、[[TypeScriptの基礎 - 型の絞り込み]]のページを参照すること。<br>
<br><br>

== satisfies 演算子 ==
<code>satisfies</code> 演算子は TypeScript 4.9で導入された。<br>
<br>
型の適合性を検証しつつ、元の推論 (リテラル型等) を保持する点が <code>as</code> との大きな違いである。<br>
<br>
==== 基本的な構文 ====
<code>satisfies</code> は式の後に記述し、指定した型を満たすかどうかを検証する。<br>
<br>
 <syntaxhighlight lang="typescript">
 interface Config {
    host: string;
    port: number;
 }
 
 // asを使用: 推論された詳細情報が失われる
 const config1 = { host: "localhost", port: 3000 } as Config;
 // 型: Config (リテラル型の情報が失われている)
 
 // satisfiesを使用: リテラル型が保持される
 const config2 = { host: "localhost", port: 3000 } satisfies Config;
 // 型: { host: string; port: number } (元の推論を保持)
 </syntaxhighlight>
<br>
<code>satisfies</code> を使用した場合、型の適合性 (Config のプロパティを全て持つか) が検証される一方で、元の型推論が保持される。<br>
<br>
==== asとの違い ====
<code>as</code> と <code>satisfies</code> の主な違いを以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 const routes = {
    home: { path: "/", component: "HomePage" },
    about: { path: "/about", component: "AboutPage" }
 } satisfies Record<string, { path: string; component: string }>;
 
 // satisfiesでは元の推論が保持されるため、キーの型情報が利用可能
 type RouteKey = keyof typeof routes;   // "home" | "about"
 
 // asを使用した場合
 const routes2 = {
    home: { path: "/", component: "HomePage" },
    about: { path: "/about", component: "AboutPage" }
 } as Record<string, { path: string; component: string }>;
 
 type RouteKey2 = keyof typeof routes2;  // string (情報が失われる)
 </syntaxhighlight>
<br>
<center>
{| class="wikitable"
|+ as と satisfiesの比較
! 特性 !! as !! satisfies
|-
| 型チェック || ゆるい (互換性があれば通る) || 厳密 (完全な適合が必要)
|-
| 推論された型 || 指定した型になる || 元の推論を保持
|-
| リテラル型 || 失われる || 保持される
|-
| 余剰プロパティ || チェックされない || チェックされる
|-
| 導入バージョン || 初期から || TypeScript 4.9
|}
</center>
<br>
==== 実用的なパターン ====
<code>satisfies</code> を使用した実用的なパターンを以下に示す。<br>
<br>
レコード型での活用を以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 type Status = "pending" | "completed" | "failed";
 
 const statusMessages = {
    pending: "処理中です",
    completed: "完了しました",
    failed: "失敗しました"
 } satisfies Record<Status, string>;
 
 // 全てのStatusキーが存在することがコンパイル時に検証される
 // 余剰なキーがあった場合もコンパイルエラーになる
 console.log(statusMessages.pending);    // OK : "処理中です"
 console.log(statusMessages.completed);  // OK : "完了しました"
 </syntaxhighlight>
<br>
<u><code>satisfies</code> を使用することにより、型の適合性の検証と元の型推論の保持を両立できる。</u><br>
<br><br>

== 型アサーションのベストプラクティス ==
型アサーションは強力なツールであるが、誤った使用は型安全性を損なう。<br>
<br>
使用すべき場面と避けるべき場面を正しく判断することが重要である。<br>
<br>
<center>
{| class="wikitable"
|+ 型アサーションの使用指針
! 区分 !! 場面 !! 説明
|-
| rowspan="5" | 使用すべき場面
| DOM操作 || <code>querySelector</code>、<code>getElementById</code> の戻り値を具体的な要素型にアサーションする。
|-
| 外部API || JSONレスポンスを既知のインターフェース型にアサーションする。
|-
| レガシーコード || <code>any</code> 型の値を具体的な型にアサーションしてコードの移行を進める。
|-
| 設定値の固定 || <code>as const</code> によるオブジェクトや配列の定数化
|-
| 型の適合性確認 || <code>satisfies</code> による型の検証と推論の保持
|-
| rowspan="4" | 避けるべき場面
| ダブルアサーションの濫用 || <code>as unknown as Type</code> は型システムを完全に無効化するため、真に必要な場面に限定する。
|-
| <code>!</code> による null / undefined チェックのスキップ || 実行時エラーのリスクがあるため、ifチェック または オプショナルチェーン <code>?.</code> を優先する。
|-
| <code>any</code> 型の代替としての安易な型アサーション || 型ガードや適切なインターフェース設計で対処できないか検討する。
|-
| 推論が失われる場面での <code>as</code> || リテラル型の保持が必要な場合は、<code>satisfies</code> を検討する。
|}
</center>
<br>
下表に、型ガード および 型アサーションの使い分けを示す。<br>
<br>
<center>
{| class="wikitable"
|+ 型ガード と 型アサーションの使い分け
! 手法 !! 安全性 !! 実行時チェック !! 推奨用途
|-
| 型ガード関数 || 高い || あり || 不確定なデータ、ユーザ入力
|-
| typeof / instanceof || 高い || あり || プリミティブ型、クラスの確認
|-
| 型アサーション (as) || 低い || なし || 確実な型、DOM 操作
|-
| Non-null assertion (!) || 低い || なし || null 確定の限定的な場面
|-
| satisfies || 中程度 || なし || 型検証と推論保持が必要な場合
|}
</center>
<br>
<u>型安全性を最大限に保つためには、実行時チェックを伴う型ガードを優先し、型アサーションは補助的な手段として使用することを推奨する。</u><br>
<br><br>

== 関連情報 ==
* [[TypeScriptの基礎 - tsconfig.json]]
* [[TypeScriptの基礎 - 型注釈とプリミティブ型]]
* [[TypeScriptの基礎 - 型推論]]
* [[TypeScriptの基礎 - 型エイリアス]]
* [[TypeScriptの基礎 - オブジェクト型とインターフェース]]
* [[TypeScriptの基礎 - 関数の型定義]]
* [[TypeScriptの基礎 - ユニオン型]]
* [[TypeScriptの基礎 - 型の絞り込み]]
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Rust]][[カテゴリ:Web]]