DEV Community: Rahul Raj

RUNME: Run your readme.md

Rahul Raj — Sun, 23 Oct 2022 06:28:13 +0000

It is a waste of time to copy and paste the scripts from README.md file to execute in the terminal.
To save us from doing this there is a extension Runme which helps us execute the code directly from the README file without any hassle.

Consider you are having these in your README.md file

Install dependencies

npm install

run nodemon

npm run start:dev

RUNME extension shows it like:

and from the tiny run button in the left you can execute the commands from README.md

Try it once, You will feel the need to have the extension with you.

If you like the post follow me for more.

Rahul RajFollow

I am a developer who is trying to improve myself day by day.

How I code?

Rahul Raj — Wed, 31 Aug 2022 09:35:44 +0000

While staring to code I have done a lot of mistakes and that helped me learn new concepts in JavaScript and the DRY principle. Consider the below transformation logic.

// The source data type coming to be transformed
interface ISourceData {
  id: number;
  name: string;
  email: string;
  country: string;
  active: boolean;
  isPro: boolean;
}

// The data that will be loaded to the db
interface ITargetData extends ISourceData {
  modifiedBy: string;
  modifiedOn: string;
  createdBy: string;
  createdOn: string;
  isValid: boolean;
}

During my initial development days I would have written my code like this:

class Transformation {
  public async transform(data: ISourceData[]) {
    const transformedData = data.map((item) => {
      let isValid = false;
      if (item.active === true && item.isPro === true) {
        isValid = true;
      }

      const modifiedBy = "System1";
      const modifiedOn = new Date().toDateString();
      const createdBy = "System1";
      const createdOn = new Date().toDateString();

      return {
        id: item.id,
        name: item.name,
        email: item.email,
        country: item.country,
        active: item.active,
        isPro: item.isPro,
        isValid: isValid,
        modifiedBy: modifiedBy,
        modifiedOn: modifiedOn,
        createdBy: createdBy,
        createdOn: createdOn,
      } as ITargetData;
    });
    // Loading the data to database
    transformedData.forEach(async (item) => await loadToDb(item));
  }
}

This code have 1 major issue and can be written in a much better way.

Issue:
async-await does not work with forEach. So the flow will not be asynchronous.

Now, here is how I write codes now, Which I will improve if needed.


const CREATED_BY_USER = "System1";
class Transformation2 {
  public async transform(data: ISourceData[]) {
    for (const item of data) {
      const transformedData = this.getTransformedData(item);
      await this.loadToDb(transformedData)
    }

  }

  private getTransformedData(sourceData: ISourceData): ITargetData {
    return {
      ...sourceData,
      ...this.getIsValid(sourceData.active, sourceData.isPro),
      ...this.generateDefaults(),
    } as ITargetData;
  }

  private getIsValid(active: boolean, isPro: boolean) {
    return { isValid: active && isPro };
  }

  private generateDefaults() {
    const transformationDate: string = new Date().toISOString();
    return {
      modifiedBy: CREATED_BY_USER,
      modifiedOn: transformationDate,
      createdBy: CREATED_BY_USER,
      createdOn: transformationDate,
    };
  }

  private async loadToDb(data: ITargetData): Promise<void>{
    // logic to load the data to database
  }
}

You can see the difference clearly,

Multiple private methods that have specific tasks.
CREATED_BY_USER const variable as it won't change.
transformationData is now an ISO string instead of date & day earlier : "Wed Aug 31 2022" now: "2022-08-31T09:30:16.579Z"
getIsValid method working specifically to get me the isValid key data.
De-structuring to get the data into the format needed.
for-of loop that works perfectly with async-await.

If you like the post follow me for more

Rahul RajFollow

I am a developer who is trying to improve myself day by day.

Conditional Statements: Part 3

Rahul Raj — Mon, 06 Jun 2022 07:50:18 +0000

Still we can improve our conditional statements. How?

Checking the conditions and returning the response at the same time.

// Legacy conditional statement
  function getDesignation(designation?: number): string {
    let designationInString: string;
    if (designation === undefined) {
      designationInString = "";
    } else if (designation === 1) {
      designationInString = "Dev";
    } else if (designation === 2) {
      designationInString = "QA";
    } else if (designation === 3) {
      designationInString = "Analyst";
    } else {
      designationInString = "";
    }
    return designationInString;
  }

But we can do better than this now.

// New conditional statement
  function getDesignation(designation?: number): string {
    const designationList: {[key:number]: string} = {
      1: "Dev",
      2: "QA",
      3: "Analyst",
    };
    // Always check for the non valid conditions first
    if (!designation) return "";
    return designationList[designation] || "";
  }

In this way we can even have our designationList outside the function and get the desired designation.

If you like the post follow me for more

Rahul RajFollow

I am a developer who is trying to improve myself day by day.

Conditional Statements: Part 2

Rahul Raj — Tue, 22 Mar 2022 13:39:52 +0000

The issue with legacy conditional statements.

The main issue is, it is ugly and boring. See the Part 1.

