Forem: Ankit Yadav

Writing React Components with Typescript

Ankit Yadav — Sun, 29 Aug 2021 14:12:04 +0000

Typescript and React have been a powerful combination

I've found that people are afraid to move to typescript because they think that writing typescript requires a lot of boilerplate.
Believe me, i was one of those people. I used to think the same way until i met typescript. I'll agree that at the beginning it was a bit intimidating with all the types and everything but it's fun once you get the hang of it.
Once you start using typescript, going back to Javascript feels like you've lost some power😅.At least that's what i found in my experience.
I want to take out your fear of using typescript with react and help you get started in a way that you don't feel so intimidated.
We are going to write a Functional Component using react and typescript.

Functional components with TypeScript

You can create functional components in TypeScript just like you would in JavaScript.
The main difference is the FC interface, which stands for Function Component. We use this to tell TypeScript that this is a React function component and not just a regular function.
Optionally, we can add types for the props by defining an interface and passing it to the generic FC.
A functional component then typically looks like this:

import React, { FC } from 'react';

interface TitleProps {
  title: string;
}

const Title: FC<TitleProps> = ({ title, subtitle }) => {
  return (
    <>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
    </>
  );
};

export default Title;

Now, if we go ahead and use this component in our react application, we will get some benefits like
- code autocompletion
- compilation errors in our editor that warn us when we forgot a property or use the wrong types.

Note

Generic types in TypeScript are like functions that accept parameters. Instead of parentheses, generic types use angle brackets (<>).
For the FC interface, you don't need to pass any parameters, so you could use it without a generic type by omitting the angle brackets altogether when your component doesn't accept any props:

 const Title: FC = () => {
  // ...
 }

Optional props

Not all of the props that you pass to components are need to be required.
We can make a props optional by adding a question mark to the interface:

 interface TitleProps {
  title: string; // required
  subtitle?: string; // optional
 }

This will allow you to omit the prop when you don't need it.

Alternatives to the FC interface

If you know TypeScript, you might think why I'm not applying the prop interface to the function parameters itself.

const Title = ({ title, subtitle }: TitleProps) => {
  // ...
}

this syntax works fine and you can write functions in typescript like this.
But, there is a specific reason as to why you want to use a generic type like FC because it comes with all the types that are required by a functional component.
this includes the implicit children prop. because this becomes a default prop in any functional component that you define with FC interface, we don't need to add it to our interface.

import React, { FC } from 'react';

interface TitleProps {
  title: string;
  subtitle?: string;
}

const Title: FC<TitleProps> = ({ title, subtitle, children }) => {
  return (
    <>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
      <div>{children}</div>
    </>
  );
};

export default Title;

Sometimes it's a disadvantage because FC interface always adds the children prop, regardless of whether you use it or not.

Type-safe state in function components

To have type-safety for the state in functional components, we don't necessarily need to modify our code: The useState hook inherits the type from the value we use to initialise it.
If we use a more complex type or don't initialize the state, we can pass the type like the following:

const [title, setTitle] = useState<string>(null);

Make-up of a function

Ankit Yadav — Mon, 23 Aug 2021 17:54:11 +0000

Functions or ‘procedures’ in some programming languages and ‘methods’ in most OOP languages are a set of instructions bundled together to achieve a specific outcome.

Functions are a good way to avoid repetition of code in programs.

We can Pass some values (parameters or arguments) to them and return some calculated values from them as well.

Functions act as a basic building block for any program and it is very important that we write functions in a right manner that the next person can easily understand.

what is right way? well if you go on exploring you might find a lot of articles as to how to write a function, here is my piece on what a well structured function should look like.

//naming a function is the most important task, besides the actual functionality😜
function nameThatDescribesWhatTheFunctionDoes (catSound, dog){
  //defaulting arguments, avoids dealing with undefined arguments
  catSound = catSound || "meow"

  //type checking or error handling
  if(!dog || typeof(dog) !== object || Array.isArray(dog)){
    console.warn('Function requires dog argument to be an object');
    return false
  }

  // Returning early, to reduce the CPU cycles or Memory usage
  if(someScenarioThatNegatesToRunThisFunction){
    return true
  }

  //Declare the variables that will be used in the funciton logic, this avoid the getting the values by chaining feilds
  //and make the code more readable
  const eldestPupper = dog.children[0]
  let isCat = false
  let {sam,tom} = dog.names

  //Function logic section(the actual point of the function)
  if(eldestPupper.sound === catSound){
    isCat = true
  }

  //Returning the result of logic
  return isCat;

}

