【TypeScript入門】keyof型演算子(type operator)の使い方をコード例で徹底解説

type Person = {
  name: string;
  age: number;
  email: string;
};

// Personオブジェクトのプロパティ名を取得
type PersonKeys = keyof Person;
// PersonKeys は "name" | "age" | "email" となる

// 使用例
let property: PersonKeys = "name";    // OK
property = "age";                     // OK
property = "email";                   // OK
property = "address";                 // エラー: Type '"address"' is not assignable to type '"name" | "age" | "email"'

type Product = {
  id: number;
  name: string;
  price: number;
  category: string;
  inStock: boolean;
};

type ProductKeys = keyof Product;
// "id" | "name" | "price" | "category" | "inStock"

function getProductProperty(product: Product, key: ProductKeys) {
  return product[key];
}

const myProduct: Product = {
  id: 1,
  name: "ノートPC",
  price: 80000,
  category: "electronics",
  inStock: true
};

// 型安全にプロパティにアクセス
const productName = getProductProperty(myProduct, "name");     // string
const productPrice = getProductProperty(myProduct, "price");   // number
const invalidProp = getProductProperty(myProduct, "weight");   // エラー

const user = {
  id: 1,
  username: "taro",
  email: "taro@example.com",
  isActive: true
};

// userオブジェクトの型を取得してからkeyofを適用
type UserKeys = keyof typeof user;
// "id" | "username" | "email" | "isActive"

function getUserProperty(obj: typeof user, key: UserKeys) {
  return obj[key];
}

// 型安全にプロパティにアクセス可能
const userId = getUserProperty(user, "id");           // number
const userEmail = getUserProperty(user, "email");     // string

// 文字列インデックス型
type StringIndexType = {
  [key: string]: any;
};
type StringKeys = keyof StringIndexType;
// string | number （numberはstringに変換可能なため含まれる）

// 数値インデックス型
type NumberIndexType = {
  [key: number]: any;
};
type NumberKeys = keyof NumberIndexType;
// number

// 具体的なキーを持つインデックス型
type SpecificKeys = {
  [K in "x" | "y" | "z"]: any;
};
type SpecificKeyType = keyof SpecificKeys;
// "x" | "y" | "z"

type User = {
  name: string;
  age: number;
  email: string;
};

// すべてのプロパティをオプショナルにする
type PartialUser = {
  [K in keyof User]?: User[K];
};
// { name?: string; age?: number; email?: string; }

// すべてのプロパティをreadonlyにする
type ReadonlyUser = {
  readonly [K in keyof User]: User[K];
};
// { readonly name: string; readonly age: number; readonly email: string; }

// 使用例
const partialUser: PartialUser = {
  name: "太郎"  // ageとemailは省略可能
};

const readonlyUser: ReadonlyUser = {
  name: "花子",
  age: 25,
  email: "hanako@example.com"
};
// readonlyUser.name = "変更"; // エラー: Cannot assign to 'name' because it is a read-only property

type EmptyObject = {};
type EmptyKeys = keyof EmptyObject;
// never型

// never型は値を代入できない
let key: EmptyKeys;
// key = "anything"; // エラー: Type '"anything"' is not assignable to type 'never'

type AnyKeys = keyof any;
// string | number | symbol

// JavaScriptでオブジェクトのキーとして使用可能なすべての型
let anyKey: AnyKeys = "string";     // OK
anyKey = 123;                       // OK
anyKey = Symbol("sym");             // OK

type ArrayKeys = keyof string[];
// "length" | "push" | "pop" | "shift" | "unshift" | "indexOf" | "slice" | ...

const arr: string[] = ["a", "b", "c"];
function getArrayProperty(array: string[], key: ArrayKeys) {
  return array[key];
}

const length = getArrayProperty(arr, "length");    // number
const pushMethod = getArrayProperty(arr, "push");  // (...items: string[]) => number

function hasProperty<T extends object, K extends keyof T>(
  obj: T,
  key: K
): obj is T & Record<K, NonNullable<T[K]>> {
  return obj[key] !== undefined && obj[key] !== null;
}

type Config = {
  apiUrl?: string;
  timeout?: number;
  retries?: number;
};

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

// 型ガードとして使用
if (hasProperty(config, "apiUrl")) {
  // この時点でconfig.apiUrlはstring型として認識される
  console.log(config.apiUrl.toUpperCase());
}

if (hasProperty(config, "retries")) {
  // retriesは未定義なのでfalse
  console.log("Retries:", config.retries);
}

function updateObject<T, K extends keyof T>(
  obj: T,
  key: K,
  value: T[K]
): T {
  return {
    ...obj,
    [key]: value
  };
}

type Settings = {
  theme: "light" | "dark";
  fontSize: number;
  autoSave: boolean;
};

const settings: Settings = {
  theme: "light",
  fontSize: 14,
  autoSave: true
};

// 型安全な更新
const newSettings = updateObject(settings, "theme", "dark");        // OK
const newSettings2 = updateObject(settings, "fontSize", 16);        // OK
const invalidUpdate = updateObject(settings, "theme", "invalid");   // エラー

// 複数の演算子を組み合わせた例
const data = {
  users: [{ id: 1, name: "太郎" }],
  products: [{ id: 1, title: "商品A" }]
};

type DataKeys = keyof typeof data;           // "users" | "products"
type DataValues = (typeof data)[DataKeys];   // { id: number; name: string; }[] | { id: number; title: string; }[]

// 条件付き型と組み合わせ
type ArrayElementType<T> = T extends (infer U)[] ? U : never;
type UserType = ArrayElementType<(typeof data)["users"]>;  // { id: number; name: string; }