Create Private Class Fields Using TypeScript's private Modifier

Instructor: [0:00] In this lesson, I want to compare and contrast different ways for working with class fields in TypeScript. Let's have a look at this counter class. It defines a field called value, and it exposes a method for incrementing the current value as well as a getter for retrieving the current value. I'm going to create an instance of the counter class. I'm also going to call the increment() method a bunch of times.

[0:29] Now that we've incremented the counter a bunch of times, let's go ahead and log the current value to the console. I'm going to open the terminal. First up, we're going to compile our project, and then I'm going to execute the index.js file in Node. As you can see, we're getting the value 3 because we've incremented the counter three times. So far, so good.

[0:52] Note that the name of the value field begins with an underscore. This is a commonly used naming convention in JavaScript, which is meant to tell us that this property is meant to be private and that we're not supposed to be changing it outside of the counter class. However, this really is just a naming convention.

[1:10] Even outside of the counter class, I can access the value field, and TypeScript even suggests it to me in the autocompletion list here. If we wanted to assign a completely non-sensical value here, we could. What can we do to prevent assignments like these?

[1:27] One thing we can do is to add TypeScript's private modifier to the field declaration. Now we're getting a TypeError in line 18. TypeScript is telling us that the property value is private and that we can only access it from within the class counter.

[1:42] The TypeScript compiler will now warn us about inappropriate usages of the value prop, but it won't prevent inappropriate usages at runtime. The private modifier doesn't give us any actual protection.

[1:54] It's very easy for someone to get around this TypeError. For example, someone could simply add a @ts-ignore comment in the line above, and now the TypeError goes away.

[2:05] Alternatively, you can also use the index notation to access the value field. As you can see, TypeScript even suggests it here. This is kind of an escape hatch by the compiler. We can access the field with a private modifier outside of the class it is declared in. If I now run the program again, you can see that the private modifier didn't give us any protection at runtime.

[2:30] All right. Let me summarize the private modifier. If we add TypeScript's private modifier to a class field, the compiler is going to give us a warning if we use that field outside of the class. It does not have any runtime impact. The generated JavaScript code is going to behave exactly the same as if we hadn't added the private modifier.

[2:50] The most important thing to remember is that the private modifier does not give us any privacy at runtime.