Classes With Private Properties in TypeScript 3.8

Finally, privacy in TypeScript/JavaScript classes

Dev by RayRay
Feb 23 · 4 min read
Image for post
Image for post
Photo by sergio souza on Unsplash

I have the feeling this was not on the radar of a lot of JavaScript developers, but for a while, we had the possibility to use private properties in our JavaScript classes (check the support section below).

In this post, I want to show you how useful private properties are in classes. We can start using it today because of the upcoming browser and tooling support.

Side note: Private properties and methods are part of a stage 3 proposal for the ECMAScript spec so it is possible this will change in the future. It is likely to be added to ES2019 (ES10).

Pre ES2015 Classes, Module Pattern

Let’s go back to the ES5 days of JavaScript.

We didn’t have any formalized module definition. We used functions smartly (we were also using RequireJS, CommonJS, and other alternatives). This gave us the ability to create some form of modules.

If you wanted to use the module you had to use it like this.

Ford.brand() // “Ford Mustang”

But we could make use of private properties and methods. To make it public you had to return everything that you wanted to use outside the module.

A lot of developers were very used to the fact of private properties and methods by default in this type of module. Check out the post by Todd Motto for more information about the module pattern.

ES2015 Classes

The launch of ES2015 (ES6) brought us a massive upgrade for the JavaScript language. I was very happy with this upgrade just like my fellow JavaScript developers.

class Foo {
bar = 10
}
console.log(new Foo().bar) // 10

JavaScript classes mostly behave like classes in other languages. They are great for re-using functionality in all kinds of ways.

I like them more than the module pattern, but I miss my private properties…

Use TypeScript Classes With Private Properties

But we don’t have to be sad anymore. Private properties are coming to TypeScript classes! To use them in TypeScript, you have to install version 3.8, which was released Feb the 20th.

npm install typescript

“Finally, something to consider is where you intend for your code to run. TypeScript currently can’t support this feature unless targeting ECMAScript 2015 (ES6) targets or higher.

This is because our down-leveled implementation uses WeakMaps to enforce privacy, and WeakMaps can’t be polyfilled in a way that doesn’t cause memory leaks.

In contrast, TypeScript’s private-declared properties work with all targets — even ECMAScript 3!” — Microsoft DevBlog

How to Make Private Class Properties

Simply by prefixing them with a #. It is that simple!

When you try to get the information from the private property, it will give an error in TypeScript.

Property ‘#foo’ is not accessible outside class ‘Foo’ because it has a private identifier.

But we can make it available by returning it via a public method. Like with everything in JavaScript.

Play with the new private properties in classes in the TypeScript playground.

Why Set Private Class Properties

The reason I would use private properties is to use the information only locally. If you’re doing all kinds of calculations inside your class, but don’t need to share it publicly, then make it private.

Browser Support

At this moment, the only browsers that support these private properties are Chrome (>74) and Opera (>66).

Image for post
Image for post
Source: CanIUse.com

If you want to use the private properties in Node.js, you have to use version 12 at a minimum. Babel supports private properties via a plugin.

If you want to read more about the awesome features in TypeScript 3.8, check out the Microsoft DevBlog.

Angular

Using private class properties inside your Angular application sounds pretty nice, but the Angular team doesn’t officially support TypeScript 3.8 in Angular 9.0. They say we have to wait until Angular 10.

But I did a small test with the TypeScript 3.8 with an Angular 9 application and it looks like it’s still running. So, I would say give it a shot.

If you have issues using Angular 9 with TypeScript 3.8, please let me know in the comments so we can update others who want to try this.

Conclusion

As you can see, setting private class properties can be pretty useful and can give a feeling of privacy. But be honest, we are at a very early stage, so it is possible that the specs will change a bit.

Thanks for reading all this way! I hope you are as on-fire about this feature as I am and have learned something new from this post.

If you have any questions, please let me know in the comments.

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Dev by RayRay

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS— https://byrayray.dev

Better Programming

Advice for programmers.

Dev by RayRay

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS— https://byrayray.dev

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store