인터페이스 정의에서 게터 / 세터를 사용할 수 있습니까?


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;
}

인터페이스 정의에서 getter 및 setter를 사용할 수있는 다른 방법이 있습니까?

답변:


126

인터페이스에서 속성을 지정할 수 있지만 다음과 같이 getter 및 setter 사용 여부를 적용 할 수 없습니다.

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);

이 예제에서 인터페이스는 클래스가 getter 및 setter를 사용하도록 강제하지 않습니다. 대신 속성을 사용할 수 있습니다 (아래 예제). 그러나 인터페이스는 호출 코드에 대한 약속이므로 어쨌든 이러한 구현 세부 정보를 숨겨야합니다. 무엇을 부를 수 있는지.

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

이것은 정적 get 속성에서 작동하지 않는 것 같습니다 : /
CervEd

46

다른 답변을 보완하기 위해 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를 대상으로 할 때 getset구문 만 지원합니다 .이를 위해서는 다음과 같이 컴파일러를 호출해야합니다.

tsc --target ES5

인터페이스는 getter 및 setter를 지원하지 않습니다. 코드를 컴파일하려면 다음과 같이 변경해야합니다.

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가 지적했듯이 인터페이스는 실제로 구현 세부 사항을 숨겨야합니다. 제 예에서는 자바 스타일의 getter 메소드를 요구하는 인터페이스를 선택했습니다. 그러나 속성을 지정한 다음 클래스가 인터페이스 구현 방법을 결정하도록 할 수도 있습니다.


1
TypeScript에서 getset키워드를 사용할 수 있습니다 .
Fenton

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.