Understanding TypeScript….My Experience

I made a decision to look into Typescript this week due to Pavlo (a developer pal who I’ve by no means met😆)who has been of nice assist to me these previous few months. You see Pavlo is a JavaScript developer who had simply dove into Typescript at his new internship and had run right into a bug already whereas constructing a brand new characteristic for the corporate and I wished to assist however I did not know a lot about Typescript apart from the YouTube movies from Fireship✨🔥(the most effective YouTube channel on the planet)…This TypeScript in 100 seconds video is gold…and so I began performing some studying and what I found within the course of was a greater manner of writing JavaScript (Oh nicely, I used to be at all times a strawberry man anyway🤷🏾‍♂️ get it??😀😀). So I made a decision to write down this text on the fundamentals of this cool language or at the least strive.

WHAT IS TYPESCRIPT???

Properly I already mentioned it’s a higher manner of writing JavaScript not however in line with official docs, “TypeScript is a strongly typed programming language that builds on JavaScript, providing you with higher tooling at any scale” What does this imply??? Let’s break it down to 2 elements: “strongly typed programming language” and “builds on JavaScript”

STRONGLY TYPED💪🏾??

No No not that kind of robust 😂, this simply implies that Typescript like different strongly typed languages equivalent to Java and Python is not going to permit any unholy alliances between values of various varieties like it will in Vanilla JavaScript.

A quite simple instance:

let Age = 95; //TypeScript instantly assigns the quantity kind to the
 Age variable attributable to kind inference and would not permit some other kind
 to be assigned//
*Sort Inference is the power Typescript has to assign varieties for you
 in line with the kind of worth you give to a variable.

Age = Age + 'years outdated';  // It will produce an error in your IDE 
that Sort 'string' shouldn't be assignable to kind 'quantity'.

OR

let Age = 95;
Age="95";  //Sort 'string' shouldn't be assignable to kind 'quantity'.

BUILDS ON JAVASCRIPT

Behind all of the coolness of TypeScript is the truth that the language is actually nonetheless JavaScript, similar syntax and strategies. Typescript shouldn’t be understood by the browser instantly so code written in TypeScript continues to be compiled all the way down to JavaScript utilizing the TypeScript compiler, It actually creates a JavaScript file together with your Typescript code transformed to vanilla JavaScript for you, this JavaScript file is what the browser understands.

TypeScript does what we name ‘type-checking’ in growth and in compile time(static kind checking) as a substitute of in run time(dynamic kind checking) like in JavaScript, Sort checking means checking that every operation ought to obtain correct variety of arguments and every variable is of the correct information kind.. This helps cut back/get rid of kind errors when working with quite a few variables

JavaScript developer

TypeScript additionally permits us assign varieties to variables ourselves (it’s advisable to assign varieties all over the place we are able to) so we are able to detect errors in time.

Instance:

let Age:quantity = 23;
let Identify:string = 'Mike'; 
let Male: boolean = true
// We're assigning the categories that these variables can maintain...


Right here the Age variable will solely maintain numbers going ahead and the Identify variable will solely maintain strings and so forth. Giving these variables some other information kind than the one assigned will produce an error when compiled.

FUNCTIONS IN TYPESCRIPT

Features within the TypeScript are the identical as in JavaScript apart from capacity so as to add varieties anticipated for the parameters and in addition the sort anticipated to be returned from the perform.

Instance:

JavaScript perform

perform addNumbers(num1, num2) {
  return num1 + num2;
 }
const outcome = addNumbers(5,10)
console.log(outcome) //result's 15     

TypeScript Perform

perform addNumbers(num1: quantity, num2: quantity): quantity //<=return kind {
  return num1 + num2;
 }
const outcome = addNumbers(5,10)  
console.log(outcome) //result's 15

The addNumbers TypeScript perform expects 2 parameters of the quantity kind and in addition expects a quantity kind to be returned from the perform , any abstraction from these kind guidelines would produce an error.

After all you could possibly do with out assigning varieties to perform parameters and they’ll mechanically be assigned the ‘any’ kind which permits for any information kind to be handed right into a variable or a parameter however then it will be counter-productive as a result of why the hell are you utilizing TypeScript then🤷🏾‍♂️.

ARRAYS IN TYPESCRIPT

In TypeScript Array varieties may be set , we are able to select for an array to include strings solely or numbers solely and so forth.

Instance:

let favouritePlaces: string[]; //this array is being set to include 
solely strings and nothing else

favouritePlaces = ['New Orleans', 'French Riviera', 'Bali', 'Bora Bora', 'Santorini']

let Ages: quantity[];

Ages=[23, 45, 32, 26, 30]

Easy as that!

DEFINING OBJECTS TYPES IN TYPESCRIPT

There are two methods of defining object varieties in TypeScript:

1) Defining with Interfaces
Interfaces are like templates that describe how objects ought to seem like and what varieties are given to the values of the objects

Instance:

interface personObject {
identify:string;
age:quantity;
hobbies:string[];
}

const person1:personObject ={
identify:'mike',
age:'56',
hobbies:['movies','sports','coding' ]
}

Right here we use the personObject interface as a sort for the person1 object following the categories set for every key-value pair

2) Defining Immediately

Instance:

const individual: {
  identify: string;
  age: quantity;
  hobbies: string[];
} = {
  identify: "mike",
  age: 22,
  hobbies: ["sports", "cooking", "movies"],
};

TUPLES IN TYPESCRIPT

Tuples in TypeScript are principally arrays however they offer us a manner of stipulating the categories and size of the array earlier than hand.

Instance:

let myTuple :[string, number, boolean] 
myTuple = ['string', 23, true]
console.log(myTuple)
//Right here we repair the size of the array to (3) three values 
of varieties string , quantity and boolean

UNION TYPES (|)

Union varieties are a particular characteristic in typescript that permit you set a number of varieties when declaring a variable or setting a parameter, they’re represented by the vertical bar (|).

Instance:

let age:(string | quantity) ;
age = 29; //okay
age="29"; // nonetheless okay

// We are able to additionally use this when declaring arrays
`const arr:(string|quantity)[] = ['Mike', 'Dan', 'Sam', 12, 34, 29]`

I’ve cherished attending to study this pretty ✨ language and shall be utilizing it in my future React and Nodejs tasks and recommendation everybody to strive it out. I like to recommend this video on Typescript by my goto man Maximillian Schwarzmuller on his YouTube channel Academind the place he goes by way of the organising your surroundings for Typescript.

Thanks for studying👋🏾🙏🏾.

Add a Comment

Your email address will not be published. Required fields are marked *