React & Typescript: The perfect toolbox

Published

September 20, 2018

Roughly 5 years ago, two remarkable ideas for web development were born in the JavaScript ecosystem. One was the React Library which was built by Facebook developers, the other was Typescript, a JavaScript transpiler built by Microsoft.

Typescript was built to solve the lack of types in JavaScript and to enable more capabilities like annotations, classes, enums, decorators, and interfaces. Since both tools were designed to solve problems, you can combine them to create the ultimate web developer toolbox. If you're interested in all the Typescript goodies, the official handbook is all you need.

The React Library is now a de facto choice for Silicon Valley projects with mature solutions and for a sizeable community of developers. It has a pretty simple concept; every single user interface on a website acts as a component. The main API (Application Programming Interface) is a minimal implementation which includes properties or props, state, and life cycles.



This example illustrates a common problem. My component is called (Notification) and I'm using the representation of a custom HTML element.

<Notification message="My message to the world" />



Let's imagine building a large scale application with more than 20+ components, how many attributes does each component have: two or three? Can you remember every single attribute? What happens if my property is represented by an object?

vadim-sherbakov-36-unsplash

Now put your project in context:

What happens if your team grows, and new front-end developers join the team? What if the documentation is not up to date?

Luckily, the code can be almost "self-documented" with TypeScript. For developers coming from a Java background or C#, this feels familiar.

The use of types keeps the code well organized, and prevents silly errors like assigning wrong types or creating the wrong object structures for a specific functionality. In addition, projects are more maintainable, and you can easily refactor code.

In summary, I have a quick list of pros and cons:

Cons:

  • JavaScript libraries may not all be ready for TypeScript
  • Compilation time can be significant with large apps
  • If you use it, you need to learn the JavaScript API to avoid ugly bugs
  • There is a steep learning curve for web developers with no Object Oriented Programming background

Pros:

  • Maintainability
  • Object-oriented features
  • Type Safety
  • React properties and states can be represented by interfaces, and can make use of both required and optional attributes. This is very useful.
  • IntelliSense or autocompletion magic.

Thanks for reading, I hope you’ll give these useful tools a try!

Resources:

Sites Using React
https://github.com/facebook/react/wiki/Sites-Using-React

Typescript Official Handbook
https://www.typescriptlang.org/docs/handbook/basic-types.html

ReactJs
https://reactjs.org/docs/getting-started.html

Get in touch

We'd love to hear
from you

This field is required
This field is requiredThe email address is invalid.
You must consent to the Privacy Policy

Thank you

We will get back to you as soon as we can.