I’ll introduce you to seven of the key benefits now so you can know why you might go with TypeScript and where it might lead you.
7 key benefits of TypeScript
- ES6/ECMAScript® 2015 Features
- Compile to ES3/ES5/ES6
One of the most significant value propositions for using TypeScript is that it offers types, which you can associate with function parameters, variables, and other aspects of your code. By this, I mean types like number, boolean, string, and array.
Your weakly typed code can also be error prone and difficult for other developers to use. Take the following function, which is intended to add two numbers, for example:
In TypeScript, we can explicitly assign types to the function parameters like this:
When we explicitly assign types, developers and IDE’s can better understand the code and that can help us avoid problems before runtime.
TypeScript also supports inheritance, so the classes you create can extend other classes and inherit their attributes. So, with TypeScript it’s possible to structure your code in a way that can make a lot more sense than the typical function spaghetti. It’s also makes it easier to to use proven object-oriented patterns.
It’s pretty simple. Here’s a class in TypeScript, for example:
We can instantiate that class using the following code:
3. ES6/ECMAScript® 2015
- Arrow functions
- Rest parameters
- Default parameter values
But wait, you say. How can I use ES6/ECMAScript® 2015 without worrying about browser support?
4. Compile to ES3/ES5/ES6
That’s right. It’s genius. With TypeScript, you can learn and use ES6, but compile down to ES5 or even ES3. And guess what. It all still works. Boom! TypeScript automatically changes your code for you. You can see this in action using the TypeScript Playground, which is shown below. In the Playground, you can enter TypeScript code on the left while watching how the TypeScript compiler transforms it on the right.
TypeScript has the ability to define code templates, called generics, that can be reused throughout your codebase and that provide great functionality. C# and Java have a similar feature you may already be familiar with. Generics provide a lot more flexibility while working with types. As a developer, you can write code that allows for multiple, but limited types. With generics you get to say, “You can use multiple types here, but not anything under the sun. I’ll let you tell me which types you want to use when calling this code, but it needs to be either a string or number.” In other words, generics allow you to write code templates that can change depending on the context of use.
To understand what I mean, take a look at the following class that simply manages a list of numbers.
Now, suppose someone comes along, looks at this code and decides they need to do something very similar. They want to manage a list of strings in the same way, so they copy the code, paste it, and change it up a bit by replacing all the number types with string types, like so…
It has been said that duplicate code is the root of all evil in software design. This, being identical or nearly identical code, you might call it careless. If you’re in a bad mood, you might even say it’s just downright sloppy and unprofessional. Generics can help solve this by allowing the same class to handle both a list of numbers and a list of strings.
An easy metaphor for understanding how this works is to look at a kind of template we’re all familiar with – a mail merge template:
Dear <name>, We have sent the info to <address>/ Thanks, <from>
I can merge values into the placeholders for this template to get a unique letter for each person on my mailing list.
With generics we can have just one function, which can be called with a specified type for the type variable. For example:
In summary, a generic is a code template that relies on type variables: <T>. This allows you to create more generalized code while ensuring that it remains type-safe at compile time.
Modules are a way to organize code into buckets with namespaces (like package names in Java). In addition to helping you avoid naming conflicts, these buckets of code can encapsulate some general functionality that is then imported and reused across your project or in other projects.
To ease this pain, you can use internal modules in TypeScript, which help you organize your code. You can also use external modules (CommonJS or AMD loading), which in addition to helping you organize code, allow you to encapsulate and share reusable functionality.
If you use Gulp, you’ve already used modules. Gulp and other Node.js applications use CommonJS to require and import modules:
You’ve heard the old programming best practice: alway program to an interface, not an implementation. Interfaces allow us to define a certain set of rules that classes must follow when they implement the interface. In this way, classes can be more easily swapped without breaking existing code and your objects can be more loosely coupled.
Following is a TypeScript example of the interface for a class and the class itself.
But not me. I like to kick ass.