Forem: Mahin Tazuar

Exploring Typescript Shortly

Mahin Tazuar — Sat, 12 Nov 2022 17:39:41 +0000

Introducing:

Typescript Developed by Microsoft. Typescript is a Superset of Javascript. Some Top Purpose of typescript is, When we build Enterprise or Large Scale projects, we face data type-checking related issues. Suppose we expect a number type data from a variable but if we don't get it, that can be a big issue. So Typescript Smart Intelligent System Help to handle all data type of this project for Strickly Specify them. Typescript gives a Compiler error. That means when we are writing code if the code was wrong typescript gives an error this time. Code not rendering before the solution. After Compile The typescript is given a vanilla javascript Code. That's why it Helps to Support an old browser. We also configure more and select the javascript version.

Installation :

Requierd Node js

npm i -g typescript
npm i typescript

Variable and Function Type checking :

Explicity variable with Array

Explicit Means, when we define a variable with the let keyword but did assign a value. This time we can change the value any more and also we can define any type of data type. Typescript Explicity helps to define a variable with a fixed expected data type.

Union Type

Union Type Means We can fix accepted data type. Like a variable value should be a number or string. If we see the below image we can be clear about what is union type.

Dynamic Type Define

Simply when we don't know which data type set in the future into the variable. This time we can use any type which provides typescript. that helps to set any type of data like the below image.

Function Type

Typescript's beautiful feature is function type handling. Using typescript we can define Function type when variable initialization and we can define function parameter type also function return type. Typescripts have partial power to determine automatically which type should be returned.

Function Signatures

We can fixed data type where variable define.

Type Aliases

Suppose if we need to use multiple types explicitly, we can use them as a variable. So that we can use it multiple times.

Interface

Interface is an other most interesting typescript feature. when we are need to check multiple variable data type, we need to write typescript multiple time. But typescript interface helps for that. Typescript give interface feature that's why we do not write same type checking code in multiple time. Below the picture is example. And we can make it reusable inside all file using import/export.

Generics Types

Sometimes we do not know which type of data comes to a variable. So it creates complexity in checking data type. That's why typescript gives another feature called Generics Type checking. It helps to check dynamic data like the below image and it also works well with the interface.

Enum Type

Enum Type is collection of a index. we can predefine index name for easily implementation.

Tuples

After defining an array within a variable, we can change a value using this array index. But we can not add or modify new data types which do not exist in this array. Because of typescripts have guess capability. Typescript Auotmetically guesses the data type, then strictly forces to use this data type.

Now if we need to fix the data type using by array index, i mean we can update or modify data following this array's existing index data type. Like the below image.

Working with class

Typescript works well with the class or javascript object-oriented programming. When we are using class then we can define the class constructor data type.

Access Modifers in Class

When we create an object using a class, this object property accessibility is open. We know javascript give some modifier but typescript helps it when the type is defined we can also define the public/private access modifier. Typescript introduces a new modifier which is called read-only.

React Life Cycle And Hook

Mahin Tazuar — Sun, 17 Jul 2022 16:08:42 +0000

React js is Now the Most popular Javacript Library. It's very easy to quickly learning. Comparatively with other library and framework its very flexible and Simple. That is one of the best reasons for this popularity.
We discuss here about the what is the life cycle in react and what is react hooks?
Currently React working with React-18. Before React 16, react use a class-based Component that was based on OOp Concept. React 16 introduced the react functional component, which is based on functional programming. In this stage react introduced with us about react hook. After React 16 release, React managed the Life cycle in a new way. Let's explore that...

Usually React maintains code component-wise. It helps to divide the code organized. It helps to maintain the code.
React Component has three-stage.

Mounting - Birth of a component
Updating - Update/Modify the Component
Unmounting - the death of the component

Class-Based Component -

In class Based Component React handle that using Mainly three function.

Mounting
componentDidMount(). Mainly This Function Using for Mounting the component including other built-in functions or methods.

Updating
componentDidUpdate(). This function works to dynamically update something within the component.

Unmount
componentWillUnmount() After the mounting and updating of the component, the end-stage is component unmount. This method is used to component unmount.

Functional Component -

On top of the content, we know react is a functional component. This component uses functional programming concept thats why react builtin method introduce to us as react hooks. React lifecycle works well with this component.

The main thing is React Component handle the component life cycle method using one hook. That is called react useEffect Hooks. Maximum Case we can use this function for the purpose of react life cycle.

Inspire From - https://massivepixel.io/blog/react-lifecycle-methods/

What is Web 3.00

Mahin Tazuar — Sun, 06 Feb 2022 17:46:25 +0000

First, we need to know that is web1.
Web 1.00 is when a worldwide web-based application is born.At this time user can only read and the user did not any interaction. 1991 to 2004 is the time of web 0.1.

Then web 2.00 comes and the user can write, read, and can interact with another user, Payment system is included. data is centralized means user data will control only some organizations like google, Facebook. They are using our data so we can many suggestions by theirs. That is also unethical.

