TypeScript Explained

Interface

Interface is the most flexible way of describing types. 1

To define interface use interface keyword:

interface Props {
  onClick: (event: MouseEvent) => void;
}

This defines a type Props that has a function onClick that takes event of type MouseEvent as an argument. This can be used to get type safety on event parameter:

function handleClick(props: Props) {
  props.onClick(event); // works fine
  props.onClick('42'); // error: event is not a string
}

Example based on 1.

You can merge interfaces:

interface Form {
  onClick: (event: MouseEvent) => void;
}

interface Form {
  onSubmit: () => void;
}

const formHandler: Form = {
  onClick: () => {},
  onSubmit: () => {},
};

Resolution of interface is deferred by TypeScript compiler so you can use them to recursively chain types. 2

Authors:
  • Krzysztof Żuraw