Angular 2 / Ionic 2: The Why and How of Typescript / ES6 Getters and Setters.

Also, the why and how of dividing components and services.

This article assumes a basic understanding of Angular / Ionic 2.

Author’s Pointless Ramblings:

I just switched to the version 2s last week and I’m loving Typescript so far. I sharpened my teeth on Java, so TS is like slipping into a cozy pair of pajamas with a hot cup of cocoa for me. Today I discovered the TS support for getters and setters and am very happy with it.

After I wrote this, I scanned chapter 4 of this fantastic JS ES6 book. I realized that Typescript is just making ES6 fully available now with less headache. If TS is the future of JS, I’d say the future looks bright.

Actual Useful Information:

Getters and setters are an excellent design pattern. They let you create advanced reactions to simple variable assignment and retrieval. This can be used to preprocess data and create security restrictions among other clever things. Typescript has getters and setters baked right in, allowing them to work invisibly behind the scenes.

I’m currently building an app based on the “Pomodoro Technique®️” so I’m going to use that as an example.

On the settings page I have the ability to change the length of the standard pom timer, the short break timer, and the long break timer. Let’s start simple and refactor.

Revision 1 of my settings.ts component:

If you’ve spent any time with Angular / Ionic 2 this should look pretty standard. However, I don’t want to store my my timer lengths in minutes, I want to store them in seconds. I still want the user to see the times in seconds though. I’m going to add some getters and setters to make this dead simple.

I added underscores to the real variables because TS considers the getters and setters as duplicates if you don’t. You can also get some stack size exceeded issues if you don’t. (This isn’t Ruby after all.) I set the variables directly with the underscores in the constructor. And I added the conversion math to each getter and setter. As an added bonus, using getters and setters means you won’t ever need to separate your ngModel declarations to add 2-way data binding.

Without getters and setters:

<ion-range min="15" max="60" step="5" snaps="true" [ngModel]="pomLength" (ngModelChange)="updatePomLength()">

With getters and setters:

<ion-range min="15" max="60" step="5" snaps="true" [(ngModel)]="pomLength">

For my next trick, I’m going to move the variables out of the Component and into a Service. I’m doing this for the following reasons:

• Components should be kept as light and simple as absolutely possible.
• I’m going to want my data stored in a database eventually and a service is the right way to do that.
• Services can inject each other (sounds dirty), allowing them to share data as needed. That can be used so the timer knows how long it’s supposed to run for example.

First let’s create a service (in Ionic it’s generated as a Provider) to handle the data.

This may seem like overkill on such a simple service. As the service grows more complex however, the benefits will be huge. For example, if we’re interfacing with an API, we can PUT or POST data from the setters. And the getters can strip out any unneeded or private JSON.

Let’s also update our Component.

In this change I imported ServiceSettings and injected it with our constructor. I stripped out all variables from this class. And I changed the getters and setters to reference the settings instead of local variables.

If it wasn’t obvious before, you can see here that getters and setters look and work just like regular variables to the outside world. This means that we don’t need to think about separate functions for saving and retrieving data. This also means that the View doesn’t have to know about the settings service to access the service data. And we don’t need to duplicate settings data inside our Component to keep our View oblivious and our code clean.

Coming up Next:

I’ll be showing how to use this information to bring back 3-way binding (that sounds dirty too) to Angularfire 2 in a simple and elegant way.