DEV Community

Cover image for Introduction to TypeScript
Ponikar
Ponikar

Posted on

Introduction to TypeScript

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

Top comments (14)

Collapse
 
onatalia profile image
Natalia

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

Collapse
 
ponikar profile image
Ponikar

Haha!

Collapse
 
andreidascalu profile image
Andrei Dascalu • Edited

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

Collapse
 
ponikar profile image
Ponikar

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

Collapse
 
vladsolokha profile image
Vlad Solokha

This is a great read.

Collapse
 
ponikar profile image
Ponikar

Thank you!

Collapse
 
ashish40781304 profile image
Ashish

May I know any good tutorial available for learning Typescript.

Collapse
 
ponikar profile image
Ponikar

If you prefer documentation
typescriptlang.org/

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna

Good start, πŸ‘

Collapse
 
ponikar profile image
Ponikar

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

Glad I could Help!

Collapse
 
rijupatra9 profile image
Riju patra

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

Collapse
 
ponikar profile image
Ponikar

Thank you, Riju