Before starting note that I'm a JavaScript(Node js) Developer i have somewhat experience in TypeScript.
Ok!! When you start your journey of learning Web development you get to know that either you have to be good at Frontend or Backend (Full stack if you like so). After spending some time learnig all the technologies required you get to know that you have to learn one more language TypeScript (Only if you are JS developer) . Now you open some random youtube videos which reTypeScript Unveiled: Breaking Down the Mythsally don't make any sense and start binge-watching them. Congratulations you are now stuck in Tutorial Hell !!
Well nobody really want to spend rest of their life simply wathing tutorial right ?? Now i gonna give you a guide to How to learn TYPESCRIPT. Giving a simple guide is really boring thing , in this blog i will let you introduce you to some of the concepts you can learn for getting started in TypeScript.
What is TypeScript ?
Before anyone start learning typescript they have to know what exactly it is. TypeScript is just super set of JavaScript. means its java script but have some types. Ok , I know that didn't made much sense . To begin with what is the main disadvantage of JavaScipt ? If you say its weird, you might be right but what is wrong acc to some dev's is js doesnt have strict typing. Meaning a variable in a js can have different type of value. Consider the example below
let myVar=18; //here myVar is type of Number
myVar="18"; //here it is reassigned with string value but not causing any error
After seeing the example you might say isn't this a good thing . but it's a big NOO!! This is one of the thing that causes lot of bugs which might hard to find in the large code base. Now How does TS solve this. TS allows developers to declare types for the variable mainly. This makes JS somewhat type safe but not entirely. Why ?? cause TS is just a development dependency. After writing typescript you have to compile it to JS . Soo TS isn't the perfect solution , but it solves most of the type problems.
To get started
What are the requirements to get started with TS ? It's pretty simple you have to have TypeScript package from npm and then you can install ts-node which lets you run the typescript code directly without conversion of TS code to JS.
npm install -g typescript //for installing the typescript in your machine
npm install --save-dev typescript // if you want to install as dev dependency
npx tsc --init //intializing the config file for typescript compiler
tsc {filename} //for transpiling to javascript
npm install -g ts-node
ts-node filename //for runnig the typescript file without the help of node
In the above i have mentioned some of the command . in their i said about the config file of TS . What is that ?? The config file is just some instructions you can give to your TS compiler which converts into JS. You can refer this for more info : Typescript Config
Now that you have set up the project you can start experiment with the TS code. But I didnt't gave any example right ?? Hmmm... Ok i will show you guys some of the things you can keep in mind
Data Types
well there are many datatypes that are supported by typescript you can refer : DataTypes in TS
In TS you declare a variable along with the type. well you generally don't need to do this because TS itself can assert some of the type but when it fails to add (probably in some complex datatype ) In that scenario you infer the type manually. So you don't even need to declare variable along with types .
let myVar:number=10;
myVar="20" //Throws compiler error cause of the type
let myVar=10; //here typescipt itself assign the type number to myVar don't need to mention type explicitly
In the above example i really said the compiler throws error but it can still coverted into js without any problem . Then this code is totally valid . This is one of the drawback.
What about the complex datatypes ?
Well it is pretty simple to use primitive types . but what about some complex types right ? where do you get it ? doesn't it cause error ?
Now we will discuss how to import type for a specific package for example Express a Framework widely popular in js world.
npm i --save-dev @types/express // installing the needed express types
// the syntax is pretty common for every package you put annotation and types then
// you write the package name
npm i --save-dev @types/{package-name}
After installing the types you can make use of this by manually inferring this or compiler itself will infer the types for most part.
// Simple example for using Express types :
import express,{Express,Request,Response} from "express";
cosnt app:Express=express();
app.get("/",(req:Request,res:Response)=>{
res.json({data:"not working"});
})
app.listen(8080);
Conclusion:
Now for the conclusion , well i really wanted to add more part but I expect nobody to reach the end of it , if i add more part. So i will conclude here. TypeScript isn't scary as they say , Its just javascript with types that's all . anybody can learn. But the best way to learn is by building a project . just start a project then you see the results..
Thank you if you reached this part <3