Extending TypeScript types is easy with Generics, which is pretty dynamic, but it is not re-usable, and we often end up with code duplication. Let’s explore how to dynamically extend types with TypeScript to avoid this.

Let’s first define some entities and their relationship.

We have a Token entity, that has an array of Offer entities that have an array of Bid entities.

So let's create types for them:

// Token.ts

import { TokenStatus } from '../enums/TokenStatus';

export type Token = {
id: string;
name: string;
amount: string;
metadata: Record<string, string>;
status: TokenStatus;
created_at: string;
};

// Offer.ts

export type…

Every so often when a new technology comes up we believe that it should replace the old one, with which I don’t agree completely.

For example, we have Apollo GraphQL which handles your async calls, state caching … so it looks like it is all you need. Well, what if you are a bit old school and you want your async away from your components, and your state-controlled by you, lets see how we can do that with apollo and redux.

Since I want the GraphQL client to be in charge just of my API calls, I will make it…


If you have a Node.js application, and it is about to be or has already been shipped to production, chances are you need to run it in cluster mode!

Photo by James Harrison on Unsplash

First of all, let’s go through the basic needs of our project. Imagine that you have some API written in NestJS and you want to run it in cluster mode as you should. And also, for sake of this conversation, let’s assume that as with every project so far, your project needs to be able to expand by adding new microservices from your mono-repo code base.

First, we should create ConfigService…


If you are not living under a glass, and you have seen a React code in the past two years you have seen the React Context in action. Context is such a powerful feature, and for all of us that are doing React for a while, it meant salvation from prop drilling and removal of container class components, and dare I say Redux as well 😱.

However, it’s quite easy to get lost in Context provider hell, because before you blink your code will start to look like this:

<ContextProvider1>  <ContextProvider2>    <ContextProvider3>      <ContextProvider4>        ....      </ContextProvider4>    </ContextProvider3>  </ContextProvider2></ContextProvider1>

This is…


TypeScript Generic types are incredibly powerful, they allow us the type compositions which is an amazing pattern that can be used in every TS project.

How to use Generics?
Using generics is really simple, we just need to tell TS that our type accepts other types to be “complete”.
so if we have some type A with some dynamic property “dynamicObj” based on place of usage, it is hard to define all property types statically because we need to specify all possible types for “dynamicObj”.

type B = {
keyA: string;
keyB: string;
}
type C = {
keyT…

We use NestJs interceptors and guards daily, and most often we do not need to wrap them into factories, but every once in a while we need to pass an argument statically to them when we decorate some controller or some controller’s method.

Task:

Let’s say that we need to send some metrics, KPI, to track usage of our app. So essentially on some actions, we want to send an event to the messaging queue so it can later be processed by some analytics service.

Solution

So we know we need a particular KPI event to go with the message, so the…


Due to the complexity of the ABAC model, and the “oversimplification” of the RBAC model there is a need to build hierarchies between RBAC and ABAC models. This approach is called EBAC (Entity Based Access Control)

EBAC is a simple subset of ABAC and doesn’t bring to the table any new concepts rather than a simplified model of ABAC.

Under the EBAC model, we will first use the RBAC engine in order to quickly determine the user’s first access layer and then we will operate the ABAC model in order to evaluate the requested entity.

Dynamic Roles

  • The role is just a…

There are a couple of use cases for using canvas to optimize, change, resize or just show the user uploads. Since React is our library of choice, let’s dive into how we can create a simple but powerful hook to achieve expected app behavior.

https://i1.wp.com/onaircode.com/wp-content/uploads/2018/03/HTML5-Canvas.jpg?resize=1280%2C640&ssl=1

Let us imagine that we are building some sort of web app with React and it happens that our app has a user profile section where users can add cover/profile photos in order to personalize their profiles.

Users, of course, have the ability to import their profile data, and in that case, we need to be…


https://www.wpstuffs.com/wp-content/uploads/2017/08/infinite-scroll-wordpress.jpg

Infinite scroll is one of those really nice to have and really hard to make features, here I will show you hao you can do just that in two lines of code with a little helper library called react-use-infinite-scroll.

https://www.npmjs.com/package/react-use-infinite-scroll

So assume that we already have a React project set up, let’s install this library

npm install react-use-infinite-scroll

or

yarn add react-use-infinite-scroll

If we say that we have some home page that needs to load more entities, we will usually track the position of the scrollbar on the screen, we will have to worry about subscribing/unsubscribing on window events and…


By now we have all heard to so many times that components should not handle async actions as Http requests, that that should be abstracted from them in some higher layer. If you are using Redux you will probably use thunks or sagas, if you are using Context you will do the actual Http calls in that context provider layer.

https://i.udemycdn.com/course/750x422/2337614_baa8_5.jpg

That is all clear, I guess, for reference, I wrote about handling state with async actions and http calls with context while implementing redux like architecture before

Now let’s focus on the subject of this post, and that is how…

Radovan Stevanovic

Highly motivated, dedicated developer. I’m also a functional programming enthusiast and that is something that I’m exploring in the last couple of years.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store