How to define a private property when implementing an interface in Typescript?

Question

I'm using TypeScript in my project and I have come across an issue. I'm defining an interface like this:

interface IModuleMenuItem {
    name: string;
}

I want to create a class that implements from this interface but I want the name to be a private property like this:

class ModuleMenuItem implements IModuleMenuItem {
    private name: string;
}

I'm getting the following error:

Class ModuleMenuItem incorrectly implements interface IModuleMenuItem. Property name is private in type ModuleMenuItem but not in type IModuleMenuItem.

How can I define a property as private or protected when implementing an interface?

Interfaces are basically here to define what is public. I'm not sure you have a way to check what is private. — Blackus
– Blackus, Commented Jun 13, 2016 at 14:14

Dave Arkell · Accepted Answer · 2021-02-23 15:13:43Z

143

Interfaces define "public" contracts and as such it doesn't make sense to have protected or private access modifier on interfaces, which are more of a, let's call it, implementation detail. For that reason you can't do what you want with an interface.

If you want to make the property read-only to consumers, but overridable in a subclass then you can do something like this:

interface IModuleMenuItem {
     getName(): string;
}

class ModuleMenuItem implements IModuleMenuItem {
    private name;

    public getName() {
        return name;    
    }

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

I think in TypeScript 2.0 (not out yet) you will be able to use the readonly access modifier if you were after initialization-time readonly field - 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";
    }
}

edited Feb 23, 2021 at 15:13

Dave Arkell

3,9902 gold badges24 silver badges28 bronze badges

answered Jun 13, 2016 at 14:35

Ivan Zlatev

13.3k9 gold badges45 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ivan Zlatev Over a year ago

@Pachu To me that's the whole point of interfaces. It's to define a public contract that an implementation "conforms" to and an external component can consume without caring about how it's implemented. What you are after is more enforcing implementation behaviour, which is achieved through abstract base classes in most languages.

theMayer Over a year ago

Would someone please tell this to the creators of TypeScript? Apparently it includes private members when defining interfaces. :(

Aniket Chowdhury Over a year ago

@theMayer It is not required. You can use an abstract class to implement the interface and create another class to extend that class. This method of implementation is known as Composite. Though you would have to use protected instead of private as private cannot be re-implemented.

Aniket Chowdhury Over a year ago

Added an answer as well. Might as well have.

Hashbrown Over a year ago

@IvanZlatev sure, traditionally, but javascript, and now typescript, has always been at the forefront of what we should always have been able to do with these language structures. Here's what I think is a valid usecase for private interface members: a PRIVATE contract (interfaces, really, are to keep the programmer in line, and this doesnt in and of itself need to be public). The playground link was too big for StackOverflow, so you can click the link in the comment on that gist if you'd like 👍

|

Zach Saucier · Accepted Answer · 2023-07-08 16:14:37Z

18

I think you can do it like this:

interface IModuleMenuItem {
    name: string
}

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

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

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

edited Jul 8, 2023 at 16:14

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

answered Dec 21, 2016 at 13:32

Abdelrahman Hossam

5384 silver badges11 bronze badges

2 Comments

Moses Aprico Over a year ago

I think this is better since we can use it with getter setter. The accepted solution uses getProp() which is fine as well, but getter setter makes the code a bit cleaner.

Isaac Pak Over a year ago

How is this working for anyone? this isn't even used in the constructor.

Syntax · Accepted Answer · 2021-01-02 08:09:52Z

3

In case of having private fields in class, you need to introduce setter and get methods for that field like so:

export class Model {
    private _field: number;

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

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

And then create the interface as usual (We can not use private modifier for interface fields) like so:

export interface IModel {
 field: number;
}

Then implement it to our class like so:

export class Model implements IModel {
...
}

TypeScript will understand that this model is implemented correctly the interface as we have introduced set and get method.

answered Jan 2, 2021 at 8:09

Syntax

1371 silver badge6 bronze badges

Comments

Codetoil · Accepted Answer · 2021-12-22 16:54:29Z

2

As an addendum to Syntax's response, there is no need to include a setter. A getter method is all that is needed. This could be used, for example, for read-only variables set at initialization, though I suppose it's better to use the readonly modifier in this case.

interface IModuleMenuItem
{
    name: string;
}

class ModuleMenuItem implements IModuleMenuItem{
    private name$: string;

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

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

answered Dec 22, 2021 at 16:54

Codetoil

212 bronze badges

1 Comment

IP002 Over a year ago

Accepted answer and others didn't work for me, but this one did, thanks

Mohammad f · Accepted Answer · 2019-09-27 10:30:03Z

0

The only way you can have an inner state and assign interface to that instead of class and make that state private

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

answered Sep 27, 2019 at 10:30

Mohammad f

1,07311 silver badges13 bronze badges

Comments

Reza Hadipour · Accepted Answer · 2023-12-12 09:12:40Z

I had this issue, and I solved it in two ways that I will explain in below.

First Solution:

interface Person {
    firstName?: string
    lastName?: string
    readonly age?: number
    fullName(): string
}

class User implements Person {
    private _firstName: string | undefined
    private _lastName: string | undefined

    constructor(public firstName?:string,public lastName?: string, readonly age?: number){
        this._firstName = firstName
        this._lastName = lastName

        delete this.firstName;
        delete this.lastName;
    }

    fullName(): string {
        return this._firstName + " " + this._lastName;
    }

    introduce(): string{
        return this.fullName() + " is " + this.age;
    }
}

let Reza= new User("Reza","Hadipour",32);
console.log(Reza.fullName());         // -> Reza Hadipour       
console.log(Reza.introduce());       // -> Reza Hadipour is 32
console.log(Reza.firstName);        // -> Undefined

In the above code, _lastName and _firstName are private and work correctly, but the problem occurs once you want to delete public properties (this.firstName and this.lastName), The delete method needs optional operand, so to solve this I had to define lastName and firstName as optional properties which you can see in interface and constructor implementations. The biggest problem in this solution is the optional property lets users ignore them which should cause problems in the next. because of optional public properties, I have to define private properties with two string and undefined types.

private _firstName: string | undefined
private _lastName: string | undefined

this is so unreliable implementation!! so, I suggest the second way.

Second Solution

interface Person {
    firstName: string
    lastName: string
    readonly age: number
    fullName(): string
}

class User implements Person {
    private _firstName: string
    private _lastName: string

    constructor(public firstName:string,public lastName: string, readonly age: number){
        this._firstName = firstName
        this._lastName = lastName

        this.firstName = this.lastName = "";
    }

    fullName(): string {
        return this._firstName + " " + this._lastName;
    }

    introduce(): string{
        return this.fullName() + " is " + this.age;
    }
}

let Reza = new User("Reza","Nikpour",35);
console.log(Reza.fullName());   // -> Reza Nikpour
console.log(Reza.introduce());  // -> Reza Nikpour is 35
console.log(Reza.firstName);    // ->

In the second code, I just assets empty value into the this.firstName and this.lastName in the constructor instead of deleting them.

Aniket Chowdhury · Accepted Answer · 2020-08-07 09:47:48Z

-3

Use abstract classes instead.

Composition over inheritance.

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())
    }
}

answered Aug 7, 2020 at 9:47

Aniket Chowdhury

3634 silver badges16 bronze badges

2 Comments

mathiasbn Over a year ago

What exactly are you composing? Abstract classes are inheritance not composition

Aniket Chowdhury Over a year ago

@mathiasbn en.wikipedia.org/wiki/Composition_over_inheritance

Collectives™ on Stack Overflow

How to define a private property when implementing an interface in Typescript?

7 Answers 7

7 Comments

2 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

2 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related