Cover photo credit: Educative.io
Introduction
"Since I started using typescript, I don't want to go back to Javascript".
I can't count the numerous times I have read that comment online. So, I am going to find out if typescript is the real deal in this series. We'll go as far as we can to explore what Typescript is and how to begin using Typescript over Javascript or using both.
On the other hand, we will look at the significance of typescript in this article, how to install it, and write our first typescript program.
Typescript, the basics.
Tech sages online claim that Typescript(TS) is a superset of Javascript(JS), an extension of JS, and at first, I thought this brings more features to JS, and since JS is already as huge as it can get, wouldn't more features be bringing more complexity to it?
But TS doesn't bring complexity to JS, it even makes it better to work with. How? TS offers a compulsory feature of writing JS in a precise manner so we face lesser errors at runtime.
Hence, TS is primarily useful because of the rich developer experience it offers, and it doesn't bring new loops, event listeners, and switch statements. It is just a newer way of writing JS.
Type Safety
This is the uniqueness of TS. Look at the code written in JS:
const unsafe = 22 + "22";
console.log(unsafe) // Outputs 2222
You shouldn't be able to add 22and "22" together, since they are different data types. TS solves this issue by making sure data types work according to their primary nature and limits unexpected behaviors. I call this WYSIWYG (What You Type Is What You Get).
Static Checking
Other languages like C#, C++, and Go are built-in with a feature called STATIC CHECKING. Static checking enables IDEs to highlight type unsafe syntax and possible errors using the language's parser() when you are writing code.
However, JS does not have this feature and is quiet about errors until when code is about to run, then it throws up all the errors in your face.
TS stops this and brings static checking to JS. This my friend, is what Typescript is all about, unstoppable Developer Experience(DX).
In the picture, we have an object
userand different propertiesnameandageThen in the next line, we try to access
user.school, which does not exist.TS enables static checking by hinting that the code on line 3 might be wrong
Development process
Going forward, we should know this, TS is entirely a development tool. It does not influence in production any way possible. Any code written as TS is converted to JS during compilation. In fact, a TS code that prompts errors when compiling because of TS-type safety might run perfectly on JS. Since TS is a development tool, it should allow us the freedom to set it up and modify it the way we want.
TS uses a special file called the TS.config.js to modify TS in our projects. We will look at that in later articles of this series.
Also, there are different ways to use Typescript, which we will look at in future articles:
Regular Javascript, setting up the core system, and making basic TS files.
Configuring TS so it helps us produce better code.
Setting up Typescript
Step 1: Create a folder where you demonstrate and use the basics of typescript
Step 2: Ensure node and npm are installed on your PC. To check that they are installed, run these commands on your terminal,node -v and npm -v . The version number should show up.
Step 3: Install typescript globally with your terminal, npm install -g typescript ts-node
Step 4: Confirm that it is installed with this command, tsc -v .
Firing it Up
Let's use typescript, and compile it to Javascript. We need to get something clear before we move on, any code file that ends with .ts would not be understood by the browser, and it is not valid.
We have to change the typescript to a Javascript file for it to work. Typescript does not work in production. It is only a game changer in development.
Step 1: Create a Typescript file example.ts in a folder of your choice.
Step 2: Put in some dummy typescript
let Name: "string" = "string"
console.log(Name);
Step 3: Run the command in terminal tsc example.ts
Step 4: Observe that there's an additional file example.js in your folder. There you go, your first typescript file.
Please note: Even if there are errors, the typescript file will still compile to Javascript. This reiterates the fact that Typescript is just a development tool that helps you write safer and more debuggable code.
Conclusion
Typescript offers a lot of benefits to developers by providing a more precise and type-safe way to write JavaScript.
It helps prevent unexpected behaviors and provides static checking, making it easier to catch errors during the development process. While it may seem like a new language, it is actually just a newer way of writing JavaScript, and any code written in Typescript is converted to JavaScript during compilation.
Typescript is a development tool that does not affect production code in any way, but it can significantly improve the developer experience. By following the steps outlined in this article, you can start using Typescript in your projects today and see the benefits for yourself.
Cheers, till we meet again 🍻.