It takes a lot of time to write conditions and maintain them consider the below.

  private demo(myVar: string): string {
    if(myVar === 'condition') {
      return myVar.substring(1,3);
    }
    if(myVar === 'demo') {
      return myVar.substring(1,2);
    }
    if(myVar === 'thing') {
      return myVar.substring(1,4);
    }
    if(myVar === 'demo1') {
      return myVar.substring(1,5);
    }
    if(myVar === 'demo5') {
      return myVar.substring(1,2);
    }
    return '';
  }

Now the above code can be good in some case but we can do better.
USING OBJECT FOR CONDITIONING

  private demo1(myVar: string): string {
    const myObject: { [key: string]: string; } = {
      'condition': myVar.substring(1,3),
      'demo': myVar.substring(1,2),
      'thing': myVar.substring(1,4),
      'demo1': myVar.substring(1,5),
      'demo5': myVar.substring(1,2),
    }
    return myObject[myVar];
  }

  demo1('condition');

It will work same as the above if statements but it is a clean code.

Want to check the default condition as well?

  private demo1(myVar: string): string {
    const myObject: { [key: string]: string; } = {
      'condition': myVar.substring(1,3),
      'demo': myVar.substring(1,2),
      'thing': myVar.substring(1,4),
      'demo1': myVar.substring(1,5),
      'demo5': myVar.substring(1,2),
      default: '',
    }

    if(!myObject[myVar]) return myObject['default'];
    return myObject[myVar];
  }

This reduces the overall cognitive complexity as well.

With this we can even have function calls.

  public coc(troopName: string, quantity: number): string {
    const bookForCOC: { [key: string]: any } = {
      'barbarian': () => quantity > 30 ? 'Use it behind kind' : 'Use it to destroy',
      'archer': () => quantity > 20 ? 'Use it behind queen' : 'Use it to destroy',
      'balloon': () => quantity > 20 ? 'Use it behind dragons' : 'Use it after air defense is destroyed',
      'dragon': () => quantity > 3 ? 'Use it at a single place' : 'Use it anywhere else',
      default: () => 'Use some good troops to win'
    }

    if(!bookForCOC[troopName]) return bookForCOC['default']();
    return bookForCOC[troopName]();
  }

This can be used as an alternative for conditional statements

If you like the post follow me for more

Rahul RajFollow

I am a developer who is trying to improve myself day by day.

Conditional Statements : Part 1

Rahul Raj — Tue, 22 Mar 2022 12:23:30 +0000

There are a lot of conditional statements in programming but how we can utilize them in a better way?

Consider the below code

  private demo(myVar: string): string {
    let myReturnVar: string;
    if(myVar === 'condition'){
      myReturnVar = 'It is condition';
    }else {
      myReturnVar = 'It is not condition';
    }
    return myReturnVar;
  }

  demo('condition'); // 'It is condition'
  demo(''); // 'It is not condition'

With a cognitive complexity of 4 it fulfills our need but is it good?
As a developer we are expected to write clean code. And the above can be modified to be better.

Process of modification:

Why to use a variable myReturnVar when we can directly return the value as we are not going to utilize it except returning.
Once we return the data why we need a separate else statement to check. Let us see the below code:

  private demo(myVar: string): string {
    if(myVar === 'condition'){
      return 'It is condition';
    }
    return 'It is not condition';
  }

The cognitive complexity remains the same (4) but now the code is cleaner then the previous.

But do we really need a if-else condition, we can do it using a ternary operator which reduces the complexity to (3)

  private demo(myVar: string): string {
    return myVar === 'condition' ? 'It is condition' : 'It is not condition';
  }

By the above we can say that if there is a single line check it is better to use a ternary operator.

What about large conditions?

  private demo(myVar: string): string {
    if(myVar === 'condition') return 'C1';
    if(myVar === 'demo') return 'C2';
    if(myVar === 'thing') return 'C3';
    if(myVar === 'demo1') return 'C4';
    if(myVar === 'demo5') return 'C5';
    return '';
  }

  private demo1(myVar: string): string {
    switch (myVar) {
      case 'condition': return 'C1';
      case 'demo': return 'C2';
      case 'thing': return 'C3';
      case 'demo1': return 'C4';
      case 'demo5': return 'C5';
      default: return '';
    }
  }

We can do it in both ways with cognitive complexity of (12) & (14) respectively.

There are always better ways to write the conditional statements.
We will continue going through those soon.

If you like the post follow me for more

Rahul RajFollow

I am a developer who is trying to improve myself day by day.

Create generic methods in TypeScript

Rahul Raj — Sat, 12 Mar 2022 08:58:22 +0000

Have you ever have to create methods where the return type is not predefined or is based on some input we give.
Consider the below:

  public getFirstItem(items: string[]): string {
    return items[0];
  }

  public logicX(): void {
    const item = this.getFirstItem(['alpha', 'beta', 'gama']);
    console.log(item) // 'alpha';
  }

The above will return a string which will be assigned to items variable which is string.

What if you want to get first data of number array instead of string array. Like :

  public logicY(): void {
    const item = this.getFirstItem([1,2,3,4,5]);
    console.log(item);
  }
// You will get the below error
Type 'number' is not assignable to type 'string'.

