TypeScript vs JavaScript: Making the Right Choice for Your Project

In the past, high-end and interactive web applications were built using three major languages, HTML, CSS and JavaScript. While HTML provided the web page's structure and CSS handled styling, JavaScript enabled interactivity.

Thanks to the ever-evolving nature of technology, several tools have been created to complement these fundamental languages and create an overall better experience for users. In addition to CSS for styling, we now have frameworks like SCSS, Bulma CSS, Tailwind CSS and JavaScript frameworks like React, Vue, and Svelte for interactivity. Are we missing something? Oh yes, we are, TypeScript! TypeScript is JavaScript but with types. We'll talk about this more later on.

In this article, we will compare TypeScript vs JavaScript, the benefits and drawbacks of both languages, the use cases, and how to convert your JavaScript code to TypeScript using the Pieces Desktop App.

Overview of JavaScript

Javascript is a scripting language used to implement functionality in web pages. It is responsible for interactivity between web pages and the user. Interactivity means communication between two people, or in this case, the user and the computer. You might be wondering, "Communicate? But I don't talk to my PC!" Literally, you don't, but have you ever been asked to fill a form on the web, and when you click on "submit", a prompt pops on the screen and asks "Are you sure you want to submit?" That's the computer talking to you, and when you click on "no" or "yes", you respond to the computer. This, and other forms of interactivity on the web constitutes the bulk of use cases for JavaScript.

It is a dynamically typed language that uses variables for storing values, performs several client-side operations, and conditional statements to interact with the user. Conditional statements, mainly if and else, are used to implement interactivity. JavaScript tells the computer, "Okay, if the user clicks on this, run this code, else, run that code". Being dynamically typed, variables in Javascript are assigned to their data types at run time. This means you can write codes in JavaScript without having to worry about defining the types because the compiler does that for you.

Overview of TypeScript

In its simplest form, TypeScript is JavaScript with types. It was created by Microsoft and it has all the basic features of JavaScript and additional features. It begs the question, "Rather than create a new language, why not add new features to JavaScript?" That's a valid question, because it would have been easier to do. However, the most distinct feature of TypeScript is the fact that it uses static typing.

Static typing performs type-checking at compile time, which means all variables must be assigned to their respective types by the user before it runs, else the compiler throws an error. TypeScript addresses the shortcomings of JavaScript by improving developer experience and increasing safety in code to be used in large-scale applications. It also encourages better code readability and saves time in debugging.

Use Cases of JavaScript

JavaScript provides a wide range of use cases in several areas of programming which includes :

• Web Development: JavaScript has become increasingly important in modern web development. It provides interaction and validation functionalities which promote a better user experience.
• Mobile Development: React Native, which is built on the fundamentals of JavaScript, is used in creating high-end applications for mobile phones.
• Server-side Applications: Although Javascript is commonly used in client-side applications, it can also run on servers using Node.js, which handles file requests using JavaScript on the server.
• Web Animations: With the help of Framer Motion and GSAP, simple and complex animation sequences can be added to web pages.
• Presentations: JavaScript also gives the flexibility of creating presentation slides with the help of presentation libraries like RevealJS and BespokeJS.

Overview of TypeScript

With the inclusion of types, TypeScript can be used for everything JavaScript can be used for! However, some additional use cases for TypeScript include the following:

• It is used in large-scale applications due to its scalability.
• Although defining types for every variable might seem stressful, TypeScript saves time in debugging as it throws type errors during development, as opposed to JavaScript which throws errors at runtime.
• It is used in server-side applications as it is highly performant.
• Being a statically typed language, it supports object-oriented programming (OOP) concepts.

TypeScript vs JavaScript Comparison

Syntax

You have learnt about TypeScript being a static-typed language and how types have to be defined, but how do we do this? How different is the syntax of TypeScript vs. JavaScript?

Consider the block of JavaScript code below:

// Numbers:
let age = 34;
let size= 12;

// Strings:
let blog = "Pieces";
let remark = "Fantastic!";

