📝 Important note: Whether to use type or interface depends on your team’s or company’s conventions. If there is an established rule, please follow it. This article is for reference, for those who are unsure or want to find the best approach when using React + TypeScript.
1. Introduction
React is now one of the most widely used UI libraries in modern web development. When combined with TypeScript, it provides a powerful, safe, and scalable development environment.
However, one common question is: should you use type or interface to define data types in React projects?
Although both can describe data structures, they have different characteristics and use cases — especially important when writing React code in a functional programming style.
2. Comparing interface vs type
| Criteria | interface |
type |
|---|---|---|
| Usage | Mainly for objects and class structures | More flexible: object, union, intersection, tuple, primitive types |
| Inheritance / Extension | ✅ Use extends to inherit |
✅ Use & to combine multiple types |
| Merge (declaration merging) | ✅ Can be declared multiple times (auto-merged) | ❌ Cannot merge; duplicate names cause an error |
| Suitable for classes | ✅ Ideal for class with implements
|
❌ Not valid for implements in classes |
| Suitable for function components | Usable | ✅ Preferred: cleaner & more concise for props |
| Union / Intersection / Tuple | ❌ Not directly supported | ✅ Fully supported |
| Extensibility in libraries | ✅ Can extend external types (e.g., Express.Request) |
❌ Cannot extend external types (no declaration merging) |
| Compatibility with utility types | ✅ Works well | ✅ Works slightly better (Partial, Omit, ReturnType, etc.) |
Mapped types / keyof / infer |
⚠️ Limited | ✅ Fully supported with generics, mapped types, and inference |
3. Which one fits better when coding React?
✅ type is more suitable in modern React
In the context where React Functional Components are the standard:
- You don’t use classes, removing the advantage of
interface. - You often need to combine types (
&), create unions (|), or use utility types →typehandles these better. -
typesupports aliases for primitive types likestring,number,boolean— somethinginterfacecannot do.
Example:
type ID = string | number;
type Status = 'loading' | 'success' | 'error';
These are commonly used in React for props, string enums, or flexible combined types.
- Code tends to be cleaner and easier to read with type.
Example in React:
type ButtonProps = {
label: string;
onClick: () => void;
};
const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
<button onClick={onClick}>{label}button>
);
❗ Minor drawback of not using
interface:
- No declaration merging:
If you need to extend types from libraries (likeExpress.Request,NextApiRequest, etc.),interfaceis advantageous because it allows multiple declarations.- Not suitable for classes:
If you useclass implements, theninterfaceis required.
🧩 However, these drawbacks rarely affect typical React app development, since most components are functional, props types are simple, and extending backend types is uncommon.
4. Conclusion 🎯
Both type and interface have their strengths, but in modern React with functional components, type is generally more suitable and flexible. It provides cleaner code and better support for unions, intersections, and primitive types, helping you work more efficiently.
If you need extensible data types or to work with classes,
interfaceis a better choice.
However, the most important factor is consistency within your team or project. Choosing to use type or interface should follow common guidelines to keep the codebase clear and maintainable. Finally, focus on writing clean, readable code and adhere to your team’s conventions to ensure sustainable development. 🚀
