Why did I choose TypeScript over JavaScript For my open-source project?

TypeScript is a famous programming language that extends JavaScript with some or minor additional features like functions, inclusive of static typing, classes, strict mode, interfaces, generics, and much more. TypeScript is millions of Javascript developers who want to write down scalable applications using Vue, Webpack, Angular, react and etc.

In this article, I will put some of the reasons why you need to select TypeScript over JavaScript for your next project, as well I will try to explain everything with examples. and just because of these following reasons I am building my open source using TypeScript

So let's begin,

In simple language or in a few words TypeScript is just a mask under that mask it's Javascript only, it's just the mask that has a few more details let's say colors.

?The main difference between TypeScript and JavaScript is that TypeScript supports static typing. Static typing means that the type of a variable and function parameter/return type get checked at compile time, rather than at run time.

But what do I mean about Compile time,

Ok.

Let's take more deep dive with me using examples so that you can understand more about Compile time "Keyword ;-)". But before that we need to install node and typescript, To do that please follow just four simple steps.

Installing Typescript(Am on Windows):

1. Install the latest Nodejs LTS version (https://nodejs.org/en/download/)
2. Install TypeScript globally or locally using npm. For now, let's go with global installation.

npm install -g typescript        

3. Create a folder, as we need to create tsconfig.js inside the folder. The tsconfig.json file is a configuration file that specifies how to compile your TypeScript code into JavaScript code. You can create a tsconfig.json file using the following command in the terminal.

npx tsc --init        

4. That's all you need to do, now we will explore and will deep dive to understand why Typescript is better than javascript and what I meant by Compile time everything with examples.

TS VS JS(Exploring with examples)

1. TypeScript supports static typing: One of the main advantages of TypeScript is that it can help you avoid many common errors and bugs that can occur in JavaScript due to its dynamic nature. TypeScript supports static typing, which means that the type of a variable or a function parameter is checked at compile time, rather than at run time. This can help you catch errors early before they cause problems in production. For example, lets create a test.ts file and paste the following code

let x: number = 10; // x is a number, in typescript we define the type
x = "hello"; 
console.log(x.length);         

now let's run this code, to run the typescript first we have to convert it to javascript, we use the command 'npx tsc' (run in the folder), if you try to compile the above code you will get two compile time errors.

Type 'string' is not assignable to type 'number'         
Property 'length' does not exist on type 'number'        

but in Javascript, if you try to run the following code it will run without any warning or errors

let x = 10; // x is a number
x = "hello"; // x is now a string
console.log(x.length); // 5        

This code will run without any errors, but it might not be what you wanted to do. You may want to keep x as a number and use another variable for the string. Or you might have wanted to perform some arithmetic operation on x, but instead, you got a string.

But TypeScript will detect that you are trying to assign a string to a variable that is declared as a number. It will also detect that you are trying to access a property that does not exist on a number(As I have mentioned the error above). These errors will be shown on compile time to you before you run the code in the browser or anywhere, so you can fix them easily [We have already tried this in the above example].

With the help of static typing, we can avoid bugs, warnings, and errors. Typescript makes debugging easy when you work on big projects with thousands of lines of code.

[That's why most of the open source libraries are nowadays written in TS]

2.TypeScript is more expressive:

Another reason why you should choose TypeScript over JavaScript is that TypeScript is more expressive and modern.

In JavaScript, functions can take any type of parameter and return any type of value. This can throw errors and create confusion, especially when working with complex or unfamiliar code. For example in js:

function add(a, b) 
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add("1", "2")); // "12"
console.log(add(true, false)); // 1        

If you run the above Javascript code, you will see nothing is wrong, if you look it's not checking the type of parameter or return type.

Now let's try the above code in TypeScript with defining types (Parameter and return types).

function add(a: number, b: number): number //:number means return type is number
? return a + b;
}
console.log(add(1, 2)); // 3
console.log(add("1", "2")); // error: Argument of type 'string' is not assignable to parameter of type 'number'
console.log(add(true, false)); // error: Argument of type 'boolean' is not assignable to parameter of type 'number'        

If you look at this function add takes two parameters of type number and returns a value of type number(refer to image in case you are noob). If you try to pass any other values, TS(Typescript) will show an error at compile time and prevent you from running the code. That means you can't convert this TS to Js This way, you can ensure that your function works as intended and does not produce unexpected results.

One of the features that I enjoy the most is classes, which allow us to use class methods and inheritance. To use classes, we need to define interfaces(AM A BIG FAN BOY OF INTERFACES), which I will explain in more detail another day.

3. Tools and Frameworks Support:

TypeScript is a new programming language that adds features that JavaScript does not have or lacks, such as static typing and classes. It has gained popularity among developers who want to write more robust and scalable web applications. And that's why many frameworks, libraries, and tools have been using TypeScript development practices.

I began my open source project with JavaScript, but I spent 10 days struggling with it. Then I switched to TypeScript, and it made things easier. Yes open source project is almost ready and will be released soon :-) .

JavaScript, on the other hand, has been the dominant programming language for the web for a long time and it will remain the same. It has evolved over the years and enabled developers to build web applications.

For example, Angular is a web framework that uses TypeScript as its main language. It provides features such as dependency injection, data binding, routing, and testing. React is a library that uses JavaScript or JSX (JavaScript + XML) as its main language. It provides features such as components, hooks, state management, and virtual DOM. Both frameworks are popular choices for building modern web applications, but they have different approaches and philosophies.

New bees, might argue with me that TypeScript is not really useful, because we compile it to Javascript to run it on the browser so why to waste time Defining types, interfaces, and all these steps compiling, etc?

However, I would say that the compilation process is actually an advantage because it catches all the errors that could cause problems in production with the help of types and interfaces. If you write the code in plain JavaScript from the beginning, you might end up with a lot of errors that are hard to fix.

I’m not saying that you should not learn JavaScript. In fact, you should learn JavaScript before learning TypeScript, because TypeScript is based on JavaScript.

But TypeScript adds some features that make it more reliable and suitable for production. There are many articles that you can read and learn TypeScript from. My main goal was to tell you what TypeScript is and how it can benefit your project.

Salary:

The income of TypeScript developers and JavaScript developers depends on various factors, such as location, experience level, and the company. However, in general, TypeScript developers tend to have higher salaries than JavaScript developers. The average annual salary for TypeScript developers is around $140,000 to $150,000, while the average annual salary for JavaScript developers is around $110,000 to $120,000. Of course, if you master both languages, you can expect to earn even more than these averages.

Conclusion:

TypeScript and JavaScript are both really very powerful programming languages(just by using either TS or JS you can make Android Apps like Instagram, or desktop Apps like your Fav (IDE) VSCODE.

They share the same foundation and goals, but they also have some significant differences, such as TypeScript’s static typing and JavaScript’s dynamic typing. The choice between TypeScript and JavaScript depends on the type and complexity of the project. Therefore, there is no definitive answer to which one is better.

If you are a web developer or back-end Js Dev who wants to advance your career, you should learn both languages like me. I believe I have tried to help you to decide which one to start with based on your needs and preferences.

Therefore, there is no point in arguing about which one is superior, as it is not a matter of TypeScript vs JavaScript. It is about learning both, as you need a solid understanding of JavaScript to write even a simple line of TypeScript code.