TS2611: 'foo'는 클래스 'A'에서 속성으로 정의되지만 여기서 'B'에서는 액세스로 재정의됩니다.

TS2611: 'foo'는 클래스 'A'에서 속성으로 정의되지만 여기서 'B'에서는 액세스로 재정의됩니다.

Angular 앱에서 Typescript 컴파일 오류가 발생했습니다.다음은 샘플 코드 및 오류 메시지입니다.

이 오류를 억제할 수 있도록 안내해 주시겠습니까?자바스크립트에 따르면 이 코드가 맞는 것 같습니다.

- error TS2611: 'foo' is defined as a property in class 'A', but is overridden here in 'B' as an accessor.

export class A {
  foo: string;
}

export class B extends A {
  f1;
  set foo(name) {
    this.f1 = name;
  }
  get foo() {
    return this.f1;
  }
}

편집자의 메모: 논평에서 두 클래스 모두가 나타났습니다.A그리고.B타사 라이브러리에 있습니다.

여기에 미묘한 버그가 있어 오류 메시지가 정확합니다.부모 클래스에서 속성을 정의하면 모든 하위 클래스에 대해 속성이 자동으로 생성됩니다.

그래서, 당신이 작성한 코드에서, 클래스 B에 대해 작성하지 않았다면:set/get foo(name) { ... }그 수업은 그랬을 것입니다.foo속성이 에 선언되었기 때문에 어쨌든 속성.B의 부모 클래스 -A.

당신의 코드에서 당신은 실제로 문질러지고 있습니다.foo신고 재산A접근자 선언과 함께.

의 모든 하위 클래스가 필요한 경우A그들의 것을 선언하기 위해 foo속성(인터페이스와 유사)을 입력한 다음 다음을 시도합니다.

export class A {
  abstract foo: string;
}

이를 위한 또 다른 방법은 다음을 만드는 것입니다.abstract하위 항목을 확장하는 데 사용할 수 있는 클래스입니다.나는 사용합니다.interface그 다음에abstract그런 다음 액세스 장치(get/set)를 사용하여 최종 클래스에서 확장합니다.

에서interface속성을 정의합니다.그러나 접근자(get/set)를 사용하려면 다음을 생성해야 합니다.abstract클래스에 대한 데이터를 저장하고 검색하는 데이터 유형 클래스에서만 이 작업을 수행합니다.

아래 예제는 인터페이스, 추상, 확장이 있는 스크립트 놀이터 예제에서 찾을 수 있습니다.

interface IQuote {

    qty: number,
    rate: number | string,
    total ? : number | string
}

abstract class AQuote implements IQuote {
  abstract set qty(x: number);
  abstract get qty(): number;
  abstract set rate(x: number | string);
  abstract get rate(): number | string;
  abstract set total(x: number | string);
  abstract get total(): number | string


  protected abstract updateTotal(): void
  abstract getTotalNum(): number


}

class quote extends AQuote {

  constructor(obj: IQuote) {
    super()
    this.qty = obj.qty
    this.rate = obj.rate
  }

  set qty(v: number) {
    this._qty = v;
    this.updateTotal()
  }

  get qty() {
    return this._qty;

  }

  set rate(v: number | string) {
    this._rate = Number(v);
    this.updateTotal()
  }

  get rate() {
    return new Intl.NumberFormat('en-GB', {
      style: 'currency',
      currency: 'GBP'
    }).format(Number(this._rate))
  }

  set total(v: number | string) {
    this._total = Number(v);
  }

  get total(): number | string {
    return new Intl.NumberFormat('en-GB', {
      style: 'currency',
      currency: 'GBP'
    }).format(Number(this._total))
  }

  getTotalNum() {
    return Number(this._total)
  }

  protected updateTotal() {
    this.total = Number(this._rate) * Number(this._qty)
  }

  private _qty: number = 1;
  private _rate: number | string = 1;
  private _total ? : number | string = (Number(this._rate) * this._qty);

}



class QuoteArray extends Array < quote > {

  getTotals(): number {
    let totalFigure: number = 0
    this.forEach(o => {
      totalFigure = totalFigure + o.getTotalNum()
    });
    return totalFigure
  }

}

let arry: QuoteArray = new QuoteArray();

arry.push(new quote({
  qty: 2,
  rate: 5
}))

arry.push(new quote({
  qty: 3,
  rate: 5
}))
arry.push(new quote({
  qty: 3,
  rate: 5
}))
arry.push(new quote({
  qty: 3,
  rate: 5
}))
arry.push(new quote({
  qty: 3,
  rate: 5
}))




console.log(arry);


console.log(arry.getTotals())

위의 예제는 배열처럼 조작할 수 있는 따옴표 배열을 만들지만 배열 유형을 확장하여 다음과 같은 메서드를 제공합니다.getTotals()포맷된 통화를 출력할 수 있습니다.

프로그래밍 언어에서는 일반적으로 부모로부터 상속받을 때 새 변수/함수/액세스자 이름이 이전 이름보다 우선하도록 지정할 때까지 동일한 변수/함수/액세스자 이름을 사용할 수 없지만 항상 이 이름은 동일한 유형이어야 합니다.예를 들어 부모와 자식의 접근자에 변수가 있습니다.변경할 수 있습니다.

class A {
  _foo: string = "";
  set foo(name) {
    this._foo = name;
  }
  get foo() {
    return this._foo;
  }
}

export class B extends A {
  f1: any;
  set foo(name) {
    this.f1 = name;
  }
  get foo() {
    return this.f1;
  }
}

유형 제한을 생략할 수 있는 방법이 있다고 생각합니다(필요하다면). 하지만 저는 어떻게 해야 하는지도 모르고 그것이 좋은 방법이 아니라고 생각합니다(프로그램은 독자에게 명확해야 합니다).

이미 게시한 바와 같이 TS 4에서 새로 시행된 오류 검사입니다(여기 참조).

그러나 타사 라이브러리를 전적으로 다루기 때문에 솔루션은 다음과 같은 옵션으로 제한됩니다.

1. 타사 라이브러리를 사용자의 유형 스크립트 버전과 호환되는 최신 버전으로 업그레이드할 수 있는지 확인합니다.
2. 해당 라이브러리를 포크하고 수정합니다(작성자가 검토할 PR 작성).지금은 도서관 대신에 포크를 사용하세요.
3. 이 오류 검사가 선택적인 버전으로 유형 스크립트를 다운그레이드합니다.

이 오류를 비활성화할 수 없는 경우가 있는 것 같습니다.

"유형 스크립트는 속성과 접근자를 d.ts로 구분할 수 없습니다."

논의 내용은 https://github.com/microsoft/TypeScript/issues/41347 에서 확인할 수 있습니다.

수정/합병 2022/05/31, 그러나 아직 공개되지 않음 [유형 @4.7.4 기준]

구현이 올바른 것이 확실한 경우 다음을 수행하여 검사를 비활성화할 수 있습니다.// @ts-nocheckts 파일의 맨 위에 있는 줄입니다.@ts-nocheck in TypeScript 파일

언급URL : https://stackoverflow.com/questions/63750710/ts2611-foo-is-defined-as-a-property-in-class-a-but-is-overridden-here-in