Angular and TypeScript basics — Custom Pipes

Last post, we added some basic pipe information to my http://www.kritner.com/solar-projection page. I noticed that due to the way my array worked, starting at index 0, the data in the table shows the first year as “year 0”. Yes, I could change several places in the code to start with index 1, update the calls to the compounding interest to use index — 1, etc, but that seems like a PITA. Surely we could just do a custom pipe to apply to the year column of our table, that returns the original number +1, right?

So custom pipes, will allow me to write my first function in TypeScript, woohoo! I’ve never been a fan of JavaScript, so TypeScript sounds pretty great considering it (seemingly) C#-ifies JavaScript. More info at http://www.typescriptlang.org/. Note — I say the first function I write, because it really is — the bit of typescript displayed in previous posts was just interface declarations and/or information that was a part of the prebuild dotnet net angular template.

Starting from https://angular.io/guide/pipes#custom-pipes as a base, I can see the custom pipe needs to implement a PipeTransform The complete example is (as of writing):