Does TypeScript Improve Performance? An Overview for Software Products

If you find yourself in a situation where your application or product is starting to expand, you may consider adding additional technologies into the codebase.

When working with JavaScript, it is common for TypeScript to be suggested as a technology to improve how developers interact with the application.

For many, the benefits of TypeScript are not obvious initially, and the overhead of adding it in can be hard to justify without knowing how it can add value.

Tracking the performance is a common metric used by product owners to determine application health. This perceived value can be understood by both technical and non-technical individuals.

So, with this in mind, does TypeScript improve performance?

As TypeScript is a superset of JavaScript, there is a negligible amount of performance benefits when introducing it into a project. For the most part, TypeScript compiles into JavaScript without any significant performance compromises.

If the developer working on the project writes efficient JavaScript, this will effectively translate into efficient TypeScript. The combination of TypeScript with JavaScript can produce more code overall. This may actually have a minor impact on performance, because the browser is now required to retrieve a larger compiled JavaScript file than before.

However, TypeScript’s main benefits are not related to performance improvements of an application. The introduction of TypeScript to a project impacts various other areas of applications structure.

Let’s look at some of the main TypeScript areas and how it can improve an application.

What are the advantages of TypeScript?

So while TypeScript is not known for boosting the performance of an application, it does have significant benefits for enterprise projects that are scaling and that will have many developers working on it.

For better or for worse, JavaScript itself is a dynamically typed language. This is means that its type checking happens at run-time.

This dynamic typing means that types of variables in the program are only known as it is being executed.

Typically, dynamic type checking results in less optimised code than static type checking. During execution, the program is more likely to encounter run-time type errors, whereas this may have already been caught at compile time by static type checking (this is what TypeScript introduces).

In addition to the type checking, a dynamically typed language like JavaScript, allows a developer to write programs quicker as types do not have to be specified every-time.

TypeScript allows the developer to give types to JavaScript variables. The developer must specify the type of a variable at compile time. TypeScript also offer type inference, which means that the type system is able to work out the type of a variable.

For example, this is demonstrated when attempting to get the type of a function. The compiler can assume the return type of the function or variable based on what is being returned.

With the addition of TypeScript, static typing is enabled within a JavaScript project. Before the program is run, the types are already known and have been checked for validity.

 

In the example above, the compiler has been able to determine the return type of the function with us specifying it. In other-words, the compiler has inferred the return type for us.

Alternatively, we could also specify the return type ourselves like so:

function getArrayOfString(): string[] {
    return ['one', 'two', 'three'];
}

In this case, we have explicitly stated the return type of string[] . Both instances ensure type safety checking by the compiler and as result creates safer and more predictable code.

This gives great visibility on errors that could cause issues during execution, before the program is run.

This is very beneficial for the overall application as this compilation checking ensures that a significant amount of trivial bugs are caught in the early stages of development.

Is TypeScript still relevant?

If looking to introduce TypeScript into an already existing application, or if looking to start a new application from the ground up, it would be fair to be somewhat concerned about the current relevancy of TypeScript in today’s web applications.

After all, new technologies and trends come and go very frequently. Being caught out by a technology that is no longer being supported can cause significant business and technical implications for a software application.

Thankfully, TypeScript’s time in the limelight has not been short-lived.  In fact, there has been mass adoption of TypeScript into many enterprise level applications.

As you may already know, TypeScript was created and released by Microsoft. They are frequently supporting TypeScript with new versions and patches. Its future maintenance looks very assured with regular detailed roadmaps having been released by Microsoft.

Also not to be overlooked is Microsoft’s acquisition of Github which serves as a significant reminder that they are constantly support these types of programming technologies and tools.

We don’t have to look far to see recognisable companies leading the way using TypeScript for their own applications.

Google themselves fully implemented their programming language Angular with Typescript by default.

But many others have adapted this layer of technology in their scaled applications including:

