In web development, there are plenty of options regarding the programming language, library, and/or framework you want to use. Let’s discuss using TypeScript!

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.

#developer #react #typescript #react for beginners