So now the world tech roller thinks what is important. The important thing is data centralization means data privacy. User can only control their data, and users can sell their personal data and earn a percentage of money.
Dabo company controls all things. And Dabo is an Opensource platform. Anyone can buy a stack holder membership. And need to spacial money for by this membership, this currency is cryptocurrency.
Maximum Feature is extending from web 2.00. But some main revolutionary feature is everything is controlled from one server. like when the Facebook server is down. Users can not use Facebook. but in web3 everything is controlled from in one server. Google, Facebook does not be used users. Because every data is decentralized. And BLOCKCHAIN is this company that is used for data decentralization. And also have more interesting features.

One of the biggest things meta base is called virtual reality. In 1992 miles Stephenson writes a snow crash drama. Metaverse concepts came from this drama. You can go office using metaverse technology. Facebook already working within a project that is called horizon world. Canadian 18 years old anyone using this. Another example is a sandbox. Facebook CEO mark zukar barg says metaverse is next of the internet.

Callback function vs Higher Order Function

Mahin Tazuar — Sun, 06 Feb 2022 17:14:48 +0000

A higher-Order function is a very common and advanced concept in javascript. Actually, the function is like a first-class citizen in javascript. because a function can be stored inside a variable and take argument do the logical expression. So we can say, the callback function is which function takes a function an as argument and the argument function is called a callback function. Programmer can be using this callback function where he needed.

const heigherOrderfunction = (nms,callback) => {
   return callback(nms);
}
function callback(x){
return 'player name is'+x;
}
console.log(heigherOrderfunction ("Rose", callback))

Some Javascript Advanced Concept

Mahin Tazuar — Sat, 29 Jan 2022 13:24:31 +0000

NameSpace-

we know javascript variable naming is very important for us. because if match same name variable javascript give an error and not code execute. NameSpace Concept's main purpose is to write unique variables. And many developers use different techniques like IIFE, using objects to create variables.

var yourNamespace = {

    foo: function() {
    },

    bar: function() {
    }
};
...
yourNamespace.foo();

https://stackoverflow.com/questions/881515/how-do-i-declare-a-namespace-in-javascript
ref-https://youtu.be/PZQQhirc448

Recursion -

Recursion definition is, which function calls itself inside his code and stop it when the purpose is solved. This function rule is every time need to define how many times execute the function otherwise execute the function infinitely. Because this function calls itself inside the code this calling continuously works if does not stop with the condition.

function countDown(n) {
    if (n == 0) {
    return 0;
    }else {
   return  countDown(n - 1)+n;
    }
}
console.log(countDown(3));

Garbage collection -

When we have defined a variable or code. Javascript saves this browser memory under a reference name. Sometimes we define many variables or something. But if we do not use this our code javascript finds out this code and removes it from the memory and another new variable assigns this memory space. Another thing is when a function uses this variable or reference value after the function execution javascript destroys the function or variable. So this whole this control javascript and that system called javascript Garbage collection.
The Garbage Collection mechanism in JavaScript is governed by two algorithms which are listed below.
1- Reference Counting Algorithm
2- Mark and Sweep Algorithm
ref-https://youtu.be/nRcoO1PEJMc?list=PLv2W1EeZUbo7A6fTAmd1vST7R-dr4KUdO

Javascript Modules

Mahin Tazuar — Fri, 28 Jan 2022 19:07:28 +0000

Module is just Javascript Es6 Feature. Inside a javascript file any script like variable, function, array, object can give access outside of the current file. This every thins is each one module. We need to use import and export to get access to this current file.
which module we want to give access to outside of the current file in this module we need to use the export keyword. Which file inside need to access this module we need to use import keyword. please check the below code you can realize how is that.

// play1.js
export let x = 'my name';
export let y = 'my hope';

// play2.js
import {x,y} from 'play1.js';
// import {x as V,y} from 'play1.js'; we can change the accesss //variable but same value we will get.
// import * everythins from './play1.js'; // we can access all //data using *

console.log(x); 

// default export
// play1.js
export let x = 'my name';
let y = 'my hope';
default y;

// play2.js
import DefaultEx ,{y} from 'play1.js';

console.log(x); 

// the condition is before using module ensures
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxtzzygd4f23kje0bvz3.jpeg) the same file is
//linked. If it using the vanilla js needs to use package.js
 with module enable code.

If we want to use default export we need to use the default keyword but it's not using the same line where it was defined. It needs to use after defining the code like abode the code example.
after default export, we can define the access name inside the import. And by default value store here. we do not need to call a specific name. We can get access to all things using *.

IIFE - Immediately invoked function expression

Mahin Tazuar — Fri, 28 Jan 2022 17:57:44 +0000

In javascript, we can call function Immediately like the below code. we know every function needs to call after determine. but in this case, we can call the function togetherly.

(function () {
    console.log('hello')
})();

// example 2

let x = (function(){
  return "my";
})();
console.log(x)

