Today, while we extensively use social media like facebook, twitter or others; our screen, page, feed, etc., is constantly being updated with the latest news, shares, articles, or other latest updates. This is an essential element contributing towards the success of any social media platform. If one were to stop and think about this; it seems very simple and rudimentary, but they are in fact highly expensive in terms of performance. These continuous live update of the front end are technically called DOM operations and they are crucial for the smooth performance of a page.
To tackle this tricky problem a combination of React and TypeScript can be used as it is efficient and it can improve the maintainability of React projects considerably.
In the below code, there is a typo. The programmer has typed inrecieve instead ofreceive
Advantages of TypeScript:
- Typescript will provide compile-time errors for most common problems in a React project, such as:
- All required properties for a React component is not supplied from parent
- Property supplied as a different type from the parent component
- The extra property which is supplied to React component from the parent (This will avoid proptypes library which is commonly used in react projects)
- If we are using Visual Studio code (VS code) for the react-typescript combination, even the above-mentioned problems will be shown as inline errors which further reduces the time taken to figure out the mistakes.
See the screenshot from VS code:
- State of a react component is defined as a TypeScript interface. This will avoid problems due to null values in states of react component. Typescript will throw an error at compile time if we did not give the default state values at initialization.
Drawbacks on TypeScript :
Even though there are many advantages, TypeScript also has some drawbacks when we start using it in on a large scale. Without the type declarations for the exported attributes and methods for a third party library, we do not get to fully utilize the benefit of TypeScript. So if there is a library which does not have any type definitions, we need to write it our own or look for alternative libraries which provides type definitions. From our experience in web projects, most of the type definitions are available as node modules, thanks to the contributors of open source community. If the project is a React- Native project, things get complicated further due to the availability of type definitions.