Props

Types or interfaces?

They are mostly interchangeable but there are some specific differences

Interfaces

  • Classes and other interfaces can extend an interface but not a type

    interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

  • You can add properties to an interface without generating a double declaration error:

    interface Window {
    }

interface Window {
  ts: TypeScriptAPI;
}

Types

You can create unions with types but not interfaces.

The consensus seems to be that interfaces should be used over types unless there are ocassions when you do not want a type to be extendable / redeclarable. Or when you want to use unions.

How we type props

The custom is to type props as an interface. This way we can easily type function prop types.

interface IProps {
  people: {
    name: string;
    age: number;
    note?: string;
  }[];
}

const List: React.FC<IProps> = ({people}: IProps) => {
    return()
}

// Note we say that the props into the func component are of type IProps
// And we destructure the people key

Then in the parent:


const [people, setPeople] = useState<IState['people']>({});

<List props={people}>

Common types for props

Object with any number of properties

interface IProps {
  obj: {};
}

Array of objects

interface IProps {
  val1: string;
  val2: boolean;
}
[];

Functions


// Function that doesn't receive or return anything
interface IProps {
    onClick: () => void;
}[]

// Function with named parameter
interface IProps {
    onClick: (id: number) => void;
}[]

// Function that takes an event
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

Other React components

interface IProps {
  children: React.ReactNode;
}

interface IProps {
  children: JSX.Element;
}

React.ReactNode covers everything that React can render. This should be definitely used when the prop is a child component, otherwise JSX.element is ok.

Should I use type or interface? What is consensus?

logo