Remember Expression means its produce value and it will be inside first brackets.
Sometimes we need a local clouser environment because we know if we use multiple variables with the same name its have many possibilities for conflict with each variable. So if we are using the same name variable within a function expression it has no chance to replace the value or some things. Because the IIFE function creates a local clouser where the variable data is saved then we can use it anywhere.

Javadcript Prototype Property

Mahin Tazuar — Wed, 26 Jan 2022 18:08:20 +0000

Prototype is like some kind of inheritance concept but it's totally different from other languages. Mainly it comes for this purpose, when we are creating an object using by function constructor, we can not change property outside from that. But we can modify this functions constructor using the prototype. The condition is every time must be needed to use a new keyword.Prototype mainly works when we need to use extra object method or any object property then prototype gives access with a specific object or something where we need to get access. But you think you can add an extra method or property using '.'.Like

 let x = {};
x.play = function(){
//console.log('using method')
};

In here have a condition, you can create this method but if you want using this same method another function or object creator or etc. You need to define the code again and again. So if we are using the prototype, we can call a method or property top of the code and we can use that where we want, In this process, we do not need to write code again and again.
Remember that function creates an object using by constructor though it's working behind the scene.

let x= {  name:"mahin"} // x.__proto__
let y = [12,2,4]  // y.__proto__
function func(){ } // func.prototype

When we are initialization a function, array, object. Every time javascript is added by default some hidden property. which one is a prototype or proto. prototype only working with function. Other time working proto. Those are the same things.

let ss = {
    say:function(x){
        this.adress = x;
        return this;
    }
}
function Person(first) {
  this.firstName = first;
}
Person.prototype = ss;
const myFather = new Person("John");
console.log(myFather.say('dhajka'));
// its different for __proto__
let ss = {
    say:function(x){
        this.adress = x;
        return this;
    }
}
let Person = {
    names:'mahin'
}
Person.__proto__ = ss;
const myFather = Person;
console.log(myFather.say('mahin'));

Remember we need to use this keyword for creating an object. actually, this means an object and we know if we are want to create a new object we need to call the object. property. If you want to learn more you can explore Object.create.
sometimes, when we are completely using prototype then if we can console the object/function/array we can find a children prototype inside a parent prototype that's mean parent object data inside the first prototype and the last prototype is chield prototype.

Js Statement vs Expression

Mahin Tazuar — Sat, 22 Jan 2022 07:39:30 +0000

Expression

** When we are use any value for using insiade a variable, If else condition, Loop etc. This value initialization are called expression. Simple Statement justify the expression and do the action after considering the expression.

// Expression
'Zonayed' + ' ' + 'Ahmed';

Statement -

** Simple inside javascript when we are using second bracket after closing that we are using semicolone that's whole syntext called statement. In details statement working with expression, consider it and do the action after justify the expression.

// Statement
for(expressions) {
   //Some Code here
}

Remember if we are using arrow function inside a variable that whole things are not Statement that is called expression.

Basic Async Await

Mahin Tazuar — Mon, 17 Jan 2022 18:15:15 +0000

Async-await
when we need to work with multiple promise its very complex for handaling.And we need to use nested callback that is not easy to read and we need to use then for going the next step , That's situation called callback hell. But Async and await work more friendly , when ASYNC keyword use in a function its change the function behaviours and await control order multiple promise.If we are use async , await with promise we do not need to use then , we can fix and get the error message using with try catch syste.

var promise1 = new Promise((resolve, reject) => {
   setTimeout(() => {
      if(true) {
         resolve('Promise 1 Resolved');
      } else {
         reject('Promise 1 Error');
      }
   }, 5000)
 })

 async function hello(){
   var data = await promise1;
console.log(data);
}
hello();

Javascript Promise Basic Things

Mahin Tazuar — Mon, 17 Jan 2022 17:30:41 +0000

Promise-
Sometimes we needed asynchronous javascript behavior. suppose when we are want to get data from the internet server but we know if we want to get some data, it needs some time but javascript working synchronously it gives an error when it does not find any things.
promise just help to javascript asynchronous behavior like if have any true value it's going for resolve otherwise its return rejects call back function.I need to catch the resolved value you need to use then and if need to catch the reject message, need to use the catch function with an arrow function as a parameter.

// promise syntext
let x =10;
const promises = new Promise((resolve, reject) => {
    if (x ==10) {
        resolve('workin');
    }
    else {
        reject('working');
    }
});
promises.then((w) => {
    console.log(w); 
});

Callback Function

Mahin Tazuar — Tue, 04 Jan 2022 18:26:21 +0000

Call back function is very important for us. Because we are need to use this function regularly.
The defination is callback function -
When we are passed a function as a argument in another function. When need to call this function , we can just call this argument , and if it is run correctly as a function that is called callback function.

const getVar = () => {
   setTimeout(function() {
      console.log('A Function that takes some time');
   }, 3000)
}

const printSomething = () => {
   console.log('Another Function');
}

getVar();
printSomething();