https://github.com/echobind/react-typescript-best-practices
Our idea of best practices when using React with TypeScript
https://github.com/echobind/react-typescript-best-practices
best-practices react typescript
Last synced: about 1 year ago
JSON representation
Our idea of best practices when using React with TypeScript
- Host: GitHub
- URL: https://github.com/echobind/react-typescript-best-practices
- Owner: echobind
- Created: 2019-12-06T19:22:24.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-12-23T16:11:20.000Z (over 6 years ago)
- Last Synced: 2025-04-11T18:21:39.997Z (about 1 year ago)
- Topics: best-practices, react, typescript
- Size: 3.91 KB
- Stars: 11
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-TypeScript Best Practices
Our suggested best practices when using React with TypeScript.
---
**Table of Contents**
* [Components](#components)
* [Props](#props)
* [Hooks](#hooks)
* [Third Party Libraries](third-party-libraries)
* [FAQ](#faq)
* [Contributing](#contributing)
* [License](#license)
* [Contact](#contact)
* [License](#license)
---
### Components
We prefer to use **function expressions** beceause the syntax you use with them makes it easier to read compared to function declarations.
```typescript
// ✅ written as a function expression
const ComponentExample: React.FC = () =>
My Website Heading
```
✅ Keep your types/interfaces collocated with your components, unless you need to break them out.
### Props
Opt for `types` over `interfaces` when declaring your component props ([unless you're authoring a library](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#types-or-interfaces))
```typescript
type Props = {
/** The background color */
color?: string;
/** The text to show inside */
text: string;
}
const Button: React.FC = ({ color = 'blue', text }) => (
{text}
)
```
✅ Prefer destructuring props in function parameter
✅ Use ES6 default values
✅ Document your props
### Hooks
Use a generic when you need to initialize a hook with a `null`-ish value.
```typescript
type User = {
/** The user's email address */
email: string;
/** The user's ID */
id: string;
}
const [user, setUser] = useState(null);
```
### Third Party Libraries
Look for types by running `yarn add -D @types/`. If they don't exist, create a declaration file at the root:
```typescript
// Name of file: package-name.d.ts
declare module PackageName;
```
This won't provide type safety but it will unblock you. Later, when you have time, come back and create a proper [declaration file](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html).
## FAQ
Some questions you might have around using React with TypeScript.
### How do I type a `ChangeEvent`?
If you're working with a form, you'll want to use `React.ChangeEvent`. Here's an example:
```typescript
function onChange(e: React.ChangeEvent) {
//... setValue(e.target.value)
}
```
### What does "X" mean in the `tsconfig.json`?
The `tsconfig.json` has many options, all of which you can learn about here in the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/compiler-options.html).
### Where should I look if I want to dive deeper?
One of the best places to dive deeper into this subject is the community guide [`react-typescript-cheatsheet`](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet).
## License
MIT