Many developers have heard of TypeScript, but oftentimes, those in development only have a limited understanding or knowledge of it. With its growing popularity and usage in both startups and enterprise giants alike, learning TypeScript is becoming more and more important in a competitive software development landscape. Before diving in and building another “Hello, World!” application eager to collect dust, take a minute to learn the history of TypeScript, how it works, and its pros and cons.
A Brief History of TypeScript
Photo by Joanna Kosinska on Unsplash
TypeScript is a programming language that is a strict syntactical superset of JavaScript, which means that any valid JavaScript code is also a valid TypeScript code. Thus, if one is familiar with JavaScript, picking up and using TypeScript is easier than learning a completely unrelated language.
TypeScript was developed and is still maintained by Microsoft, and it was originally released to the public in October 2012 with the primary goal of bringing the benefits of static typing to JavaScript. Fairly soon after its release, there was excitement around the new language, but there were also some criticisms that it lacked support in IDEs, build tools, and linters. However, over the years, TypeScript has grown in popularity and is an integral tool in many development environments.
How TypeScript Works
Photo by Laura Ockel on Unsplash
One of the main purposes of TypeScript is to add optional static typing to JavaScript. One may specify what data type a variable exists as and the TypeScript compiler will check that the values assigned to that variable are of the correct type. For example, you can declare that a variable is of type number, and the TypeScript compiler will throw an error if you try to assign a string value to that variable.
In a development environment with full TypeScript support, assigning invalid values to variables is a thing of the past. Note, the example code above shows some typical variable definitions in plain JavaScript and contrasts those with similar variable definitions in TypeScript with type annotations. To add a type annotation to a variable, simply add a colon (:) and the type you wish the variable to adhere to. Lastly, you'll notice that when we try to assign a value with a type other than what is declared, the linter statically analyzes the code and raises an error.
Static typing can help to catch and prevent bugs in your code by identifying type mismatches at compile time, rather than at runtime, which can give you more confidence in your code by adding another layer of testing. It can also improve code readability and documentation by making the intent of the code clearer. TypeScript also provides static type support for features such as classes, interfaces, and modules. These features can make it easier to write object-oriented code and to organize and maintain large codebases.
The example code above illustrates how one may use interfaces to provide type annotations for object data structures, how they are extensible using an inheritance-style pattern, and how interfaces provide the same static analysis of simple variable definitions but to more complicated structures.
TypeScript can be used with a variety of front-end and back-end JavaScript platforms, such as Angular, React, and Node.js. It is compiled to JavaScript code that can be run in a web browser, on a server, and even in native applications. To use TypeScript, you will need to install the TypeScript compiler and set up a tsconfig.json file in your project. Then, you can write your code in a .ts file and use the TypeScript compiler to transpile it to JavaScript.
Overall, TypeScript is a powerful tool that can improve the reliability and maintainability of your JavaScript code. It is especially useful in large-scale projects where codebase size and complexity can make debugging and maintenance more challenging.
The Pros and Cons of Typescript
Photo by Scott Graham on Unsplash
Even though TypeScript is widely regarded in high esteem, it still has limitations and expectations should be established early. By knowing the general limitations ahead of time, you’ll have the proper perspective to make an informed decision about the positive aspects of TypeScript.
The Cons of TypeScript
- Additional setup
TypeScript typically requires more initial setup and configuration than a plain JavaScript development environment. Such as additional learning on top of JavaScript, compiler setup, and additional errors to understand to name a few. - TypeScript can be complicated
For some, TypeScript can be seen as overly complicated. The typing system is definitely a plus, but it can sometimes cause confusion and can lead to a rabbit hole of type mismatch errors, especially when trying to implement it in an existing codebase. - False sense of security
Because TypeScript has additional checks and linter warnings, developers can sometimes over-rely on the static typing from TypeScript and think their code is more robust than it actually is. - Bloated code
All of the additional features that make TypeScript great also cause potential downsides in regard to file size and lines of code. It often takes many more lines to write the same code as compared to vanilla JavaScript. Additionally, writing more lines can take longer and sometimes slow down development.
The Pros of TypeScript
- Type annotations
Type annotations are the feature that arguably makes TypeScript as great as it is. Being able to explicitly declare what type something should be is at the core of what makes TypeScript so useful. As we write code and define what data type a variable is or what data type we expect for a parameter, we will have the confidence that everything stays as we define it. - Structural typing
JavaScript allows you to do all sorts of strange things, so being able to fully define the types for entire structures is a huge plus. Whether you’re working with classes, deeply nested objects, or even imported modules, you can declare the type limitations for every aspect of those complicated structures. - Type inference
TypeScript will provide implicit typing so that developers don’t actually need to declare types everywhere it’s possible. Understanding when and where to assign types can be tricky when you’re first getting started, but once you get a feel for type inference your development velocity will increase dramatically. - Readability
Due to the descriptive nature of declaring types in TypeScript, if done correctly, code written in TypeScript becomes self-expressive. In other words, developers can see the design intent of the code they are reading or writing (i.e. the code speaks for itself) with less reliance on comments andoverlyDescriptiveAndAbsurdlyLongVariableNames.
My Experience With TypeScript
Photo by John Schnobrich on Unsplash
My experience with TypeScript hasn’t been particularly unique, and I know that many people have shared my experiences with TypeScript because many JavaScript codebases end up transitioning to TypeScript at some point.
I began to work in TypeScript when I started working for my current employer, my first software engineering role after graduating from HackReactor bootcamp. I had some minor prior experience with it and did some additional research before I started the job, but it wasn’t until I started working with it day to day that I began to truly understand TypeScript. My initial impression was, “This looks like JavaScript but there is a lot of additional syntax that I don’t quite understand.” For those of you who are familiar with Spanish, it is similar to the relationship between Spanish and Italian: between the two you hear a lot of familiar-sounding words intermixed with a lot of other words that don’t register anything. It’s as if you understand half of what is being said but can’t get the complete picture of what is being conveyed. Needless to say, it was confusing at first and required me to go extra slowly and look up things constantly. Once I understood the syntax rules the puzzle pieces started to fall into place and I was beginning to understand how to use my prior JavaScript knowledge as a foundation.
Spotlight You really need to understand how you want your data to transform and the rest of TypeScript will start to make sense.
One of the things that helped me become more comfortable with TypeScript is realizing that I really need to know what type of data will be required or passed through. Having the mindset of “this will take in something and do this” is too vague and is not going to be good enough. To be successful you will need to know what “something” is and exactly what you intend to do with it. Because that may work for a function or two but as you move through the codebase, if things aren’t properly typed, you’ll run into errors and a lot of headaches, eventually. You really need to understand how you want your data to transform and the rest of TypeScript will start to make sense.
Conclusion
TypeScript is extremely useful, and if you have prior JavaScript experience, it should be relatively easy to pick up and get started. I find it highly valuable in regards to encouraging developers to think critically about how their code is going to work and what pieces are needed at each step, thus forcing them to develop a deeper understanding of the process as a whole. I understand that some will think that spending all that time analyzing is a downside, but in my opinion, this time is an investment and it will reward you later with fewer errors and bugs down the road.
Originally published at codingbootcampguides.com by Mike Ortiz.