[解決済み] 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
関連
-
[解決済み] TypeScript getting error TS2304: cannot find name ' require'.
-
[解決済み] メインとテストのコンパイルを分離するために、typescriptコンパイラ(tsc)のオプションはどのように設定するのが正しいのでしょうか?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでパラメータとして強く型付けされた関数は可能か?
-
[解決済み] クラス定数を実装するには?
-
[解決済み] TypeScriptの "*.d.ts "について
-
[解決済み] TypeScriptのオブジェクトリテラルでの型定義
-
[解決済み] TypeScriptでインターフェースファイルの定義に基づいたオブジェクトを作成するには?
-
[解決済み】TypeScriptのインターフェースと型について
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ts1206 デコレーターはここでは無効です、Angular 2。
-
[解決済み] 未使用のパラメータに対する型チェックをスキップする
-
[解決済み] サービスにDocumentを挿入する方法は?
-
[解決済み] なぜTypescriptではinferキーワードが必要なのでしょうか?
-
[解決済み] メインとテストのコンパイルを分離するために、typescriptコンパイラ(tsc)のオプションはどのように設定するのが正しいのでしょうか?
-
[解決済み] Typescript は ?演算子をサポートしていますか?(そして、それは何と呼ばれているのでしょうか?)
-
[解決済み] TypeScriptのファイル変更時にts-nodeを監視して再読み込みする方法
-
[解決済み】@HostBindingと@HostListener:これらは何をし、何のためにあるのですか?
-
[解決済み] ベースクラスのメンバへのアクセス
-
[解決済み] ES6 ゲッター/セッターとアロー関数