DEV Community

Cover image for Introduction to TypeScript

Posted on

Introduction to TypeScript


Hello there, This is Darshan Ponikar and today we are going to talk about switching from JavaScript to TypeScript!

So get ready to resolve all your doubts you are having with TypeScript!

Why TypeScript?


I am assuming that you are totally unaware of TypeScript. TypeScript, As name suggest it is a Type checking language!

TypeScript is not a brand new language! TypeScript is a super-set of JavaScript, which means you can still use the same syntax you have used in JavaScript!

Before I tell you directly how does things work in TypeScript Let's talk about our favourite language JavaScript.

JavaScript is a Runtime Language! That's means everything happens at runtime. We cannot compile JavaScript like Java, C++, C.


let num = 3 
console.log(typeof num) // this will print number
num = "I am String" 
console.log(typeof num) // this will print string 
Enter fullscreen mode Exit fullscreen mode

So you can declare variable assigned number to it and you can even assigned string to that same variable. If you are coming from Java or C++, You will probably wonder JavaScript is weird.

But sometimes this weirdness can driving you crazy?


If you are working with large scale web application, I am assuming you are using React!

Lots of Components, Lots of Props passing through Child Components, Helpers functions to make API calls and a lots of things are going on in that Project.

Sometimes you probably have ended up spending hours behind the undefined error, Silly mistakes (Datatype mismatch).

i.e In a React App, A Component must accept string value.

// app.jsx
// this is valid
<Component name="Darshan!" /> 

// this is invalid but JavaScript won't show any error
<Component name={123} /> 
Enter fullscreen mode Exit fullscreen mode

JavaScript will not complaint if you have passed number value instead of string. It will print that value on browser.

But this is totally wrong. A name must have string datatype.

So how do we proceed further?

Level up with TypeScript

Here TypeScript come into the Picture!

TypeScript is use to make enterprise level web applications, which is powered by Microsoft!

Unlike JavaScript your code can be compiled before you run them on a browser. So you can solve any potential silly mistake and save your time!

TypeScript allow you to narrow down the type of the variable.

// app.ts
// Narrowed down type to string
let name:string = "Darshan" 

// This will show you the error
name = 123 
Enter fullscreen mode Exit fullscreen mode

We fully type our variable name to string.

If you are writing your code in VSCode editor this will probably show you the error! Something like you ** cannot assign number value to string.**

You don't have to explicitly define type every time. TypeScript can implicitly define type based on right hand side value.

const name = "I am String"

// This will still show you the error!
name = 8923 
Enter fullscreen mode Exit fullscreen mode

The example you have seen above is inference type binding.
There are other type binding ways

  1. inference
  2. interface
  3. type

You can read more in the documentation!

Things to remember while working with TypeScript!

  1. TypeScript is Compile time Language.

  2. You cannot run TypeScript on Browser directly. You need babel compiler that convert your TypeScript to JavaScript code.

  3. You can also create your own Type!

  4. To narrowed down your props/state you need to know the particular type.

  5. You need to configure project before you start writing code in TypeScript.

So this is how TypeScript can speed up you development and save more time.

Ready to play with TypeScript? Checkout TypeScript playground!
TypeScript Playground

Thank you for reading the blog. If you liked it, Let me know your thoughts in comment box, What did you like most?

If you think there is mistake or you want to add up something, Please do share your thoughts in comment box.

TypeScript is fun

Top comments (14)

onatalia profile image

"But sometimes this weirdness can drive you crazy?"
Totally XD

ponikar profile image


andreidascalu profile image
Andrei Dascalu • Edited

Even better than Typescript (nowadays it is ReScript)

ponikar profile image

I am glad that I could help you! Good luck with TypeScript

vladsolokha profile image
Vlad Solokha

This is a great read.

ponikar profile image

Thank you!

ashish40781304 profile image

May I know any good tutorial available for learning Typescript.

ponikar profile image

If you prefer documentation

cmuralisree profile image
Chittoji Murali Sree Krishna

Good start, πŸ‘

ponikar profile image

Thank you!

lautenschlagerdev profile image
Andreas Lautenschlager • Edited

Thanks for the insight. I work 99% with SSG and React. I will look into TypeScript now.

ponikar profile image

Glad I could Help!

rijupatra9 profile image
Riju patra

amazing description πŸ‘Œ..clear lot of things .Thank you πŸ™Œ

ponikar profile image

Thank you, Riju