型アサーション

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 のシミュレーションからデータを処理する function を作成してください。unknown 型の値を扱い、型アサーションを使用してプロパティに安全にアクセスします。

unknown 型の変数 apiResponse を作成し、次の JSON 文字列を代入してください。

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

次の処理を行う processUserData という名前の function を作成してください。

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

追加のテストデータを作成してください。

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

function をテストし、次の出力を表示してください。

apiResponse を引数として processUserData を呼び出し、結果を表示する
secondApiResponse を引数として processUserData を呼び出し、結果を表示する
thirdApiResponse を引数として processUserData を呼び出し、結果を表示する

自分で試してみよう

// 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));