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 initially obvious, and the overhead of adding it in can be hard to justify without knowing how it can add value.
Tracking the performance and speed of a project 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 an application’s structure and architecture.
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 optimized code compared to 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 offers type inference, which means that the type system is able to work out the type of a variable automatically.
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 a result, creates safer and more predictable code.
This gives great visibility on errors that could cause issues during execution before the program is run. Additionally, this is very beneficial for the overall application as this compilation checking ensures that a significant amount of trivial and non-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 supporting these types of programming technologies and tools.
We don’t have to look far to see recognizable 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 are also reassuring for any software product team that wants to integrate it into 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 that might alleviate the pain points of trying to implement it.
Incremental Implementation
When utilizing 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 a deterrent 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 is considering to learn TypeScript, there might be concerns over picking up a new technology in an 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 practice 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 was 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 the 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. And although its benefits are well highlighted, its value is not inherently recognized 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 automatically increase the quality of your JavaScript project. But it will provide a blanket of security amongst other type-safe 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.