We can also see the support of TypeScript growing in a recent Stack Overflow Survey.

It sits at an impressive 21.2%. This is a reassuring stat as TypeScript is essentially something that is added on top of JavaScript. So to have such a significant rating in technology popularity adds to its already impressive list of benefits.

Its steady growth and userbase is also reassuring for any software product team that wants to integrate it in an existing JavaScript application.

How difficult is TypeScript?

When trying to implement TypeScript into an existing project, depending on the skill level of the developers, there could be concerns about its learning curve.

It’s important to determine the overhead of implementing a layer of technology as significant as TypeScript.

In a scenario like this, there is a trade off when it comes to resources invested vs long term value of a software application.

Speaking from my own personal experience, TypeScript itself can take time to effectively learn. Implementing it into a project can be lengthy and challenging.

Thankfully, there are two key aspects which might alleviate the pain points of trying to implement it.

Incremental Implementation

When utilising TypeScript in a project, a developer has to create a new type of file (.ts, .tsx (for React) ). 

This allows a project to slowly add TypeScript into different sections of an existing application. This enables only a small amount of resources to be allocated to a gradual implementation.

The application can be broken down into subsections, which can be marked for conversion to TypeScript incrementally.

This gives the business or product some breathing room instead of having to dedicate a huge chunk of time for a full TypeScript integration.

This significance of this should not be overlooked. For many technologies, the all or nothing approach of integration acts as detterent for potential investors.

Once a product can determine the value that TypeScript can bring the ability to introduce it gradually without stopping development on other core functionality is incredibly beneficial.

Synchronous Learning

For developers on a team that are only starting to learn TypeScript, there might be concerns over picking up a new technology in already established development environment.

However, this might not be as an obtrusive process than one might think. This is because TypeScript, being a superset of JavaScript, tends to be written inline with other JavaScript code.

This means that anyone trying to learn TypeScript for the first time can grasp its typing concepts very quickly.

For example, giving static types to already familiar variables in an application is a very effective way of learning by doing.

Additionally, TypeScript is effectively giving developers the ability to document their code. Its typings provide a detailed overview of how an application’s functions, variables and data are represented and what their expected types should be.

While this has been standard practise for most strongly typed languages, the readability that TypeScript provides should be a breath of fresh air for a team of JavaScript developers.

Scaling Applications

As an existing project expands, new requirements demand brand new features. During this process previous functionality must be ensured to still work correctly.

This is a huge concern for any large application that encompasses many different features.

Using a robust testing language and suite ensures a lot of safety coverage for functionality that is subject to change. And although a lot of this safety can be guaranteed by running a wide range of custom tests, TypeScript will also throw errors for data in the code that is outside the original scope.

This will save you from breaking features of your project or application that were already working.

Much in the same way that testing provides a safety net for your current project’s functionality, TypeScript adds yet another layer of protection for your application as it grows.

Maintaining previous scope while adding new features is paramount to running a successful software product through its iterative production processes.

TypeScript gives a project another element of security in this way.

Conclusion

To summarise, TypeScript makes it easier to create large JavaScript applications. It can increase the quality and reliability of your JavaScript product or service.

An although its benefits are well highlighted, its value is not inherently recognised amongst business owners with large scale projects or applications that are constantly expanding.

However, having a codebase that is more reliable and has data that is more predictable will ultimately cut down accumulated technical debt.

It provides a much smoother experience when expanding a project and adding functionality.

This leads to saved revenue because of technical problems that are found sooner rather than later.

Keep in mind that TypeScript itself isn’t going to increase the quality of your JavaScript project. But it will provide a blanket of security amongst other benefits to an already existing JavaScript application.

If implemented from the start of a project it will catch all kinds of potential bugs and errors which will be noticed much earlier in the building process of a software business or service.

Gareth Dunne

Senior JavaScript Engineer and creator of JSdiaries. Passionate about the latest in web technologies and how it can provide value for my clients.