1. ホーム
  2. reactjs

[解決済み] Typescript でインターフェースを実装する際に、どのように private property を定義するのですか?

2023-06-13 22:24:27

質問

プロジェクトでTypeScriptを使っているのですが、ある問題に遭遇しました。 以下のようなインターフェイスを定義しています。

interface IModuleMenuItem {
    name: string;
}

このインターフェイスを実装したクラスを作りたいのですが、名前はこのようにプライベートプロパティにしたいのです。

class ModuleMenuItem implements IModuleMenuItem {
    private name: string;
}

以下のようなエラーが出ています。

クラスModuleMenuItemは、間違ってインターフェースIModuleMenuItemを実装しています。 プロパティ名は、ModuleMenuItem 型では private ですが、IModuleMenuItem 型では private ではありません。 IModuleMenuItemではありません。

インターフェースを実装する際に、プロパティをprivateまたはprotectedとして定義するにはどうしたらよいですか。

どのように解決するのですか?

インターフェースはパブリックコントラクトを定義するものであり、そのために 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(まだ出てません)では、このように readonly アクセス修飾子が使えるようになると思います。 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";
    }
}