IT이야기

TypeScript 인터페이스에서 getter, setter 사용

cyworld 2021. 4. 25. 12:39
반응형

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


읽기 전용 속성으로 인터페이스를 정의하고 싶습니다. 예를 들어;

interface foo {
    get bar():bool;
}

그러나이 경우 막대에 "expected ';'"라는 구문 오류가 발생합니다. ES5 대상을 사용하도록 VisualStudio를 설정 했으므로 게터가 지원됩니다. 이것이 인터페이스의 제한입니까? 앞으로 이러한 변화가있을 수 있습니다. 할 수 있다는 것은 아주 좋은 일입니다.


Getter 전용 속성은 Typescript 2.0 에서 도입되었습니다 .

interface foo {
    readonly bar: boolean;
}

예, 이것은 인터페이스의 제한 사항입니다. 속성에 대한 액세스가 getter로 구현되는지 여부는 구현 세부 사항이므로 공용 인터페이스의 일부가 아니어야합니다. 이 질문을 참조하십시오 .

인터페이스에 지정된 읽기 전용 속성이 필요한 경우 getter 메서드를 추가 할 수 있습니다.

interface foo {
    getAttribute() : string;
}

@Vitaliy Ulantikov가 대답했듯이 readonly속성에 수정자를 사용할 수 있습니다 . 이것은 게터와 똑같이 작동합니다.

interface Point {
    readonly x: number;
    readonly y: number;
}

리터럴 객체 가 구현하는 인터페이스, 당신은 덮어 쓸 수 없습니다 readonly속성을 :

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

그러나 클래스 가 인터페이스를 구현할 덮어 쓰기를 피할 수있는 방법은 없습니다.

class PointClassBroken implements Point {
    // these are required in order to implement correctly
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x
        this.y = y
    }

    changeCoordinates(x: number, y: number): void {
        this.x = x // no error!
        this.y = y // no error!
    }
}

클래스 정의에서 속성을 다시 선언하면 인터페이스의 속성을 재정의하고 더 이상 읽기 전용이 아니기 때문이라고 생각합니다.

이를 수정하려면 readonly인터페이스를 구현하는 클래스의 속성을 직접 사용 하십시오.

class PointClassFixed implements Point {
    readonly x: number;
    readonly y: number;

    constructor(x: number, y: number) {
        this.x = x
        this.y = y
    }

    changeCoordinates(x: number, y: number): void {
        this.x = x // error!
        this.y = y // error!
    }
}

놀이터 에서 직접보십시오 .

참조 URL : https://stackoverflow.com/questions/12844893/is-it-possible-to-use-getters-setters-in-typescript-interfaces

반응형