Type or Interface for TS projects ?

Asta Nguyen • December 21, 2024

#typescript

1. Union Types 2. Intersection Types 3. Primitive Types 4. Tuples 5. Mapped Types 6. Complex Type Constructs 7. Union Types in React component 8. Intersection Types in React component 9. Tuples in React component 10. Mapped Types in React component Conclusion

Why You Should Use Type Instead of Interface in TypeScript

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:

1. Union Types

type can define union types, which interface cannot.

type Result = Success | Failure;

2. Intersection Types

type can define intersection types.

type Combined = TypeA & TypeB;

3. Primitive Types

type can alias primitive types.

type StringAlias = string;

4. Tuples

type can define tuples

type Tuple = [number, string];

5. Mapped Types

type can create mapped types

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

6. Complex Type Constructs

type can define more complex type constructs like conditional types.

type Conditional<T> = T extends string ? string : number;

Let's consider a React component where we define the props using type instead of interface.

7. Union Types in React component

// Case type 
type ButtonProps = {
  label: string;
  onClick: () => void;
  variant: 'primary' | 'secondary';
};
const Button: React.FC<ButtonProps> = ({ label, onClick, variant }) => {
  return (
    <button className={`btn-${variant}`} onClick={onClick}>
      {label}
    </button>
  );
};

// Case interface
// This is not possible with interface
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant: 'primary' | 'secondary'; // Error: String literal types are not allowed in interfaces
}

8. Intersection Types in React component

When you need to combine multiple types, type is more flexible.

type BaseProps = {
  id: string;
};

type AdvancedProps = {
 isActive: boolean;
};

type CombinedProps = BaseProps & AdvancedProps;
const Component: React.FC<CombinedProps> = ({ id, isActive }) => {
  return (
    <div id={id} className={isActive ? 'active' : ''}>
      Content
    </div>
  );
}

Using interface (More Verbose)

interface BaseProps {
  id: string
}

interface AdvancedProps {
  isActive: boolean
}

interface CombinedProps extends BaseProps, AdvancedProps {}

const Component: React.FC<CombinedProps> = ({ id, isActive }) => {
  return (
    <div id={id} className={isActive ? 'active' : ''}>
      Content
    </div>
  );
};

9. Tuples in React component

When you need to define a tuple type, type is the only option.

type TupleProps = {
  coordinates: [number, number];
};
const CoordinateDisplay: React.FC<TupleProps> = ({ coordinates }) => {
  return (
    <div>
      X: {coordinates[0]}, Y: {coordinates[1]}
    </div>
  );
};

Using interface (Not Possible)

10. Mapped Types in React component

When you need to create a mapped type, type is more suitable.

type ReadonlyProps<T> = {
  readonly [P in keyof T]: T[P];
};

type UserProps = {
  name: string;
  age: number;
};

type ReadonlyUserProps = ReadonlyProps<UserProps>;

const UserComponent: React.FC<ReadonlyUserProps> = ({ name, age }) => {
  return (
    <div>
      Name: {name}, Age: {age}
    </div>
  );
};

Using interface (Not Possible)

// This is not possible with interface
interface ReadonlyProps<T> {
  readonly [P in keyof T]: T[P]; // Error: Mapped types are not allowed in interfaces
}

Conclusion

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 strengths of type, you can make more informed decisions in your TypeScript projects.

In summary, use type when you need:

Union types
Intersection types
Primitive type aliases
Tuples
Mapped types
Complex type constructs like conditional types

This flexibility makes type a better choice in many scenarios.

No related posts found