So what to do then.
The initial logic is to use union | symbol like:

public getFirstItem(items: string[] | number[]): string|number {
    return items[0];
  }

This might solve your problem now but what if I want the first element from Boolean array. There will be again a modification needed to accommodate the Boolean parameter.

public getFirstItem(items: string[] | number[] | boolean[]): string|number|boolean {
    return items[0];
  }

And the logic will go on and on 💤💤

Now there comes the generic method creation 😊. It will help us to decide the datatype while calling the method.

  public getFirstItem<T>(items: Array<T>): T {
    return items[0];
  }

  public logicX(): void {
    const item = this.getFirstItem(['alpha', 'beta', 'gama']);
    console.log(item) // 'alpha';
  }

  public logicY(): void {
    const item = this.getFirstItem([1,2,3,4,5]);
    console.log(item); // 1
  }

OR 
  public logicX(): void {
    const item = this.getFirstItem<string>(['alpha', 'beta', 'gama']);
    console.log(item) // 'alpha';
  }

  public logicY(): void {
    const item = this.getFirstItem<number>([1,2,3,4,5]);
    console.log(item); // 1
  }

So now you can call the method and the Type will be automatically added or you can add the type whenever you are calling the method.

You can more than one Type and get the result like below:

  public getStringFromTwoArray<T, T1>(item1: Array<T>, item2: Array<T1>): string {
    return item1[0] + ' ' + item2[0];
  }

Now in the above there will be to array whose datatype will be defined while calling.

Get to know about different array types

Array<Type> vs Type[] vs [Type] in TypeScript

Rahul Raj ・ Mar 11 ・ 1 min read

#typescript #programming #beginners #codenewbie

If you like the post follow me for more

Rahul RajFollow

I am a developer who is trying to improve myself day by day.

Power of destructuring

Rahul Raj — Fri, 11 Mar 2022 15:15:49 +0000

Destructuring is a blessing to JavaScript and TypeScript developers.
Destructuring works for both Object & Arrays.

Object Destructuring

Consider the below object:

const myObject = {
  userFirstName: 'Rahul',
  userLastName: 'Raj',
}

How will you fetch the firstName and lastName in separate variables.

const userFirstName= this.myObject.userFirstName;
const userLastName= this.myObject.userLastName;
console.log(userFirstName) // Rahul
console.log(userLastName) // Raj

OR
You can use the destructuring.

const {userFirstName, userLastName} = this.myObject;
console.log(userFirstName) // Rahul
console.log(userLastName) // Raj

This simple 1 liner will get you your values in the keyName variable.

You don't like the lengthy variable name 🤔
Change it to your desired names by giving an alias name.

const {userFirstName: fN, userLastName: lN} = this.myObject;
console.log(fN); // Rahul
console.log(userFirstName); // Will through error

So you have learnt almost everything about object destructuring.

Array Destructuring

Array destructuring is similar to Object destructuring but it is used when we know the number of elements or need the initial element to work with.

    const userDetails:string = "Rahul,dev.to,rahulrajrd";
    const [name, website, username, noItemCheck] = userDetails.split(",");
    console.log(name); // Rahul
    console.log(website); // dev.to
    console.log(username); // rahulrajrd
    console.log(noItemCheck) // undefined

🟥 Important Note.

If the returned value is less than the assigned value as shown above the value will be undefined.

If you like the post follow me for more

Rahul RajFollow

I am a developer who is trying to improve myself day by day.

Array vs Type[] vs [Type] in TypeScript

Rahul Raj — Fri, 11 Mar 2022 10:12:49 +0000

There are a lot of ways to define array in TypeScript. But when we can use it 🤔? There is no specific rules to use but we can see the differences.

Array<Type> : It is same as Type[] but is preferred when using different types in the array. Ex

const firstArray:Array<string|number> = [1,2,'alpha'];

Type[] : It is a simple array of a single type. Ex

const secondArray:string[] = ['alpha','beta','gama'];

[Type] : It is a way of defining a tuple, a fixed size array. Ex

const thirdArray:[string, number] = ['alpha', 21];

Where we should use the different array formats.

Well it is quite simple to follow.

When you are having a single datatype and length is unknown then type[] can be used.
When the datatype and length both are unknown Array<type | type> can be used.
When there is very small size array with specific datatype in each position then Tuple can be used [string, number].

If you like the post follow me for more

Rahul RajFollow

I am a developer who is trying to improve myself day by day.

Create NuxtJs Project with Typescript and Classes

Rahul Raj — Wed, 09 Mar 2022 08:10:08 +0000

If you ever wanted to create a new nuxt(vue) project from scratch this might help you to add the basic setups needed for it.

Initiate a nuxt project with npm & TypeScript

npm init nuxt-app <project-name>

You will get an option to select the language you can select TypeScript.

Change the directory and install some dependencies to use Class based components

Install the property decorator Nuxt Property Decorator

npm i nuxt-property-decorator

Installing sass (Optional) SASS

npm i sass-loader sass webpack --save-dev

Now you are good to go use the components and everything like a class.

If you like the post follow me for more

Rahul RajFollow

I am a developer who is trying to improve myself day by day.