1unknown を as で扱えるようにする
as の最も基本の形です。unknown のままでは一切の操作ができませんが、「これは文字列だと自分が保証する」と as で伝えれば、string のメソッドが使えるようになります。
const storedValue: unknown = "hello world";
// unknown のままでは操作できない
// console.log(storedValue.toUpperCase()); // コンパイルエラー
// 「これは string だ」と自分が保証する
const messageText = storedValue as string;
console.log(messageText.toUpperCase());
console.log(messageText.length);
2as は実行時には何もしない
as はコンパイル時の型情報を上書きするだけで、実行時の値は一切変換しません。typeof の結果が変わらないことで確かめられます。だからこそ、間違った as もコンパイルが通ってしまう点に注意が必要です。
function loadCount(): unknown {
return 42;
}
const visitorCount = loadCount() as number;
// as は型の見方を変えるだけで、値はそのまま
console.log(visitorCount + 8); // 50
console.log(typeof visitorCount); // number(値は変換されていない)
// 間違った as もコンパイルは通ってしまう
// const wrongText = loadCount() as string;
// console.log(wrongText.toUpperCase()); // 実行時に初めて壊れる
3オブジェクトの形を as で保証する
外部から unknown で受け取ったオブジェクトを、自分の知っている型として扱う例です。type で形を定義してから as で変換すると、その後はプロパティ名の補完やチェックが効く通常の世界に戻れます。
// 外部から来たデータ。コンパイラには形が分からない
function receiveData(): unknown {
return { productName: "コーヒー", unitPrice: 480 };
}
type Product = { productName: string; unitPrice: number };
// 自分は形を知っているので、Product として扱うと宣言する
const item = receiveData() as Product;
console.log(item.productName);
console.log("2個で " + item.unitPrice * 2 + "円");
// console.log(item.prodcutName); // as の後は打ち間違いも検出される
4JSON.parse の結果に型を付ける
JSON.parse の戻り値は型情報のない any なので、そのままでは型チェックが働きません。パース直後に as で自分の知っている型を付けるのが、外部データを型の世界に持ち込む実務の入口です。
// 外部から届いた JSON 文字列(この時点ではただの文字列)
const settingJson = '{"theme":"dark","fontSize":14}';
type DisplaySetting = { theme: string; fontSize: number };
// JSON.parse の結果は any。as で形を伝えて型チェックを復活させる
const parsedSetting = JSON.parse(settingJson) as DisplaySetting;
console.log(parsedSetting.theme);
console.log("文字サイズ: " + (parsedSetting.fontSize + 2));
5APIレスポンスの配列を as で受けて集計
API のレスポンス本文をパースして as で型を付け、その後は普通の型付きデータとして処理する実務の流れです。as を書くのはデータの入口の1か所だけにし、以降のコードは型チェックに守らせるのがよい設計です。
// APIから届いたユーザー一覧のJSON
const responseJson = '[{"userName":"Taro","age":28},{"userName":"Hanako","age":25}]';
type ApiUser = { userName: string; age: number };
// 入口で1回だけ as を使い、以降は型付きの世界で処理する
const userListData = JSON.parse(responseJson) as ApiUser[];
let ageTotal = 0;
for (const member of userListData) {
console.log(member.userName + "(" + member.age + "歳)");
ageTotal = ageTotal + member.age;
}
console.log("平均年齢: " + ageTotal / userListData.length);