Button.proptypes computer screen

In web development, there are plenty of options regarding the programming language, library, and/or framework you want to use. Choosing one over another will, of course, have its positive and negative aspects.

I am pretty familiar with ReactJS, this being the framework for front-end development where I am currently working. To give you a bit of context, we’re developing a flipbook-making tool used by millions of people worldwide. The pressure is high to deliver the best bug-free code.

Lately, we started working on some really awesome upgrades in our app and decided to try something different. After some research, we found that TypeScript in combination with React was the missing puzzle piece.

“TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions”, as mentioned on the official site.    

What do types mean? Let me show you a short example:

const myConstant: string = “Hello world!”

This sets the type of myConstant to string. It’s extremely useful if we ever want to use it as a value where we would need a string. TypeScript will first check the type we need and then will check the type of our constant. If it is not a string as it would require, then it will throw us an error.

There are multiple types that can be used, the most common of which are string, number, and boolean. But we should also mention that arrays, functions, or objects are among other declarable types. You can even go as far as declaring custom types, depending on what you need.

Typings are a huge help for developers because it makes code much easier to read and understand. As a developer, if you have to debug or extend on a component or function, having those types also gives you a better understanding of what is happening or what is needed.

React is at its best when combined with Typescript and in order to do so, you have to create a TSX file (which will enable the use of JSX). Now it’s time to build a component. As an example, I will create a button component that receives URL, label, and color as props.

Before we start, we know what our props will be, so it’s time we create an interface for our component, which is an object structure that defines the contracts within the code. The interface contains information about properties and their respective types.

interface ButtonProps{
url?: string;
label: string;
color: string;

An interesting thing to mention here is how the type of the URL is declared, using the question mark. This means that the URL property is optional and that the app will run without errors if the URL property is not used.

Now it’s time we build the base of our component. As always, we need to import React and as an addition, import FunctionComponent and ReactElement. FunctionComponent is a type that makes sure the Button component has the correct type. In our case, that is a functional component, and ReactElement is the type that the return value should have(JSX).

import React, 
{ FunctionComponent, 
ReactElement } 
const Button : FunctionComponent < ButtonProps > = (
  { url = ’ #’,
  } : ButtonProps
): ReactElement => (
  < div > < a href = {url} style = {{ backgroundColor : color, 
  padding : 10, }} > { label } </ a > </ div >

If you know React, this will seem pretty familiar, but there are some differences. First things first, we can see that the declaration of our component starts as normal, but then there’s this: “FunctionComponent<ButtonProps>”. This means that our component is a Functional Component that receives a set of properties of the ButtonProps type. After that, we just destructure the props and declare the return type of our functional component; in this case, it will be a react element.

Now we have to declare our propTypes:

Button.propTypes = { url : PropTypes.string, 
label : PropTypes.string.isRequired, 
color : PropTypes.string.isRequired, 
} Button.defaultProps = { url : ‘ #’,

What is really important is that we respect the type declaration of the properties declared stated in the ButtonProps interface, or else there will be errors. As mentioned earlier, in our interface we declared the URL property is optional, meaning that in our props we have to give it default, but that default needs to be a string. In our case, we just inserted an empty string and this works just fine. For example, if we would change the label prop and add a default to it because it is declared as required in the interface, typescript will throw an error.

This was a simple component just to prove how TypeScript can be used with React for better maintainability. Here you can make your own custom hooks and functions, but you need to respect some rules. For instance, when writing a function, you have to give types to the parameters: “const myFunction = (param1: string, param2: number) => {}”; and if we want to go the extra mile, we can declare the type of the return value: “const myFunction = (param1: string, param2: number): boolean => {}”

These are the barebones from which you can build on and learn more on your own about TypeScript with React. I know, you’re probably asking yourself: “Why learn to integrate TypeScript to my project when it just looks like React with extra steps?”

Let me give you a few answers to this:

  1. The code is easier to read and understand: You know a code is really good when you can pretty much understand what is going on from factors, like how variables are named and how simple the code itself is.TypeScript only enforces this. By adding type checking here, the developer will no longer have to take a guess about what a variable/parameter is supposed to return or represent. They can now have a better understanding of that.
  2. Fewer errors: Although no one really likes them, bugs do happen. Especially after releasing a new feature. It happens to all of us, unfortunately. While this will always happen… TypeScript can reduce the number of potential bugs, thanks to the type checking feature. Knowing the type of every variable and prop in your component will help debug your code if something goes wrong. Additionally, TypeScript errors are pretty specific and will let you know when a wrong type was received.
  3. Better compiler validation: This is a really awesome aspect because, in React, the main issue with PropTypes is that they will always operate during run time. Depending on the build, it might take some time until you can get the type checking feedback. With TypeScript, however, the type validation is done before the program is even run. The compiler will always detect these problems and throw an error, saving you time. Imagine, it’s like having someone sit next to you, who is very alert and will notify you every time you make a type error. Life-saving!
  4. Libraries support: Thanks to its immense growth in the past years, TypeScript now supports Reacts’ most popular libraries like Redux, React Router, and MaterialUI with type definitions, which means that this will not affect you too much as a React developer, and you will still be in familiar territory.


These are some good examples of why it is worth giving TypeScript a shot. Yes, it can be a bit challenging at the beginning, when making more complex components, but after getting used to it, the end result will be more readable and have a more stable code. Just take your time, especially in the early stages of learning. Hang in there and remember that this will be worth it in the long run.  

Source link

Write A Comment