This content originally appeared on Bits and Pieces - Medium and was authored by Seniya Sansith
How you can get the most out of using TypeScript with React.
TypeScript has been in the game for almost a decade now. But still, newcomers to the React ecosystem get confused and do not utilize the advantage of TypeScript in their projects. And when the project grows, the code quality and maintainability go down. In this story, I have jotted down some of the actions you can take to get the most out of the advantages of using TypeScript with React.
First of all, do you need TS?
Let me put it like this, Think of javascript as a large forest and you (the developer) are the one who wants to go through it and reach the treasure of the next salary increment or promotion. What would you do? Yeah, You need someone to guide you through this giant forest right? Think of Typescript as a map that will warn you about the potential pitfalls through the road.
So would you enter the forest without the map?
The following points elaborate on the actions you can take to make your new React/TS project more maintainable.
1. Always share
Keeping sharable types inside a common folder is a good practice. If your application has base data models you can get started with that. I would suggest keeping a folder called models to keep all your shareable types including utility types and domain data models inside it.
Also when it comes to domain-based data models you can use typescript “namespaces” to encapsulate the types and expose them.
2. Create atomic types
When creating domain types make sure to break down the types into smaller pieces. I am not suggesting breaking down all the way down which would mess up your type system. As an example, you can extract the common enums into a separate type and reuse them to create compound types.
Consider you have User and Product, domain models. In both types, there is the status type, and the literal types have been used for gender and status properties.
We can extract gender and status properties into separate types and share them.
Now in the future, if there’s a requirement to add another status type like “PENDING” you only have to change it only in one place.
💡 What if you needed to reuse these types across all your projects? An open-source toolchain such as Bit can help you share types across multiple projects, considerably minimizing boilerplate.
Learn more:
Sharing Types Between Your Frontend and Backend Applications
3. Any phobia
any type can be used for certain use cases such as interfacing existing javascript code and dynamic data handling. But most of the newbies use `any` type to get rid of type checking. It may seem an easy way to get rid of all the types-errors. But that comes with a cost, your development will be unmaintainable soon.
If you don’t have an idea about which type needs to be used, you can use unknown type instead of any type.
When using unknown you won’t be able to call/access arbitrary functions/properties without casting to the required type. This will ensure the type's safety while providing some flexibility.
To maintain the code quality, I would suggest to developers to be afraid of using any type unless they have a logical use case. We can call it “any phobia”!
4. Typify the Components
Mainly there are two properties to typify in a React component. The props and the states.
There can be several props to React components and it is highly recommended to create a separate Ts interface for props.
Using typed props will help component consumers easily implement the component and understand its behavior of it.
React states can be typified passing the generic type to the useState hook.
This will secure the state variable from assigning unhandled values. Which will avoid runtime errors. Also in the above case, the developer will know at some point the count state can be undefined and it should be handled.
Apart from the above. Following are some additional typifying tips.
- Use Generic types for generic components —For the components which use “dynamic type” inputs. (Eg: A table component can have different shapes of data objects. Here the dynamic type is the Type of a data source object provided to the table component)
- Typify the forwarded refs — Implement the Prop types in components that forward a ref.
- Extend the Prop types of your Atomic components from UI library component Prop types.
Learn More about Typescript inside React components
5. Typify the promises
Promises are widely used utility mechanisms in React.js. When it comes to API calls we can define the response type with Promise’s generic types. This will describe what shape of data will be returned from the REST APIs. Therefore it will be really easy for the developers to determine the response shape if there are type-safe promises.
Whenever the sampleAPICall invokes, the consumer knows it is going to return an object with name property in it.
See you next time!
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- Creating a Developer Website with Bit components
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
- How to Reuse and Share React Components in 2023: A Step-by-Step Guide
- 5 Tools for Building React Component Libraries in 2023
5 TypeScript Tips to Make Your React Codebase Maintainable was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Seniya Sansith
Seniya Sansith | Sciencx (2023-06-05T18:43:17+00:00) 5 TypeScript Tips to Make Your React Codebase Maintainable. Retrieved from https://www.scien.cx/2023/06/05/5-typescript-tips-to-make-your-react-codebase-maintainable/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.