インターフェース定義でゲッター/セッターを使用することは可能ですか?


93

現時点でTypeScriptは、インターフェイスでget / setメソッド(アクセサ)を使用することはできません。例えば:

interface I {
      get name():string;
}

class C implements I {
      get name():string {
          return null;
      } 
}

さらに、TypeScriptでは、クラスメソッドで配列関数式を使用できません。例:

class C {
    private _name:string;

    get name():string => this._name;
}

インターフェイス定義でゲッターとセッターを使用できる他の方法はありますか?

回答:


125

インターフェイスでプロパティを指定できますが、次のようにゲッターとセッターを使用するかどうかを強制することはできません。

interface IExample {
    Name: string;
}

class Example implements IExample {
    private _name: string = "Bob";

    public get Name() {
        return this._name;
    }

    public set Name(value) {
        this._name = value;
    }
}

var example = new Example();
alert(example.Name);

この例では、インターフェイスはクラスにゲッターとセッターを使用するよう強制していません。代わりにプロパティを使用することもできます(以下の例)-とにかく、呼び出し側のコードに対する約束であるため、インターフェイスはこれらの実装の詳細を非表示にすることになっていますそれが何と呼ばれるかについて。

interface IExample {
    Name: string;
}

class Example implements IExample {
    // this satisfies the interface just the same
    public Name: string = "Bob";
}

var example = new Example();
alert(example.Name);

そして最後に、=>クラスメソッドは許可されていません- 燃えるユースケースがあると思われる場合は、Codeplexについての議論を始めることができます。次に例を示します。

class Test {
    // Yes
    getName = () => 'Steve';

    // No
    getName() => 'Steve';

    // No
    get name() => 'Steve';
}

1
=>このようなクラスメソッドの定義に使用できます。name = (a: string) => this._name;ただし、出力JSでは、プロトタイプオブジェクトを拡張するのではなく、クラス関数内で定義されます。
orad 2013

44

他の答えを補足するためget valueに、インターフェース上でを定義したい場合は、以下を使用できますreadonly

interface Foo {
  readonly value: number;
}

let foo: Foo = { value: 10 };

foo.value = 20; //error

class Bar implements Foo {
  get value() {
    return 10;
  }
}

しかし、私が知っている限り、および他の人が述べたように、現在、インターフェースでセットオンリープロパティを定義する方法はありません。ただし、制限を実行時エラーに移動できます(開発サイクル中にのみ役立ちます)。

interface Foo {
  /* Set Only! */
  value: number;
}

class Bar implements Foo {
  _value:number;
  set value(value: number) {
    this._value = value;
  }
  get value() {
    throw Error("Not Supported Exception");
  }
}

推奨されない方法です。しかしオプション。


2

まず第一に、TypescriptはEcmascript 5をターゲットgetとするset場合にのみ構文と構文をサポートします。これを実現するには、コンパイラーを次のように呼び出す必要があります。

tsc --target ES5

インターフェースはゲッターとセッターをサポートしていません。コードをコンパイルするには、次のように変更する必要があります。

interface I { 
    getName():string;
}

class C implements I { 
    getName():string {
          return null;
    }   
}

typescriptがサポートするのは、コンストラクター内のフィールドの特別な構文です。あなたの場合、あなたは

interface I {
    getName():string;
}

class C implements I {
    constructor(public name: string) {
    }
    getName():string {
        return name;
    }
}

クラスCがフィールドを指定していないことに注意してくださいname。実際にはpublic name: string、コンストラクターで構文糖を使用して宣言されています。

Sohneeが指摘するように、インターフェースは実際には実装の詳細を隠蔽することになっています。私の例では、Javaスタイルのゲッターメソッドを必要とするインターフェイスを選択しました。ただし、プロパティを使用して、クラスにインターフェイスの実装方法を決定させることもできます。


1
TypeScript getsetキーワードを使用できます。
フェントン

ECMAScript 5サポートに関する補足事項Object.defineProperty-IE8 +、FF4 +、Opera 12 +、WebKitおよびSafariでサポートされています。github.com/kriskowal/es5-shimに
Fenton

-1

TypeScript 3.4の使用:

interface IPart {
    getQuantity(): number;
}

class Part implements IPart {
    private quantity: number;
    constructor(quantity: number) {
        this.quantity = quantity;
    }
    public getQuantity = (): number => {
        return this.quantity;
    };
}

let part = new Part(42);

// When used in typescript, quantity is not accessible.
// However, when compiled to javascript it will log '42'.
console.log(part.quantity);

// Logs '42'.
console.log(part.getQuantity());

TypeScript Playgroundの例を参照してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.