※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【TypeScript】Objectにアクセサを定義する関数の作成方法について

accessor TypeScript getter セッター setter ゲッター

投稿日：2021年4月11日

この記事ではTypeScriptでオブジェクトにgetter、setterを簡単に追加する方法について解説しています。

はじめに

環境

この記事では以下の環境を前提にしています。

typescript version 4.2.3

結論

結論からいうと以下の用にkeyofを使うことで実装することができます。

Userオブジェクトにアクセサーを定義

// ユーザー
type User = {
  name: string;
  age: number;
  email: string;
};


// 与えられたUserオブジェクトをアクセサーに変更する
function MagicUser(user: User) {
  // すべてのgetter
  function get<K extends keyof User>(key: K) {
    return user[key];
  }

  // すべてのsetter
  function set<K extends keyof User>(key: K, value: typeof user[K]) {
    user[key] = value;
    return user;
  }

  return {
    get,
    set,
  };
}
const user: User = {
  name: "marsquai",
  age: 26,
  email: "example@marsquai.com",
};
const magicUser = MagicUser(user);
console.log(magicUser.get("name")); // [ out ] marsquai
console.log(magicUser.get("position")); // Compile Error
magicUser.set("age", 100);
magicUser.set("age", "marsmars"); // Compile Error

keyof TはTの許可されたプロパティ名のタイプを生成します。
今回のkeyof Userでは"name" | "age" | "email"という型が生成されるため、get()とset()で受け取るプロパティ名を制限できるわけですね。

実際に拡張されたオブジェクトのget()、set()メソッドを使ってみると、プロパティ名として受け取れる値が文字列の"name"、"age"、"email"だけであることがわかると思います。

さらに以下の様にジェネリックの関数にしておくとより便利かもしれません。

ジェネリック関数にした場合

// 与えられたオブジェクトをアクセサーに変更する
function MagicObj(obj: T) {
  // すべてのgetter
  function get<K extends keyof T>(key: K) {
    return obj[key];
  }

  // すべてのsetter
  function set<K extends keyof T>(key: K, value: typeof obj[K]) {
    obj[key] = value;
    return obj;
  }

  return {
    get,
    set,
  };
}

参考サイト

記事へのコメント

【TypeScript】Objectにアクセサを定義する関数の作成方法について

はじめに

環境

結論

参考サイト

検索

カテゴリ

Web開発

機械学習

プログラミング

その他

サーバー開発

Linux

目次