Forem: SAIFUL ISLAM (Fahim)

Limitation of the TypeScript type system

SAIFUL ISLAM (Fahim) — Tue, 30 May 2023 13:23:05 +0000

In TypeScript, when you use a type alias with a return type of void for a function, it does not enforce that the function actually returns void. This is a limitation of the TypeScript type system.

Type aliases in TypeScript are used to create reusable type definitions, but they do not provide strict runtime enforcement. When you define a type alias with a return type of void, it serves as a hint or documentation for the expected return type of the function. However, TypeScript does not enforce that the function adheres to that return type.

Here's an example to illustrate this behavior:

typescript Copy code:

type MyFunctionType = () => void;

const myFunction: MyFunctionType = () => {
  return "This doesn't match the expected return type";
};

console.log(myFunction()); // Output: "This doesn't match the expected return type"

In the example above, we define a type alias MyFunctionType for a function with a return type of void. However, the implementation of myFunction actually returns a string, which doesn't match the expected return type. TypeScript doesn't raise any error for this mismatch.

It's important to note that type aliases are purely a compile-time construct in TypeScript. They provide improved readability and maintainability by giving names to complex or reusable types, but they don't introduce runtime checks or strict enforcement of the defined types.

If you need strict enforcement of return types, you can use TypeScript's built-in function syntax to specify the return type directly in the function signature, like this:

typescript Copy code

function myFunction(): void {
  return "This will cause a compile-time error";
}

With this approach, TypeScript will correctly raise an error because the function is declared to have a return type of void, but it's actually returning a string.

Test

SAIFUL ISLAM (Fahim) — Thu, 12 Jan 2023 16:34:23 +0000

Welcome To DEv

Started with Redux Toolkit

SAIFUL ISLAM (Fahim) — Thu, 24 Feb 2022 17:12:22 +0000

What is Redux?
Redux is an open-source JavaScript library for managing and centralising application state.

Why is it more preferred?
While working as a Front-end Developer or Full Stack Developer, many engineers encountered Redux. But Recently Redux Team launched Redux Toolkit, an officially recommended and a SOPE library that stands for Simple, Opinionated, Powerful, and Effective state management library. It allows us to write more efficient code, speed up the development process, and automatically apply the best-recommended practices. It was mainly created to solve the THREE MAJOR ISSUES with Redux:

Configuring a Redux store is too complicated
Have to add a lot of packages to build a large scale application
Redux requires too much boilerplate code which makes it cumbersome to write efficient and clean code.
It also provides the automatic support for Redux Dev-tools Extension and for immer.js library which is a great tool to deal with immutable objects. You can also use the various predefined functions of Redux Toolkit which not only speeds up the process but also saves time.

Dependencies that comes along with Redux Toolkit:

immer
redux
redux-thunk
reselect

Purpose
The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:

"Configuring a Redux store is too complicated"
"I have to add a lot of packages to get Redux to do anything useful"
"Redux requires too much boilerplate code"
We can't solve every use case, but in the spirit of create-react-app and apollo-boost, we can try to provide some tools that abstract over the setup process and handle the most common use cases, as well as include some useful utilities that will let the user simplify their application code.

Redux Toolkit also includes a powerful data fetching and caching capability that we've dubbed "RTK Query". It's included in the package as a separate set of entry points. It's optional, but can eliminate the need to hand-write data fetching logic yourself.

These tools should be beneficial to all Redux users. Whether you're a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.

Installation
Using Create React App
The recommended way to start new apps with React and Redux is by using the official Redux+JS template or Redux+TS template for Create React App, which takes advantage of Redux Toolkit and React Redux's integration with React components.

Redux

npm install redux

Redux + Plain JS template:

npx create-react-app my-app --template redux

Redux + TypeScript template:

npx create-react-app my-app --template redux-typescript

You can also go to the redux documentation page for more knowledge. Here redux inform link: https://redux-toolkit.js.org/introduction/getting-started

collected from redux toolkit