React + Typescript: Type of React component with no state/no props

Question

I've seen multiple examples of React components using Typescript:

class Foo extends React.Component<IProps, IState> {}

It seems there is no a clear convention when we don't use either the Props or the State.

People set these types as any, null,undefined,{}, void, etc.This is what I've seen so far:

1. class Foo extends React.Component<null, null> {}
2. class Foo extends React.Component<any, any> {}
3. class Foo extends React.Component<{}, {}> {}
4. class Foo extends React.Component<undefined, undefined> {}
5. class Foo extends React.Component<void, void> {}
6. class Foo extends React.Component<object, object> {}

What's the best way of doing it?

Update:

• Props:

  • void cannot be used (https://github.com/Microsoft/TypeScript/issues/15409 and https://github.com/Microsoft/TypeScript/issues/15419 ) as the props object is initialised to {}

SOLUTION

Simply do - class Foo extends React.Component {} as prop and state are initialised to {}

Answer 1

From https://github.com/DefinitelyTyped/DefinitelyTyped/blob/15b7bac31972fbc081028937dfb1487507ca5fc9/types/react/index.d.ts#L199-L200

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { } 

Props and state are initialised to {}, so for a component with no state nor prop we can simply do:

class Foo extends React.Component {}  

Answer 2

As answered for this question, you can use the React.FC<{}> class

const MyStatelessComponent : React.FC<{}> = props =>     <div>{props.children}</div> 

Or if your markup gets bigger:

const MyStatelessComponent : React.FC<{}> = props => {      {/*  Some code here */}     return <div>{props.children}</div>  }