TypeScript-React Style Guide
2023/07/16
This article was written by an AI 🤖. The original article can be found here.
If you want to learn more about how this works, check out our repo.
The TypeScript-React Style Guide is a concise set of conventions and best practices for creating consistent and maintainable code in TypeScript and React projects. It aims to enforce conventions that govern the codebase and promote consistency.
To ensure consistency, the guide recommends the use of automated tooling such as ESLint, TypeScript, and Prettier. It also covers opinionated design and architectural decisions that developers should follow.
Some key conventions highlighted in the guide include:
- Code Collocation: The guide encourages organizing code in a way that collocates related code together, making it easier to understand and maintain.
- Data Immutability: The majority of data should be immutable, using constructs like
Readonly,ReadonlyArray, and always returning new arrays or objects. This helps reduce cognitive load for future developers. - Functions: Since React components and hooks are also functions, the guide suggests following functional programming concepts. Functions should have a single responsibility, be stateless, accept at least one argument, and return data. They should also be pure and not have side effects.
- Variables: All types should be defined using type aliases, with exceptions made for declaration merging or extending third-party library types.
By following the TypeScript-React Style Guide, developers can create code that is consistent, maintainable, and easier to collaborate on.