Introduction To Typescript – Part II (Debugging, backtick and linting)

So we are moving ahead, with next set of Typescript lessons. The topics discussed in the Part-I focus on Typescript configuration and basic familiarity. The series now progress with experience from real-life project development and my struggle to make sure deliverables meet the quality standards. It is often very easy to develop something and be contained with the thought that we met the expectation. In reality usually what you have created may last for the next 4-5 years. Thus, it is our moral responsibility to adhere to standards.

Tools of Trade
Tools of Trade (Photo by Todd Quackenbush on Unsplash)

Backtick (a.k.a. Template Literals)

If I ask you a question that how many times we have to construct a message with a combination of variables and expression(s) clubbed with text, definitely the answer will be a lot. Be it simple expression like following

String greeting = “Hello ” + userName;

Notice that plus symbol, staring at you and somehow hinting, your messages are nothing without me. You need me every time, to construct something dynamic.

I was never comfortable with those multiple plus signs. It’s like you are trying to stitch broken pieces. 

Java developers will quickly say that “Hey carbonrider, we don’t do that, we have an elegant way – System.out.format, System.out.printf and String.format…” Ok, enough Guys, I know (I am also a Java Developer :P).

For a long time, I continued to curse JavaScript as why they don’t have something similar. What I didn’t know, that there exists a solution and it was known as Template strings, which was later renamed as Template literals

Linting

I remember my early days of coding. There was always a rush to churn out as much code as possible in the least possible time and deliver the things quickly. I never even imagined what it takes to write readable code. Most of the projects in my early career phase had only one developer – that was me.

Clients were happy with the output but my struggle with incorporating changes grew day by day. I realized that after a certain time period, I couldn’t even recognize my own code. There was no uniformity, the classes and members had dangling scopes, the variables and functions were named without any conventions, logging statements were lying all across the code and … I must stop.

This is not only a problem with one specific language. In day to day development – teams usually consist of at least 3-4 developers. Each of them from different competency level.

One may be efficient in writing beautiful code while another may struggle with basics.

But an experienced programmer always knows how to balance the situation. In the programming world, we are blessed with tools which help us to introduce code uniformity.

Java developers already know about – Checkstyle, PMD, SonarQube etc. Having spent most of my career in Java Development, I felt strong urge to look for a similar tool in Typescript. And this led me to explore TSLint.

Debugger

One feature in every language that I have coded till now, which saved me every time from all those horrible situations, I could never imagine what I would have been doing without that – Debugger.

Writing code always leads to a situation, wherein a programmer requires an extra help from the development environment to identify why things are not working as expected. I remember how I used to add those ugly log statements throughout the code which used to clutter my output. And later it used to become an exercise to remove all those funny lines.

I couldn’t contain my happiness when I first came across a debugger in Eclipse. It was nothing less than superpowers. I almost felt like I am one of those who can either fly, jump from building to building… Oops, that’s a bit of exaggeration, coming back to reality.

Coding in JavaScript is fun, but when you are stuck in a situation when you don’t know what is happening, you can quickly ask for help from tools like Google Chrome or Firefox. Back in the early days of my career (around 2003), we didn’t have that kind of luxury. The open source browsers definitely brought the revolution to how we code in Javascript.

But with transpiled development approach, how can we make use of Debugger. Did you understand what I meant to say? The language we code in (Typescript) is different than what gets executed in the browser (Javascript). How can debugger map the output with source language? Well, our stars are really shining well. Typescript compiler does provide a configuration to generate additional metadata to hint runtime engine to link execution with source code – SourceMaps.

Watch this space to see how we reveal magical powers of Typescript. Till then, keep practicing examples from the video and post your comments with suggestions, improvements.

Be Sociable, Share!

Leave a Comment.