What Is TypeScript?

Jubayer Hossain — Sat, 05 Mar 2022 03:16:52 +0000

In One sentence, TypeScript is a superset of JavaScript. It was developed by Microsoft in 2012.

Let's see why the TypeScript language exists in this world.

TypeScript solves some common problems of JavaScript by adding some additional features on top of the JavaScript language.

We know that Javascript is a dynamically typed language. For this, we don't need to think about data types while writing code. But there is some problem.

Look at the below code snippet to understand the problem.

const add = (a) => (b) => a + b;
add(1)(2) // 3 (expected result)
add(1)('2') // '12' (unexpected result and no error)

We can see that when we pass two numbers to the add function it gives us a return value which is number as expected. But when we pass a string and a number it gives us another string as a return value which we are not expecting.

To fix this kind of problem TypeScript implemented the feature of statically typed language in JavaScript. Let's see the above example in typescript.

const add: (a: number) => (b: number) => number =
    (a) => (b) => a + b
console.log(add(1)(2)) // 3 (expected)
console.log(add(1)('2')) // Error --> Argument of type 'string' is not assignable to parameter of type 'number'.

In the add function, we have defined that parameters a and b will be number. So when we pass two numbers we get our expected result. But when we pass a number and a string TypeScript compiler gives us an error. In modern IDE, the error will be shown instantly after writing the line. You don't need to compile it to catch this kind of error.

Does TypeScript replace JavaScript?
The answer is no. As browsers still don't understand the TypeScript language, we have to compile our TypeScript code to JavaScript for making the code workable.

We have seen what typescript is in short. But it has some huge topics to explore. Check their official documentation to know more.
There is also a playground to play with the typescript language.

What is redux?

Jubayer Hossain — Fri, 25 Feb 2022 13:38:36 +0000

According to the official documentation, Redux is a predictable state container for JS apps.

Let's break down the definition they provided. We get 2 main keywords here. They are 'predictable' and 'state container'.

We will start with the term 'predictable'. It means that we 'll have a complete idea of every single action and state of our application.

The other term 'State Container' refers to a container or store that will be provided by redux for storing our entire application state.

Image source

Now let's come to the point how redux maintains the 'predictable' and 'state container' terms. Actually redux provides some events called 'actions' that can be used to update and manage our application state. But we have to follow certain patterns and rules of redux which will help us to predict our application state.

Okay we have an initial idea of what redux is, but what problem does it solve?

Let's imagine you are building a large scale React application. So there may be many components holding different states. If we want to pass this state from component to component we have to pass them as props again and again. And there is also the problem of 'lifting state up' arises. Redux solves this problem and gives us a centralized store to keep our state. We can easily access and modify our state by following some rules and patterns of redux.

We have got a basic overview of what redux is and why it is useful. Let's look at how it works all together in an application.

Firstly we have to create a store with the help of the root reducer function that will be provided by redux. There will be an initial state configured with the store. Our UI will be rendered based on the initial state. Now if we want to change something in our UI based on user interaction we have to modify the store. For performing this action redux provides a function called dispatch. Change in store forces all the parts to re-render that are using the previous state. Let's visualize this.

Image source

Redux also provides some cool libraries and tools like react-redux, redux-toolkit, redux dev tools. They have made our life easier.

For exploring more you can check out their official documentation.

DEV Community: Jubayer Hossain

What Is TypeScript?

What is redux?