You may have heard of TypeScript whether you are a JavaScript or React developer or even a newbie. It is said to be a superset of JavaScript.
What does it mean by a superset?
This really means that TypeScript includes all the features of JavaScript and extra features on top of it. So, what does Microsoft expected adding these new features?
first, let’s explore the key differences between TypeScript and JavaScript.
Table of Contents
What is TypeScript and how does it differ from JavaScript?
The table below shows the key differences between TypeScript and JavaScript.
| TypeScript | JavaScript |
|---|---|
Statically typed languages. Thus, developers need to define the type of each variable, function parameter, and return value in advance. | Dynamicall-typed languageThis means the JavaScript interpreter determines the type of a variable at runtime based on the value assigned to the variable at that time. |
Let developers organize their code better by introducing features such as features interfaces, classes, and modules | No built-in support for these features. |
| Support optional parameters and default values. This is useful when you write functions with many parameters | JavaScript does not have built-in support for optional parameters. But, there is a workaround for it. You can check if a parameter is undefined and assign it a default value. |
Checks the code at compile time. this is helpful to detect errors before the code is run. | JavaScript uses an interpreter. Therefore it provides only error checking at the run time. |
Requires a compilation step in which the TypeScript code is converted to JavaScript that can be executed on the browser or on a server. | No such step. |
Better IDE support than JavaScript. TypeScript provides more information about variables, functions, and other program elements via its type system to the IDE. consequently, The IDE can do a better job at code compilation, error checking, and refactoring. | |
Suited for large-scale projects maintainability and code quality are critical in these projects. | Use in smaller projects or for adding interactivity to web pages. |
Benefits and drawbacks of using TypeScript
Benefits
- Early detection of errors
As mentioned before, the TypeScript type systems allow developers to catch errors at compile time.
- Better code maintainability and organization.
This is an essential part of a large-scale project. Interfaces. Classes and modules allow developers to add more organized and easy-to-understand code.
- Better tooling support
Most IDE support TypeScript better than Javascript for code compilation, error checking, and refactoring. This improves developer productivity and helps minimize and catch errors in the development process.
- Improve collaboration within the development team.
The TypeScript type system makes it easy for one developer to understand the code written by another developer. This is useful in large-scale projects to minimize misunderstandings and conflict, and thereby to have a clear understanding of the parts of code a certain developer works on.
- Maintainability and scalability
TypeScript promotes maintainable code with less complexity. Consequently, it brings another benefit, which is scalability. Developers can add new code easily for new features for new or changed user requirements over time.
Drawbacks:
- Steep learning curve
TypeScript is a superset of JavaScript. Therefore you need to have a good understanding of JavaScript. In addition, you also need to be familiar with the type system of TypeScript, and other programming features such as interfaces, classes, and modules. The whole point here is that you might need more time to become a good TypeScript developer than a JavaScript developer.
- Additional development time
Because the developer needs to incorporate the type system into the code it requires additional time to implement the code when compares to JavaScript. In addition, when developers use TypeScript’s new features to organize the code, they need to spend more time in the development process.
- Additional tooling required
Developers need additional tooling to set up a build process and to use a compiler to convert the TypeScript code to JavaScript. this can also add some complexity to the development process.
- Not suitable for all projects
TypeScript may not be suitable for every project. As I mentioned before, it is used in large-scale projects that require code maintainability, team collaboration, and scalability. for small projects, using TypeScript could be an extra burden and work.
- Increased file size
TypeScript projects have an additional step of converting the code to JavaScript which can increase the size of the Code. As a result, it can increase the size of the file size slightly. In addition, TypeScript code is more verbose than JavaScript code. This can also contribute to the larger file size. The large file size can affect especially the performance of web applications. However, compared to the benefits that TypeScript offers increased file size and its effects are a minor concern.
Setting up a TypeScript development environment
There are 3 ways to set up a TypeScript development environment
How to install TypeScript locally( as a Dependency )
- As an npm module if you are using Node.js
npm install typescript --save-dev
yarn add typescript --dev
pnpm add typescript -D
To run
npx tsc or yarn tsc or pnpm tsc
- Using the NuGet package if you are using MSBuild
- You can also add TypeScript as a Visual Studio extension
How to install TypeScript globally
via npm
run npm install -g typescript
This will install the latest TypeScript version in your system.
via Visual Studio Marketplace
If you install TypeScript as a Visual Studio extension, It allows you to use TypeScript across many MSBuild projects in Visual Studio. The latest version is available in the Visual Studio Marketplace.
Final Word
If you are a complete beginner, first, you need to be familiar with JavaScript at least to an intermediate level. Then, you can learn Typescript. If you are a JavaScript/ React developer, your starting point is to be familiar with the difference between the two languages and then learn the basics of TypeScript. Happy TypeScripting!