prosource

Typescript에서 인터페이스를 구현할 때 개인 속성을 정의하는 방법은 무엇입니까?

probook 2023. 3. 19. 18:20
반응형

Typescript에서 인터페이스를 구현할 때 개인 속성을 정의하는 방법은 무엇입니까?

프로젝트에서 TypeScript를 사용하고 있는데 문제가 발생했습니다.다음과 같은 인터페이스를 정의합니다.

interface IModuleMenuItem {
    name: string;
}

이 인터페이스에서 구현되는 클래스를 만들고 싶은데 다음과 같은 개인 속성으로 이름을 지정합니다.

class ModuleMenuItem implements IModuleMenuItem {
    private name: string;
}

다음의 에러가 표시됩니다.

Class ModuleMenuItem이 인터페이스 IMocheduleMenuItem을 잘못 구현했습니다.ModuleMenuItem 유형에서는 속성 이름이 비공개이지만 IMocheduleMenuItem 유형에서는 비공개입니다.

인터페이스를 실장할 때 속성을 프라이빗 또는 프로텍트로 정의하려면 어떻게 해야 합니다.

인터페이스는 '퍼블릭' 계약을 정의하기 때문에 이러한 계약과protected또는private인터페이스상의 액세스 수식자(실장 상세라고 부름)에 가깝습니다.그 때문에, 인터페이스에서는 원하는 것을 할 수 없습니다.

속성을 소비자에게 읽기 전용으로 하고 하위 클래스에서 재정의하려면 다음과 같은 작업을 수행할 수 있습니다.

interface IModuleMenuItem {
     getName(): string;
}

class ModuleMenuItem implements IModuleMenuItem {
    private name;

    public getName() {
        return name;    
    }

    protected setName(newName : string) {
        name = newName;
    }
}

TypeScript 2.0(아직 공개되지 않음)에서는readonlyinitialization-time read only 필드 뒤에 있는 경우 접근 수식자:https://basarat.gitbooks.io/typescript/content/docs/types/readonly.html

interface IModuleMenuItem {
     readonly name : string;
}

class ModuleMenuItem implements IModuleMenuItem {
    public readonly name : string;

    constructor() {
        name = "name";
    }
}

이렇게 해도 될 것 같아요

interface IModuleMenuItem{
    name: string
}

class ModuleMenuItem implements IModuleMenuItem {
    private _name: string;
    constructor() {
    _name = "name";
    }

    get name(){
    // your implementation to expose name
    }

    set name(value){
    // your implementation to set name         
    }
 }

클래스에 개인 필드가 있는 경우 다음과 같이 setter를 도입하고 해당 필드의 메서드를 취득해야 합니다.

export class Model {
    private _field: number;

    get field(): number {
        return this._field;
    }

    set field(value: number) {
        this._field= value;
    }
}

다음으로 다음과 같이 인터페이스를 작성합니다(인터페이스필드에 프라이빗 수식자를 사용할 수 없습니다).

export interface IModel {
 field: number;
}

그런 다음 다음과 같이 우리 반에 구현합니다.

export class Model implements IModel {
...
}

TypeScript는 이 모델이 우리가 set and get 메서드를 도입한 것처럼 인터페이스에서 올바르게 구현되었음을 이해할 것입니다.

내부 상태를 설정하고 클래스 대신 인터페이스를 할당하여 해당 상태를 비공개로 할 수 있는 유일한 방법은

class A{
  private state:IA = ...
}

Syntax 응답의 부록으로 setter를 포함할 필요가 없습니다.getter 메서드만 있으면 됩니다.예를 들어 초기화 시 설정된 읽기 전용 변수에 사용할 수 있지만readonly이 경우 수식어를 지정합니다.

interface IModuleMenuItem
{
    name: string;
}

class ModuleMenuItem implements IModuleMenuItem{
    private name$: string;

    constructor(name: string)
    {
        this.name$ = name;
    }

    public get name()
    {
        return this.name$;
    }
}

대신 추상 클래스를 사용하십시오.

상속보다 구성.

interface AppInterface {
   app: express.Application
   port: string | number
}

abstract class AbstractApp implements AppInterface {
    app: express.Application
    port: string | number
    constructor(){
        this.app=express()
        this.port=8080
    }
    
    protected defaultMiddlewares(): void {}
}     

class App extends AbstractApp {
    constructor() {
        super()
    }

    protected defaultMiddlewares(): void {
        this.app.use(express.json())
    }
}

언급URL : https://stackoverflow.com/questions/37791947/how-to-define-a-private-property-when-implementing-an-interface-in-typescript

반응형