1. ホーム
  2. typescript

[解決済み] TypeScriptでの取得と設定

2022-03-19 19:01:52

質問

あるプロパティのgetとsetのメソッドを作成しようとしています。

private _name: string;

Name() {
    get:
    {
        return this._name;
    }
    set:
    {
        this._name = ???;
    }
}

値を設定するキーワードは?

どのように解決するのですか?

TypeScriptはECMAScript4/ActionScript3のようなgetter/setter構文を使っています。

class foo {
    private _bar: boolean = false;
    get bar(): boolean {
        return this._bar;
    }
    set bar(value: boolean) {
        this._bar = value;
    }
}

これは、ECMAScript 5を使用して、次のJavaScriptを生成します。 Object.defineProperty() という機能があります。

var foo = (function () {
    function foo() {
        this._bar = false;
    }
    Object.defineProperty(foo.prototype, "bar", {
        get: function () {
            return this._bar;
        },
        set: function (value) {
            this._bar = value;
        },
        enumerable: true,
        configurable: true
    });
    return foo;
})();

だから、それを使うために

var myFoo = new foo();
if(myFoo.bar) {         // calls the getter
    myFoo.bar = false;  // calls the setter and passes false
}

ただし、これを利用するためには、TypeScriptのコンパイラがECMAScript5をターゲットにしていることを確認する必要がある。 コマンドラインコンパイラを実行している場合は、以下のようにします。 --target のフラグは、このようになります。

tsc --target ES5

Visual Studioを使用している場合、プロジェクトファイルを編集して、TypeScriptCompileビルドツールの設定にフラグを追加する必要があります。 すると、以下のようになります。 ここで :

下記の @DanFromGermany が提案するように、単にローカルプロパティを読み書きしているだけなら foo.bar = true セッターとゲッターのペアを持つことは過剰なことです。 もし、そのプロパティが読み込まれたり書き込まれたりするたびに、ロギングなどの処理が必要であれば、後からいつでも追加することができます。

ゲッターは、読み取り専用のプロパティを実装するために使用することができます。 ここでは、ゲッターと readonly および optional 型の相互作用について説明します。

//
// type with optional readonly property.
// baz?:string is the same as baz:string|undefined
//
type Foo = {
    readonly bar: string;
    readonly baz?: string;
}
const foo:Foo = {bar: "bar"}
console.log(foo.bar) // prints 'bar'
console.log(foo.baz) // prints undefined

//
// interface with optional readonly property
//
interface iFoo {
    readonly bar: string;
    readonly baz?: string;
}

const ifoo:iFoo = {bar: "bar"}
console.log(ifoo.bar)  // prints 'bar'
console.log(ifoo.baz)  // prints undefined


//
// class implements bar as a getter, 
// but leaves off baz.
//
class iBarClass implements iFoo {

    get bar() { return "bar" }
}
const iBarInstance = new iBarClass()
console.log(iBarInstance.bar) // prints 'bar'
console.log(iBarInstance.baz) // prints 'undefined'
// accessing baz gives warning that baz does not exist 
// on iBarClass but returns undefined
// note that you could define baz as a getter
// and just return undefined to remove the warning.


//
// class implements optional readonly property as a getter
//
class iBazClass extends iBarClass {
    private readonly _baz?: string

    constructor(baz?:string) {
        super()
        this._baz = baz
    }

    get baz() { return this._baz; }
}

const iBazInstance = new iBazClass("baz")
console.log(iBazInstance.bar)  // prints bar
console.log(iBazInstance.baz)  // prints baz