型アサーション

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部 — レッスン 68/73。

TypeScriptが値の正確な型を決定するのに十分な情報を持っていないことがありますが、開発者であるあなたは、その値が実際には何であるかについてより多くのことを知っています。型アサーションを使用すると、TypeScriptに対して「私を信じてください。この値がこの特定の型であることを知っています」と伝えることができます。

TypeScriptは型アサーションのために2つの構文を提供しています。as構文は、より一般的なアプローチです：

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

アングルブラケット構文を使用することもできますが、現代のTypeScriptではあまり一般的ではありません。

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

外部APIシミュレーションからのデータを処理する関数を作成します。unknown型の値を扱い、型アサーションを使用してそのプロパティに安全にアクセスします。

unknown型の変数apiResponseを作成し、以下のJSON文字列を代入します。

{"userId": 42, "username": "alice_dev", "isActive": true}

以下の処理を行うprocessUserDataという名前の関数を作成します。

unknown型のパラメータdataを受け取る
型アサーションを使用して、dataをstringとして扱う
JSON.parse()を使用してJSON文字列をパースする
別の型アサーションを使用して、パースされた結果をプロパティuserId（number）、username（string）、およびisActive（boolean）を持つオブジェクトとして扱う
フォーマットされた文字列："User [userId]: [username] (Active: [isActive])"を返す
明示的な戻り値の型としてstringを持つ

追加のテストデータを作成します：

unknown型のsecondApiResponseを、JSON文字列：{"userId": 15, "username": "bob_admin", "isActive": false}で作成する
unknown型のthirdApiResponseを、JSON文字列：{"userId": 99, "username": "charlie_user", "isActive": true}で作成する

関数をテストし、以下の出力を表示します：

apiResponseを指定してprocessUserDataを呼び出し、結果を表示する
secondApiResponseを指定してprocessUserDataを呼び出し、結果を表示する
thirdApiResponseを指定してprocessUserDataを呼び出し、結果を表示する

チートシート

型アサーションを使用すると、TypeScriptが推論できる以上の情報をあなたが知っている場合に、TypeScriptに対して値の特定の型を伝えることができます。

as 構文を使用します (最も一般的):

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

もう一つのアングルブラケット構文:

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

自分で試してみよう

// APIレスポンスの変数を作成します
const apiResponse: unknown = '{"userId": 42, "username": "alice_dev", "isActive": true}';
const secondApiResponse: unknown = '{"userId": 15, "username": "bob_admin", "isActive": false}';
const thirdApiResponse: unknown = '{"userId": 99, "username": "charlie_user", "isActive": true}';

// TODO: ここでprocessUserData関数を作成します

// 関数をテストして結果を出力します
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。