An Introduction to TypeScript
Tags: typescript, frontend
Published: 2023-01-31 18:28:11

The [front end](https://en.wikipedia.org/wiki/Front-end_web_development) is a very broad aspect of programming. We've all heard of popular languages HTML, CSS, and JavaScript, but there's more; we have TypeScript. In this article, we're going to talk about TypeScript and take a look at its pros and cons.

## Typescript Overview

TypeScript is a variant of [JavaScript](https://en.m.wikipedia.org/wiki/JavaScript), which is constantly evolving and one of the most widely used [programming languages](https://www.northeastern.edu/graduate/blog/most-popular-programming-languages/). Due to its popularity and continuous evolution, JavaScript tends to get messy, and as a result, it can be difficult to maintain and reuse code. Another problem with JavaScript is that it doesn't work with [object-oriented programming](https://www.turing.com/kb/object-oriented-programming-help-the-developers-to-code-better), nor does it include compile time or [strong type](https://en.wikipedia.org/wiki/Strong_and_weak_typing) checks. Because of this, JavaScript cannot succeed at the enterprise level for full-fledged server-side technology. TypeScript was created to solve these issues.

Typescript is a free, open-source programming language that was developed and is maintained by [Microsoft](https://www.microsoft.com/en-ng). It strictly follows the rules of JavaScript. In addition to sharing syntax, it also offers [static typing](https://developer.mozilla.org/en-US/docs/Glossary/Static_typing#:~:text=A%2520statically%252Dtyped%2520language%2520is,not%2520indicate%2520their%2520variable%2520types.).

## How is Typescript Related to Javascript?

The major aspect TypeScript brings to JavaScript is that it adds additional syntax, allowing developers to add types. In simpler terms, TypeScript adds a type system to JavaScript.

JavaScript is [dynamically typed](https://www.smashingmagazine.com/2021/01/dynamic-static-typing-typescript/). A variable can carry a text, a number, a database entity, and more. However, it doesn't strictly define what an allocated variable can contain. That's where TypeScript comes in.

After a developer has created a function and has used types to define the number of variables the function can contain, TypeScript shows an error if someone else tries to increase the number of variables in the function.

## Pros of Typescript

### Static Typing System

Since JavaScript is a dynamically typed language, the types checking and datatype error detection only happen at runtime. [Runtime type checking](https://blog.logrocket.com/methods-for-typescript-runtime-type-checking/) brings flexibility and makes program components adapt and change immediately. This is a good thing, but for a larger project and team, this could pose a problem, because it leaves the code prone to mistakes.

In contrast, TypeScript provides static typing. With this, a variable assumes only one type and can only contain specific values. Static type gives the code a solid structure, so the code documents itself and is more readable. In addition, [refactoring](https://www.jetbrains.com/help/webstorm/specific-typescript-refactorings.html) and [debugging](https://levelup.gitconnected.com/debugging-typescript-3b3aaf059f76) are faster, leading to fewer errors in code and better performance when executing code.

In this way, TypeScript helps you find a balance between flexibility and correctness, allowing you to change the level of type strictness at any part of the project.

### Predictability

TypeScript is predictable; every value stays the way it was defined. If a variable is defined as an object, it remains an object. As a result, everything works as intended.

### Speedy Refactoring

[Refactoring](https://www.jetbrains.com/help/webstorm/specific-typescript-refactorings.html) is a necessary aspect of codebase maintenance. It becomes a problem when refactoring is carried out and it affects the behavior of the updated app. With TypeScript, however, these issues are less likely to happen. The [IDEs](https://www.redhat.com/en/topics/middleware/what-is-ide#:~:text=An%2520integrated%2520development%2520environment%2520(IDE,graphical%2520user%2520interface%2520(GUI).) have studied your code and know how it functions, so navigation tools are made available for you. One example of these navigation tools is the "find all reference" tool (or go to definition).

In addition, TypeScript is fast at identifying mistakes (like changing the name of a function and forgetting to apply the change on all instances of the function being used). This is particularly beneficial when handling a large number of codebases.

### Large Community

TypeScript has a steadily growing community. It is used by big-shot companies like Microsoft and as well as designers of popular software packages like [Slack](https://slack.com/). TypeScript is loved by many, and you can be sure to get assistance from the community.

### Cross-platform and Cross-browser Compatibility

Any software that works with JavaScript can work with TypeScript. It’s that simple. A compiler (IDEs or editors supporting TypeScript come with compilers) converts the code into [Vanilla JS](http://vanilla-js.com/). The TypeScript conversion process is done by adding a configuration file named `tsconfig.json` to the correct root directory of a part of the codebase or the entire app.

### Good IDE Support

Editors and Integrated Development Environments ([IDEs](https://www.redhat.com/en/topics/middleware/what-is-ide#:~:text=An%2520integrated%2520development%2520environment%2520(IDE,graphical%2520user%2520interface%2520(GUI).)) have improved functionality because with TypeScript, they have information about types. As a result, accurate suggestions and feedback are provided while you type your code. This gives you neater code, fewer errors, and increased productivity.

### Supports Object-oriented Programming (OOP)

Class-based [Object-oriented Programming](https://www.techtarget.com/searchapparchitecture/definition/object-oriented-programming-OOP) (OOP) principles are supported by TypeScript. OOP helps to organize code as it grows.

### Self-expressive Code

Using strict types and other components makes codes self-expressive ([syntactic sugar](https://www.techopedia.com/definition/10212/syntactic-sugar)). Self-expressive code is readable, and the intent of the developer can be easily understood. This is particularly beneficial for projects between team members.

### Increased Teamwork

TypeScript allows team members to carry out their tasks without relying too much on each other. Dependency on team members can be a problem because it slows down progress and questions a programmer’s expertise.

TypeScript offers helpful pointers that help you solve your problems faster. Thanks to its self-expressive code, you can easily understand another developer's project.

In short, TypeScript increases the performance of individual developers and the entire team as a whole!

### Identifies Bugs Early

According to researchers, TypeScript detects 15% of bugs at the compile stage. (Also, passing the code through a compiler reduces the amount of quality assurance and testing activities). Although it isn't much, this feature goes a long way because it allows developers to spend time correcting [logic errors](https://www.techopedia.com/definition/8122/logic-error) instead of finding common bugs.

## Cons of Typescript

### Bloated Code

Although synthetic sugar and type annotations make code easier to read, they can cause other problems.

- The amount of code increases in TypeScript, and in turn, it can slow down the development process.
- When there is an increase in type annotations, the TypeScript file becomes larger than one written in plain JavaScript.


This shouldn't pose a lot of problems because in the end, transpiling will cause the extra lines of code to disappear. The browser will execute the plain JavaScript because it cannot interpret TypeScript code.

### Faux Static Typing

Since TypeScript is eventually transpiled into plain JavaScript, there is no true static typing.

### Complicated Typing System

Since TypeScript works alongside JavaScript so closely, it leaves room for complications because the typing system can be too complex to use properly.

### An Additional Language to Learn

Although TypeScript is similar to JavaScript, there are still aspects of it that need to be learned. This requires an investment of time and effort, and may affect a developer’s productivity while learning TypeScript.

### Typescript Alternatives

If after reading this analysis, you decide that TypeScript isn't the language you want to add to your skills, here are some good alternatives:

- [CoffeeScript](https://coffeescript.org/)
- [Dart](https://dart.dev/)
- [Elm](https://elm-lang.org/)
- [Babel](https://babeljs.io/)
- [Kotlin](https://kotlinlang.org/)
- [Golang](https://go.dev/learn/)
- [Elixir](https://elixir-lang.org/)
- [Python](https://www.python.org/)


## Conclusion

TypeScript is a wonderful problem-solving tool, and its benefits outweigh its disadvantages. It makes teamwork easy and can improve productivity. Now, after learning more, are you interested in learning TypeScript? Hopefully, this article has been helpful and you're better able to answer that question.