typed react - props as `type` or an `interface`

Question

I have react code

export default class MyComponent extends Component<Props,State>

The question is, do I write props like a type or an interface?

type Props = {     isActive: Boolean,     onClick: Function } 

or

interface Props {     isActive: Boolean,     onClick: Function } 

also, what is the direrence, when I am not using typescript, but classic webpack+babel setup?

Or, does it even matter much to mee?

Answer 1

It is 2020 now and I would favor type in almost all cases with React props (general type vs interface post is here). Common cases that can be only expressed with type aliases:

// given some props from another comp that are to be altered type ExternalProps = { a: string; b: { c: number } };  type Props_IndexType = ExternalProps["b"]; // { c: number; } type Props_MappedType = { [K in keyof ExternalProps]: number }; // { a: number; b: number; } type Props_DiscriminatedUnionType = { tag: "tag1"; foo: string } | { tag: "tag2"; foo: boolean} type Props_typeOf = { foo: string } & typeof defaultProps; // see class comp example  // conditional types - ok, this one is a bit contrived, but you get the point type Props_ConditionalType<T> = T extends true ? { a: string } : { b: number }; const Comp = <T extends {}>(props: Props_ConditionalType<T>) =>   <div>{"a" in props && (props as any).a}</div> render(<Comp<true> a="foo" />, document.getElementById("root")); 

Class component example for illustration (OP mentions them, but above cases also apply for Hooks):

// cannot do that with interfaces type Props = ({ tag: "tag1"; foo: string } | { tag: "tag2"; foo: boolean }) &   typeof defaultProps; type State = typeof initState;  const defaultProps = { a: "A" }; const initState = { c: "C" };  class App extends React.Component<Props, State> {   static readonly defaultProps = defaultProps;   state = initState;    render() { ... } }  render(<App tag="tag1" foo="foo" />, document.getElementById("root")); 

The only cases, I would consider interfaces:

• You do declaration merging of prop types in the global scope (uncommon nowadays)
• You want to hide type implementation details, as interfaces create a new name used in error messaged, IDE type infos etc. (docs)