---

---

【TypeScript】型アサーションの使用方法まとめ

投稿日：2021年2月23日

---

基本

パブリックなフィールドを持つクラスの場合

/**
 * フィールドがpublicなクラス
 */
class User {
  constructor(public id: number, public name: string) {}
  getInfo() {
    return `${this.id} : ${this.name}`;
  }
}

/**
 * Userの情報をログに出力する関数
 * @param user 
 */
function logInformation(user: User) {
  console.log(`${user.id} : ${user.name}`);
}

const user = { id: 1, name: "marsquai" };

logInformation(user); // [ERROR] Argument of type '{ id: number; name: string; }' is not assignable to parameter of type 'User'.

const user = { id: 1, name: "marsquai" } as User;

logInformation(user);  // [ OK ]

class User {
  constructor(public id: number, public name: string) {}
  getId() {
    return this.id;
  }
  getName() {
    return this.name;
  }
}

//const user = { id: 1, name: "marsquai" } as User;
const user1 = { id: 1, name: "marsquai" } as User;   // [ OK ]
const user2 = { id: 2 } as User;                     // [ OK ]
const user3 = { id: 3, age: 16 } as User;            // [ Error ]
const user4 = {} as User;                            // [ OK ]
const user5 = { getId() {} } as User;                // [ OK ]
const user6 = { getId():string {return "4"}} as User // [ ERROR ]

注意点

const user = { id: 1, name: "marsquai" } as User;
user.getInfo();

user.getInfo();
     ^

TypeError: user.getInfo is not a function

用途

// サーバーから受けったと仮定したデータ
const DATA_BODY =
  '[{"name": "marsquai", "id" : 1},{"name": "ogihara", "id" : 2},{"name": "akky", "id" : 3}]';

function getUser(id: number): User {
  const usersData = JSON.parse(DATA_BODY) as User[];            // 一旦Userの配列に型アサーション
  const userSelected = usersData.filter((d) => d.id == id);     // 必要なデータのみ取得
  if (userSelected.length > 0) {
    return new User(userSelected[0].id, userSelected[0].name);  // インスタンス化して返す
  } else {
    return new User(id, "no name");
  }
}

---

---

---