DEV Community

loading...
Cover image for Introduction to TypeScript

Introduction to TypeScript

Ponikar
Love to build Web Apps A journey of Full Stack Developer!
・3 min read

Introduction

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?

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.

//app.js

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?

JavaScript

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.

app.ts
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

Discussion (15)

Collapse
onatalia profile image
Natalia

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

Collapse
ponikar profile image
Ponikar Author

Haha!

Collapse
andreidascalu profile image
Andrei Dascalu • Edited

Even better than Typescript (nowadays it is ReScript) blog.dubenko.dev/typescript-vs-rea...

Collapse
vladsolokha profile image
Vlad Solokha

This is a great read.

Collapse
ponikar profile image
Ponikar Author

Thank you!

Collapse
ashish40781304 profile image
Ashish

May I know any good tutorial available for learning Typescript.

Collapse
ponikar profile image
Ponikar Author

If you prefer documentation
typescriptlang.org/

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

Good start, 👍

Collapse
ponikar profile image
Ponikar Author

Thank you!

Collapse
lautenschlagerdev profile image
Andreas Lautenschlager • Edited

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

Collapse
ponikar profile image
Ponikar Author

Glad I could Help!

Collapse
khajin1 profile image
evalPenny • Edited

I thought of using TypeScript before, but never used it.
But, right after I finished reading your post I decided to start learning TypeScript!

Collapse
ponikar profile image
Ponikar Author

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

Collapse
rijupatra9 profile image
Riju patra

amazing description 👌..clear lot of things .Thank you 🙌

Collapse
ponikar profile image
Ponikar Author

Thank you, Riju