// Booleans
let x = true;
let y = false;

// Object:
const company = {companyName:"Pieces for Developers", location:"Ohio"};

In the above code snippet, we create variables without defining the types, because the JavaScript compiler assigns the type to variables at run time. We created 7 variables and 4 data types; number, string, boolean, and object. This code will run successfully in JavaScript but not in TypeScript because we have not assigned any of these variables to their respective types. How do we represent this code in TypeScript?

Consider the block of code below:

let age: number = 34;
let size: number = 12;

let blog: string = "Pieces";
let remark: string = "Fantastic!";

let x: boolean = true;
let y: boolean = false;

const company: { companyName: string; location: string } = {
companyName: "Pieces for Developers",
location: "Ohio",
};

Now we have included types in our variable declaration, this is what TypeScript entails. It uses the variable: type syntax in variable declaration. Unlike Javascript where we only assign a value to our age variable, we have to tell TypeScript, "Hey, here's my age variable and it's a number" or else it won't work. In our code snippet, we also assign types to our variables with the :string and :boolean directives.

Learning Curve

Being skilled in JavaScript, learning TypeScript is not so difficult because it has a very similar syntax. There are no omissions, just the addition of types for safety! So if you have been avoiding learning TypeScript due to the fear of its difficulty, you do not have to worry as the JavaScript to TypeScript migration is easier than you think. Data Types is one of the fundamental topics in learning JavaScript, all you have to do is manually apply what you have learned in TypeScript.

Compile Time and Performance

Writing codes in JavaScript means you are directly interacting with the browser, as the browser understands the code. The working principle of TypeScript is quite different. Due to its low-range support for many browsers, TypeScript code is converted to JavaScript by the TypeScript Compiler. It slows down the compile time as the TypeScript undergoes an extra cycle in development. This makes JavaScript execute faster than TypeScript at compile time.

However, since all the TypeScript code is compiled to JavaScript and type-checking is done at compile time, this means most of the work has been done before run time, unlike JavaScript which has to read and check for errors at runtime. This makes TypeScript perform better and more effectively than JavaScript.

JavaScript to TypeScript Conversion

Manual Conversion

Converting your JavaScript code to TypeScript is more than adding types to your syntax. You have to set up your environment so your editor knows you are working with TypeScript. Additionally, you have to install the TypeScript Compiler. You can do this by following these steps:

1. Install the TypeScript Compiler

npm install typescript --save-dev

This line of code installs the TypeScript Compiler. Remember TypeScript has to be converted to JavaScript before it can be run on the web.

2. Configure your tsconfig.json file using the code below:

{
"include": ["src"],
"compilerOptions": {
"outDir": "./build"
}
}

This line of code is responsible for converting TypeScript to JavaScript. It tells the compiler, "Hey, I want you to take all the TypeScript code in the /src directory and convert them to JavaScript code in the ./build directory".

3. Change your .js file to .ts extension. TypeScript uses .ts extension in its file directory.

4. As soon as you change your .js file to .ts, you should see a couple of errors highlighted in your code. This is because your editor now sees all the codes as TypeScript and since you have not assigned your variables to their respective types, it throws an error.

Converting JavaScript to TypeScript with Pieces for Developers

Let's face it, manually converting and adding types to our codebase can be exhausting, especially having to deal with many lines of code. Luckily, we can achieve this seamlessly and effectively using the code translator feature in the Pieces desktop app by following these steps:

1. Install the Pieces Desktop App

2. Download the Pieces Chrome Extension

3. After completing the installation process, the functionality kicks in — when you hover over code snippets in any webpage, it provides an option to copy and save the code and when you click on it, it automatically reflects in your Pieces Desktop App. Let's try this out using our sample code.

4. When the saved code snippet automatically reflects in the Pieces Desktop App, click on the pencil icon on the right-hand side to edit the code snippet. When you do so, it brings out actions you can perform on the snippet, you can then click on the translate icon which is located at the bottom of the right sidebar menu. After that, click on any language to convert to, in this case, TypeScript.

