DEV Community

Cover image for Beginners Guide to TypeScript
Arindam Majumder
Arindam Majumder Subscriber

Posted on • Updated on • Originally published at arindam1729.hashnode.dev

Beginners Guide to TypeScript

Introduction

TypeScript is quickly becoming a fan favourite of the JavaScript community, adding the age-old concept of types to our beloved language. This dynamic addition is changing the way developers write code and is quickly becoming an essential skill in modern web development.

In this article, we'll understand What TypeScript is, its benefits & uses, and many more!

So, Without any more delays, let's START!

GIF


What is TypeScript?

According to the official docs, TypeScript is a typed superset of JavaScript. But what does that mean?

You can think of it as a layer on top of Javascript!

But Why layer?

Javascript engines can't read Typescript. So to make it readable/executable, Typescript code goes through a "pre-translation" process, called compilation.

During this compilation process, the TypeScript code is stripped of its type annotations and other TypeScript-specific constructs, resulting in plain JavaScript code. That's why We can consider typescript as "a layer" on top of JavaScript.

We use tsc (TypeScript Compiler) to convert the TypeScript code into JavaScript.


Why TypeScript?

Getting Started with TypeScript in React: A Comprehensive Guide

Here comes the interesting question!

Why do we even need TypeScript? It's ultimately converting to JavaScript! So we'll directly write Javascript Code!

You also had this feeling, Right?

But let me tell you, TypeScript brings a Package of Benefits to the table.

It helps us to catch mistakes before they mess up the whole code. Also, it makes the code well-structured and almost self-documenting.

We'll explore TypeScript's Benefits in the next section.


Benefits

The main benefits of using TypeScript are:

  • Early error detection: TypeScript catches errors at compile time rather than runtime. This helps avoid bugs that are harder to fix later.

  • Better code readability: Type annotations make the code more self-documenting and easier to read/understand.

  • IntelliSense: IDEs can provide code completions and suggestions based on the static type information.

  • Improved tooling: Tools like linters and refactors work better with static typing information.

  • Better for large apps: Static typing scales better for large applications and codebases.


Should I learn JavaScript or TypeScript?

IntelliSense

Many Developers have this question whether they should learn JavaScript or TypeScript!

Well, The answer is pretty Simple!

We can't learn TypeScript Without learning Javascript. TypeScript is basically JavaScript with extra smarts for type checking. So whatever you'll learn in Javascript will help you learn TypeScript!

Setting up TypeScript:

The setup of TypeScript is pretty straightforward.

To install typescript globally run the Following Command in your terminal!

npm install -g typescript
Enter fullscreen mode Exit fullscreen mode

This will install typescript globally in your system!

To verify the installation run the following command:

tsc -v
Enter fullscreen mode Exit fullscreen mode

This will give the current version number.

Image

Now create a file_name.ts file and Write your first TypeScript code! To compile the TypeScript file run the following command.

tsc file_name.ts
Enter fullscreen mode Exit fullscreen mode

This will create a file_name.js file and add the compiled JS code.


Conclusion

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript, React, and other web Development topics.

For Paid collaboration mail me at : arindammajumder2020@gmail.com

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading :)

Thank You

Top comments (2)

Collapse
 
eoyugi profile image
Elly Okello

thanks for the helping me dive in what i had previously considered deep end .Typescript no longer feels like that giant monster

Collapse
 
arindam_1729 profile image
Arindam Majumder

Glad You found it useful!