見出し画像

【ワンピースで覚えるTypeScript】第23回 型アサーション(JavaScript学習者向け)

今回はTypeScriptの型アサーションについて解説します。

ただこちらの使用はできるだけ避けたほうがいいです。

型推論が完璧でないときに、状況に応じて使用していきましょう!


/*function GetBounty(berry: string | number){
  console.log(`${berry.length}けた`);
}*/

function GetBounty1(berry: string | number) {
  const new_berry = berry as string;
  console.log(`${new_berry.length}けた`);
}

GetBounty1("1000");
GetBounty1(1000);
//型の安全性を破壊することがある

type Person = {
  name: string;
  ability: false;
}

type AbilityPerson = {
  name: string;
  ability: true;
  devil_fruits: string;
}

type Character = Person | AbilityPerson;

function GetDevilFruits(characters: Character[]):string[] | undefined {
  if (characters.every(chara => chara.ability)){
    const new_characters = characters as AbilityPerson[];
    return new_characters.map(chara => chara.devil_fruits);
    //return characters.map(chara => chara.devil_fruits);
  }
  return undefined
}
//charactersがすべてAbilityPerson型

//as const
//「wideningしないリテラル型にする」
const characters = ['ルフィ', 'ゾロ', 'ナミ'];
//変数charactersの型はstring[]と推論
const characters2 = ['ルフィ', 'ゾロ', 'ナミ'] as const;
//変数characters2の型はreadonly ["ルフィ", "ゾロ", "ナミ"]型
//①配列型→タブル型
//②readonlyがついた
//③wideningしない
//=>変更できないものにする

//lookup型やtypeofキーワードと組み合わせる
const names = ["luffy", "zoro", "nami"] as const;

type Name = (typeof names)[number];
//=> "luffy" | "zoro"

この記事が気に入ったらサポートをしてみませんか?