【ワンピースで覚えるTypeScript】第２２回 lookup型/keyof型(JavaScript学習者向け)

今回はTypeScriptのlookup型/keyof型について解説します。

どちらも重要な機能なので、使いこなせるにしよう

type Character = {
  name: string;
  //bounty: number;
  bounty: bigint;
}

function getBounty(num: Character["bounty"]){
  return `${num}ベリー`;
}
//同じことを2回書かなくて済む

//keyof型
type Character1 = {
  name: string;
  bounty: number;
}

type CharacterKeys = keyof Character1;
let key: CharacterKeys;// "name" | "bounty"
key = "name";
key = "bounty";
//key = "age";

//keyof型とtypeofの組み合わせ
const luffy = {
  name: "ルフィ",
  age: 19,
};
//オブジェクトの型を取得するには、typeofを使用
type LuffyType = typeof luffy;
//keyof型を使用して、このオブジェクトのプロパティ名を取得
type LuffyKeys = keyof LuffyType;
//プロパティ名を使用して、オブジェクトのプロパティにアクセス
const nameKey: LuffyKeys = "name";
const luffyName: string = luffy[nameKey];
console.log(luffyName);
/*typeofとkeyof型を組み合わせて使用すると、
  オブジェクトの型からプロパティ名を取得し、
  オブジェクトのプロパティにアクセスすることができる*/


//keyof型とジェネリクス(型引数をもつ関数)
const chopper = {
  name: "チョッパー",
  bounty: 1000,
};

type ChopperKeys = keyof typeof chopper;
//オブジェクトとプロパティ名を引数に取り、プロパティの型を返す
type PropertyType<T, K extends keyof T> = T[K];
//オブジェクトchopperの特定のプロパティに対して型を指定
const age: PropertyType<typeof chopper, "bounty"> = 17;
const devil_fruits: PropertyType<typeof chopper, "name"> = "ヒトヒトの実";
//const age1: PropertyType<typeof chopper, "height"> = 17;

//=>keyof型とジェネリックスを組み合わせて使用することで
//オブジェクト