0

I'm currently studying classes in TypeScript (and I don't have that much experience in OOP).

The snippet below is from classes chapter in https://www.typescriptlang.org/docs/handbook/classes.html

Here is the thing:

I get that it should not be able to access the protected property "name" directly, as in console.log(howard.name) and I know that it should be ok to access it through a method of a derived class.

I do get an error message when I compile this on TypeScript. But the fact is that when I open the resulting JS file on the browser (compiled), I can see the output in the Console, just like if it were a public property.

Is this normal in OOP? Why bother creating classes with protected/private attributes in TypeScript if they will be accessible anyway in the JS compiled file?

class Person {
    protected name: string;
    constructor(name: string) { this.name = name; }
}

class Employee extends Person {
    private department: string;

    constructor(name: string, department: string) {
        super(name);
        this.department = department;
    }

    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // error
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
  • `department` is private to the employee so the `getElevatorPitch()` method has access to it – mast3rd3mon Jul 24 '18 at 15:03
  • 1
    The point of type script is to add more structure to JS. The compiled JS will always work differently to the Typescript, because it's not the same. If you don't want to use classes use js if you do, use typescipt and compile it to js. – Liam Jul 24 '18 at 15:05
  • 2
    Possible duplicate of [TypeScript private members](https://stackoverflow.com/questions/12713659/typescript-private-members) – jcalz Jul 24 '18 at 15:06
  • Thanks for the comment! I know. That was expected. What I didn't expect is for the JS file to display `console.log(howard.name);` which outputs "Howard" in the console. Because the name property should be protected. – cbdeveloper Jul 24 '18 at 15:06
  • Js has no concept of protected – Liam Jul 24 '18 at 15:07
  • 1
    https://zzzzbov.com/blag/private-properties-in-javascript –  Jul 24 '18 at 15:07

1 Answers1

6

Visibility modifiers (protected, private) are not there for "security" or to "hide" anything. It won't protect data from being accessed. What it's there for is to establish safe interfaces for your classes/objects. If you classify something as public, that means other code can be written against that property. That means that property should preferably not change in the future or you risk breaking other code. protected and private properties are much more restricted in where they can be used from, which gives you better guarantees for what will break when you change them and who will be messing with those values.

Javascript itself does not have any notion of visibility modifiers, it's all public in Javascript. Those are only enforced at the time of Typescript compilation, at which point you'll be notified if you're violating your own contracts. But that check does not exist at runtime.

deceze
  • 510,633
  • 85
  • 743
  • 889
  • 2
    Started writing my own answer but you beat me to it, just wanted to add: In most languages the `private`/`protected` constructs are just language deep. In both C# and Java you can use reflection to get around them, granted JS makes it easier to do this but not by much. – Titian Cernicova-Dragomir Jul 24 '18 at 15:08
  • 3
    In virtually all languages, it will all end up in memory at runtime anyway, from where it can be read plainly. `protected`/`private` has nothing to do with making anything inaccessible in any language I know of. – deceze Jul 24 '18 at 15:09
  • 2
    I think the magic word you might be missing here is [encapsulation](https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)). Ultimately that's why these things exist. – Liam Jul 24 '18 at 15:15
  • I agree! encapsulation it the word. Found this: https://www.intertech.com/Blog/encapsulation-in-javascript/ – cbdeveloper Jul 24 '18 at 15:27