JavaScript is the most popular programming language in web development environments. It has dynamic typing, a fairly simple and understandable syntax, plus it is very widespread both in old projects and on new sites. And for some tasks in development, there are no alternatives other than JavaScript. However, in 2012, Microsoft decided to develop a new programming language based on it – TypeScript. Although the syntax and, in some places, the logic of the work of both languages are similar, they have some serious differences. Next, we will consider why it was necessary to create a separate programming language based on familiar JS, whether a web developer should study it, and in what projects it will have to be used.
Why Create TypeScript
TypeScript “derived” from the popular JavaScript, although it has been heavily redesigned. At one time, the first versions of JS appeared back in 1995. Initially, it was not intended for large projects. The main task was to embed small scripts on primitive HTML pages. Over time, productivity and throughput increased and it became possible to make more advanced scripts for video players, registration forms, and so on on sites.
The projects facing the developers also became more complicated. Over time, the advantages of JavaScript began to grow into its disadvantages. Dynamic data typing has become such a feature. This means that as the code was executed, the data typing changed automatically, adjusting to the most correct type. This feature simplifies development in the early stages, but creates non-obvious bugs in large code that often take too long to fix. In the early 2010s, it became clear that a new JavaScript-based tool was needed that would be devoid of the main shortcomings and controversial points of its parent. After 2 years, Microsoft introduced the first version of TypeScript.
TS is positioned by its developers as a language for developing websites and web applications with advanced features of regular JavaScript. At first, the language was used primarily for working with Microsoft products, but soon began to spread among other developers. So, by 2017, the language entered the top 10 most popular, and in 2021 it almost caught up with JavaScript, becoming the fourth most popular.
However, Type- and JavaScript are different programming languages and their scope of application is different.
JavaScript or TypeScript: what to choose
Both languages have their adherents. In theory, most tasks that can be done with JavaScript can just as easily be done with TypeScript. The converse is also true. However, for different tasks, it is better to use different languages, since the task must not only be completed, but it must be done efficiently and also so that nothing needs to be corrected in the future.
Next, we will take a closer look at the distinctive features of both languages and how they affect the development process.
Differences in typing
This is the most important and obvious difference between these two programming languages. JavaScript is dynamic, TypeScript is static. And what does this mean, let’s look at specific examples.
Suppose you are developing a calculator for a website. It requires a function responsible for adding a number and operating on it. Suppose you have written this function. As an argument, it will take a number from the user, because in most calculators, operations are carried out precisely with numbers. But what happens if the user suddenly enters text? All code will “break” and you will have to reload the page in order for the calculator to work again. Such is the situation with JavaScript.
Yes, you can set additional conditions in the code that prohibit the user from performing certain actions or entering data that can “break” the entire code. However, this requires additional time and testing.
In the case of TypeScript, the user simply cannot enter another data type than a number, since this is the type used throughout the function. True, the user will not receive any message by default – the action simply will not be performed, but the code will not break. Additionally, you can write different warnings for such cases, but this is not necessary, since it does not affect performance in any way. True, in the function code, all variables will have to set data types. It’s not too difficult, but it can be tedious when writing large volumes.
By the way, in JavaScript it will not necessarily crash in execution. The code can be executed even if the user enters incorrect data. However, the result will not be exactly what the user expected to receive.
This feature is associated with different logic for performing typing. For static ones, all data types that the program or function will work with are already predefined. If you try to use another data type, if it cannot be adapted to the specified type, the program simply will not run further. In the case of dynamic typing, data types do not have to be specified in the code, as they will be adjusted automatically. This saves a little time and simplifies development a little, but increases the likelihood of errors.
Code review
Differences in typing also affect the code review process. In JavaScript, this requires running fully written code. This approach creates additional difficulties – errors are easier to detect and eliminate at the writing stage. Here you can check the code by functional parts, but this is not very convenient, especially if the functions in the program are too interconnected. Plus, a bug that occurs can “break” the entire code, making it harder to find other potential bugs.
With TypeScript, everything is easier – you can check individual pieces of code right in the editor. And all this without the need to run the program itself. So you can be sure that the check will not be affected by the execution of other functions and you will get the result exactly for the piece of code you are interested in. The simplified check became possible just thanks to static typing.
Compatibility between languages
Since TypeScript takes JavaScript as its basis, both languages are compatible with each other. This is very convenient, as it allows you to work with a variety of web projects without any problems. TypeScript can be easily compiled to JavaScript. True, reverse compilation is impossible without the use of additional tools.
This feature of TypeScript allows you to use it even when working with projects originally written in JavaScript. The developer can gradually replace the old code by preconfiguring the compilation.
IDE Support
An IDE or development environment helps make it easier to write code. Unlike conventional text or code editors, they have many useful features for the developer: code navigation, syntax highlighting, error correction recommendations, built-in compiler and debugger. Using full-fledged IDEs not only makes the programmer’s work more comfortable, but also improves the quality of the finished code.
TypeScript supports most popular development environments and code editors. Among them: WebStorm, Visual Studio Code, Atom, Eclipse and others. If they don’t have support enabled by default, it can easily be added using third-party free plugins.
TypeScript full OOP
This means that code written in TS will have support for such basic components as: classes, inheritance, interfaces, arrays, objects, and much more. The concept of OOP makes it easy to create well-organized, scalable code, making TypeScript a great choice for growing projects.
Refactoring and Lightweight Code Working
Refactoring is the process of improving code while developing or maintaining an existing project. In fact, its main task is to improve readability, facilitate support by other developers. At the same time, the functionality should not change in any way – the program or part of it works the same as before. TypeScript is doing great in terms of refactoring due to:
Better readability compared to JavaScript. This is achieved by reducing the volume of lines, which not only allows you to write less, but also makes the code more logical and structured. Plus, with the right approach to naming, there is no need to draw up detailed documentation – the names will speak for themselves.
Excellent IDE compatibility. Due to the fact that errors and syntax are highlighted automatically, it is very easy to make changes to the project.
There are built-in hints for some common mistakes. For example, you changed the name of a function, but forgot to replace it in other places where it occurs. Since other program components will refer to a non-existent function, an error will occur. IDEs that support TypeScript warn of such gaps, which allows you to quickly make changes to all names.
Disadvantages of TypeScript
The features discussed above are more likely to be the advantages of TypeScript. However, it has its drawbacks, which also need to be considered.
- Need subordination
Yes, TypeScript allows you to deal with the basic typing problems inherent in JavaScript. However, this is relevant for developers who are ready to spend time describing data types for each variable and function. Yes, in TS you cannot bother with this much, just putting down the any type everywhere. True, if you put it everywhere indiscriminately, there will be no special advantages over JavaScript.
If we are talking about a development team, then it would be nice if it develops its own coding standards and begins to conduct regular code reviews. This way it will turn out to reveal all the possibilities of TypeScript to the maximum.
- Incomplete control over data types
As long as you are working in a development environment or testing a project on your computer, you will be fine. But here the project needs to be uploaded to the server and before that, convert TS to JS. This means that if arguments of the wrong type are passed from the server, this can still lead to errors in the code. True, their probability and severity will still be lower compared to code that was originally written in JavaScript.
- Difficulty using third party libraries
Despite excellent compatibility with JavaScript, compatibility with its libraries leaves much to be desired. In order for them to work normally with a TS project, you need to optimize their code. Yes, popular libraries are also optimized for TS, but less popular ones are unlikely to be supported. However, the existing libraries, and the general functionality of TypeScript, are enough for comfortable work on most projects.
What’s next for TypeScript
Experts agree that TypeScript will continue to evolve, plus more and more projects will appear on it. In the foreseeable future, it will not supplant JavaScript, since this language is also developing and at the same time has a serious position in the market. However, the demand for professionals who own TS will grow. Perhaps in the future the paths of Type and Java scripts will diverge and languages will begin to develop independently of each other and will be used for a different range of tasks. True, in the next 5 years a good web developer will have to be equally proficient in both programming languages, since the range of their application remains approximately the same.
It’s also possible that the next JavaScript update will make major changes, making it a better option than TypeScript. Consequently, the need for the latter will disappear for natural reasons. True, such a scenario was predicted back in 2012, but after 10 years, nothing like this happened. It is unlikely to happen in the near future.
How to install typescript
It, unlike JS, will not work normally without first installing certain packages. First you need to install Node.js. In general, all web developers should have it, as it is necessary to support many tools. Node.js is installed by analogy with regular programs: go to the official website, download the required version and install it like a regular program.
Along with Node.js, the npm package manager will be installed on your computer. With its help, TypeScript is installed:
- Open npm panel in terminal. This can be done even in the code editor by simply launching the built-in terminal.
- Write the command there: npm install -g typescript and press Enter to apply.
- Wait a while for the packages to install. You will not receive completion notifications. You can verify that the installation is correct using the tsc -v command. After executing it, you will see the current version of TypeScript on your computer.
Conclusion
Knowledge of TypeScript will be a strong advantage for a web developer in the market. This programming language is based on JavaScript and is only slightly inferior to it in terms of prevalence. It also means that if you know how to work with JS, then switching to TS will not cause any noticeable difficulties for you. If you are just starting to learn web development, then it is better to learn javaScript first, and then start learning TypeScript.