Discover why I prefer type over interface in TypeScript! This post dives into its flexibility and practical advantages, helping you write cleaner, more efficient code. 🚀
TypeScript provides two main ways to define the shape of an object: type and interface. While both can be used interchangeably in many cases, there are specific scenarios where type offers more flexibility and power. This blog will explore these scenarios and explain why you might prefer type over interface.
Key Differences:
type can define union types, which an interface cannot.
1type Result = Success | Failure;type can define intersection types.
1type Combined = TypeA & TypeB;type can alias primitive types.
1type StringAlias = string;type can define tuples
1type Tuple = [number, string];type can create mapped types
1type Readonly = { readonly [P in keyof T]: T[P]; };type can define more complex type constructs like conditional types.
1type Conditional = T extends string ? string : number;Let's consider a React component where we define the props using type instead of interface.
1// Case type
2type ButtonProps = {
3 label: string;
4 onClick: () => void;
5 variant: 'primary' | 'secondary';
6}
7
8const Button: React.FC<ButtonProps> = ({ label, onClick, variant }) => {
9 return (
10 <button
11 className={`btn-${variant}`}
12 onClick={onClick}
13 >
14 {label}
15 </button>
16 );
17};
18
19// Case interface
20// This is not possible with interface
21interface ButtonProps {
22 label: string;
23 onClick: () => void;
24 variant: 'primary' | 'secondary'; // Error: String literal types are not allowed in interfaces
25}When you need to combine multiple types, the type is more flexible.
1type BaseProps = { id: string; };
2type AdvancedProps = { isActive: boolean; };
3
4type CombinedProps = BaseProps & AdvancedProps;
5
6const Component: React.FC<CombinedProps> = ({ id, isActive }) => {
7 return (
8 <div
9 id={id}
10 className={isActive ? 'active' : ''}
11 >
12 Content
13 </div>
14 );
15}When you need to define a tuple type, type is the only option.
1type TupleProps = { coordinates: [number, number]; };
2
3const CoordinateDisplay: React.FC<TupleProps> = ({ coordinates }) => {
4 return (
5 <div>
6 X: {coordinates[0]}, Y: {coordinates[1]}
7 </div>
8 );
9};Using interface (Not Possible)
When you need to create a mapped type, type is more suitable.
1type ReadonlyProps<T> = { readonly [P in keyof T]: T[P]; };
2
3type UserProps = { name: string; age: number; };
4
5type ReadonlyUserProps = ReadonlyProps<UserProps>;
6
7const UserComponent: React.FC<ReadonlyUserProps> = ({ name, age }) => {
8 return (
9 <div>
10 Name: {name}, Age: {age}
11 </div>
12 );
13}Using interface (Not Possible)
1// This is not possible with interface
2interface ReadonlyProps<T> {
3 readonly [P in keyof T]: T[P]; // Error: Mapped types are not allowed in interfaces
4}While interface is useful for defining object shapes that are intended to be extended or implemented by classes, type offers more versatility and power for defining complex types. By understanding the type's strengths, you can make more informed decisions in your TypeScript projects.
In summary, use type when you need:
This flexibility makes type a better choice in many scenarios.
Continue exploring similar topics
