🙋🏻‍♀️ Introduction
TypeScript adds static typing to JavaScript, which helps catch potential bugs before they even run. When paired with React, TypeScript enhances your components by enforcing type safety. In this article, we'll walk through the essential concepts for using TypeScript with React.
⚛️ How to Use TypeScript with React?
First, you need to install TypeScript in a React project. If you're starting from scratch, create a new React app with TypeScript enabled:
npx create-react-app my-app --template typescript
For an existing project, you can add TypeScript by running:
npm install typescript @types/react @types/react-dom
Now, you can start using .tsx
files instead of .js
or .jsx
, and your React components will benefit from TypeScript’s features.
Types for React Component Props
When you’re defining a component in React, you can specify the types for its props to make the usage of the component clearer and safer. Here’s a basic example:
type UserProps = {
name: string;
age: number;
};
const UserCard = ({ name, age }: UserProps) => (
<div>
<h1>{name}</h1>
<p>{age} years old</p>
</div>
);
In this example, UserCard
expects two props: name
(a string) and age
(a number). If you try to pass incorrect types, TypeScript will show an error.
ReactNode Vs ReactElement
You might wonder when to use ReactNode
or ReactElement
for typing React components.
ReactNode: Represents anything that can be rendered by React. This includes strings, numbers, JSX, arrays, and
null
.ReactElement: Refers to an actual React element, which is more specific and doesn’t cover strings or
null
.
Example:
type CardProps = {
children: ReactNode;
};
const Card = ({ children }: CardProps) => <div>{children}</div>;
// Usage
<Card><p>Hello, World!</p></Card>
ReactNode
is used here because children
can be any renderable element, not just React elements.
Type Vs Interface
When defining the shape of props or other objects, both type
and interface
can be used. So, what’s the difference?
- Type: Best for creating union types or more complex combinations.
- Interface: Often better when you plan to extend or implement additional types.
Here’s a comparison:
// Using type
type ButtonProps = {
label: string;
onClick: () => void;
};
// Using interface
interface LinkProps {
href: string;
openInNewTab?: boolean;
}
While both are similar, interface
can be extended more naturally:
interface IconButtonProps extends ButtonProps {
icon: string;
}
How to Type Props with TypeScript?
To type props for a component, declare a type
or interface
and pass it as the type annotation for the component's props.
Example:
type AlertProps = {
message: string;
severity: 'error' | 'warning' | 'info';
};
const Alert = ({ message, severity }: AlertProps) => (
<div className={`alert ${severity}`}>{message}</div>
);
How to Type Functional Component Props?
To type a functional component's props, you can use React.FC<Props>
or declare the props explicitly. While React.FC
was commonly used, now many prefer explicit types.
Here’s an example using explicit types:
type BadgeProps = {
text: string;
color: string;
};
const Badge = ({ text, color }: BadgeProps) => (
<span style={{ backgroundColor: color }}>{text}</span>
);
In this example, Badge
has two props, text
and color
, both typed as strings.
⛓ React Hooks with TypeScript
React hooks can also be typed in TypeScript to ensure type safety for the state and effect logic in your components.
Here’s how to use useState
and useEffect
with TypeScript:
import { useState, useEffect } from 'react';
const Counter = () => {
const [count, setCount] = useState<number>(0);
useEffect(() => {
console.log(`Count is: ${count}`);
}, [count]);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<p>Count: {count}</p>
</div>
);
};
In this example, the useState
hook is typed to ensure count
is always a number, and useEffect
logs the current count whenever it changes.
By following these best practices, you’ll be able to harness the full potential of TypeScript in your React applications, leading to more robust, maintainable code.
And before you go, if you’re also working with SQL, check out our Ultimate SQL Cheatsheet to improve your SQL skills with both basic and advanced queries!
Top comments (1)
Well-written article