Introduction to TypeScript

#javascript #typescript #beginners #react

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?

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

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} />

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

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

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

inference
interface
type

You can read more in the documentation!

Things to remember while working with TypeScript!

TypeScript is Compile time Language.
You cannot run TypeScript on Browser directly. You need babel compiler that convert your TypeScript to JavaScript code.
You can also create your own Type!
To narrowed down your props/state you need to know the particular type.
You need to configure project before you start writing code in TypeScript.