There are many sections separated by comments in this function, each section can be skipped if not needed or can be much longer as well depending on the use-case, But this is generally the order you go in.

You might have several “early returns” in the “Function logic section” depending on the length.

Though it is possible to default arguments in the function definition (cat = “meow”, dog) , this violates the “Clean code” principle: “One Idea Per Line”.

This keeps the definitions short and clean, easier to scan quickly when functions are collapsed, but this is my opinion and you might like to default your arguments in a different way.

Why i emphasised on defaulting arguments inside the function is because it allows for much more complex argument defaults, like when you have a detailed object.

Either way, This is how i feel a function should be written and you might have some other ideas, feel free to share in comments.

How to split string without using JS's inbuilt spit function

Ankit Yadav — Sat, 10 Oct 2020 12:04:34 +0000

Hey fellow devs, this is my first dev blog post and today I will be cover one of the most commonly asked interview question

How to split the string without using JS's inbuilt split function?

Process

I will mark numbers at each step in the program and will explain in detail what is happening.


    const splitString = (str) => {
      let resultArray = [];              //1
      let tempString = '';               //2
      for(var i = 0; i< str.length;i++){ //3
          if(str[i] !== ' '){            //4
            tempString += str[i];        //5
           } else{                       
            resultArray.push(tempString);//6
            tempString = "";             //7
          }
      }
      return resultArray;                //8
   }

In the first step we are simply declaring an empty array where we will store our split values later.
here, we are declaring an empty string which will be used later.
In the 3rd step we are going to loop over the string provided via the argument, We will start at index(i=0) and our stopping condition will be the Total length of the string(str.length) e.g, our loop will run until the index value is less than the length of the string.
Here, we are putting a check using the if statement and checking whether the current iteration element is an empty character or not, if it is not an empty character we are moving to step 4.
here we will use the tempString string that we declared earlier.
if the present iteration character in the loop is not an empty character then we will append that character to the tempString.
if the present iteration character is empty char(' ') then we move to the else clause(step 6).
Now that we have a string without empty space we can use the array push method to push this formed string into our resultArray.
Since this is our first iteration and if we provide the string "Front end dev" then the "Front" word has now been pushed into the array and we move onto the next step.
In this next step we will set the tempString to empty because we want the next iteration to start with a fresh empty string otherwise, the next iteration will put the previous string again in the array.
Return the resultArray.

Loop will iterate until there are no words left in string

Let's look at the result if we run this function with the string
"dev life is cool"

//input
const testString = "dev life is cool";
splitString(testString);

//output
["dev", "life", "is"]

Hmmm... what happened here?🧐 you might wonder.
well, you have every right to, the last word is not being added to the array and we have to make some adjustments in our code.
this is happening because in our step 4 the if statement checks for an empty character(' ') but there is no empty space after the last word "cool" is our testString so it does not add the last word.
we will modify our code like this and add an extra step some minor changes I will show:


    const splitString = (str) => {
      let resultArray = [];              
      let tempString = '';               
      for(var i = 0; i< str.length;i++){ 
          if(str[i] !== ' '){            
            tempString += str[i];        
           } else if(tempString.trim()){     //minor change                  
            resultArray.push(tempString);
            tempString = "";             
          }
      }
      if(tempString){                      //new step
         resultArray.push(tempString);    
      }
      return resultArray;                
   }

Explaination

Minor step
I added the trim method to tempString because if in any case user provides a string with multiple spaces between words then this will eliminate them.

New Step
Nothing special in the new step, I just added an extra check because the whole string is being iterated over and that includes the last word also so in case if any word is remained in tempString just push that also to our resultArray.

Now our program will give the desired output.

GO CHECK!!!

//input
const testString = "dev life is cool";
splitString(testString);

//output
["dev", "life", "is", "cool"]

There are many methods to do this but this is how I did it, suggestion is always welcome if you guys have other ideas about how I can refactor this code better.

Happy Hacking🥳