5. When you click on "Generate”, it gives us the TypeScript equivalent of that code, Here is the result:

And there! We have our TypeScript code, all without having to manually input our types. Quite amazing, isn't it? You can also perform code conversion using other languages, try it out!

JavaScript to TypeScript Migration — We got you covered!

Learning the syntax of TypeScript might take some time to get used to, especially after writing JavaScript for a long while. It could sometimes get confusing seeing a piece of TypeScript code on the web if you're just starting, but Pieces helps with that. For every code snippet you save from the web, when it reflects in your Pieces Desktop app, there is auto-generated context and metadata for the code snippet that explains what it does and gives you related links to help you learn more about the snippet. Let's see how it works:

Here, Pieces automatically generates a title for our code snippet which is "Data Types and Object Initialization in JavaScript". It gives context to further learning by suggesting some key concepts associated with the code snippet, the origin site the code snippet was saved from, and an explanation of the code snippet. This helps in migration from JavaScript to TypeScript because all you have to do is save the TypeScript code using the Pieces app and it tells you what the code snippet does. Pieces also has a Typescript snippet collection to help you get going.

Benefits and Drawbacks of Typescript vs JavaScript

In this section, you will learn the benefits and drawbacks of the usage of Typescript vs JavaScript.

Benefits of JavaScript

• It is easier to learn and use due to its flexibility.
• Being a fundamental language in Web development, JavaScript is supported by all browsers and does not need any conversion.
• Due to its popularity, JavaScript has a large community of developers. This aids discussions on new features and fixing bugs.
• It's a versatile language as knowledge of JavaScript cuts through several fields like web development, server-side development, mobile development, presentation, and animations.
• Being dynamically typed, it saves development time since developers do not have to explicitly define types when creating variables.

Drawbacks of JavaScript

In comparison to TypeScript:

• JavaScript poses a high threat and vulnerability to attacks from malicious code and cross-site scripting.
• It detects errors late, which increases the risk of having unpleasant results or system crashes.
• It has limited Object Oriented Programming (OOP) functionalities, which makes it less suitable for large-scale applications.

Benefits of TypeScript

• Since it is static-typed, TypeScript checks for types and detects bugs before it is compiled. This aids a better development experience as it avoids bugs even before it gets to the compiler.
• Due to its improved features and safety, it is well-suited for large-scale applications.
• It improves code readability. This speeds up development when working in teams.
• It handles errors better than JavaScript due to how well-structured it is.

Drawbacks of TypeScript

In comparison to JavaScript:

• It has a slower compile time since it has to undergo conversion to JavaScript before it can be used on the web.
• Unlike JavaScript, which has a wide range of support for browsers, TypeScript does not work on all browsers. An extra bit of configuration may be required by the developer for it to work on certain browsers.
• It is not as easy to learn. A key knowledge of data types and object-oriented programming concepts is required to get the best of it.
• It is not as popular as JavaScript so there is not a large community of users.

Which to use for your next Project — JavaScript vs TypeScript?

Choosing which language to use for your project is hugely dependent on the complexity and scale of the project. To aid your decision, consider the following questions:

• Do you want to create a simple web page that does not require high complexity? Then JavaScript is your guy.
• Are you just starting out in web development and you're looking to add interaction or validation on the client side? Stick with JavaScript.
• Are you looking to complete a personal project in the fastest time possible? Use JavaScript.
• Are you working on a complex project that requires object-oriented programming? TypeScript is the better option.
• Is it a large-scale application where code safety is prioritized? Use TypeScript.

If you do not have a specific project need in mind, I recommend you use TypeScript. This helps you get familiar with the syntax and gives you the flexibility of switching between both languages. Ultimately, all TypeScript developers are JavaScript developers, but not all JavaScript developers are TypeScript developers.

Conclusion

In this article, you have learned about JavaScript and TypeScript, how to convert from JavaScript to Typescript using Pieces for Developers, and the benefits and drawbacks of TypeScript vs JavaScript. With this, you have everything you need to pick the language for your next project. Good luck!