What to type

example.tsx

// --- 1

const app: FunctionalComponent<any> = (_props: any):JSX.Element =>
  <div class="App">Hello world</div>;
 
export default app

// --- 2

const app: FunctionalComponent<any> = () =>
  <div class="App">Hello world</div>;
 
export default app

// --- 3

export default (_props: any): JSX.Element =>
  <div class="App">Hello world</div>;

// --- 4

export default () =>
  <div class="App">Hello world</div>;

This typechecks correctly ✅

const Banana = () => <div class="App">Hello world</div>;

export default class Phone extends Component<void, void> {
  render() {
    return <Banana />
  }
}

This doesn't type check ❌

const Banana = () => <div class="App">Hello world</div>;

export default class Phone extends Component<void, void> {
  render() {
    return <Banana phone={true}/>
  }
}

const Banana: () => JSX.Element

This does type check ✅

const Banana = (props: {phone: boolean}) => <div class="App">Hello world</div>;

export default class Phone extends Component<void, void> {
  render() {
    return <Banana phone={true}/>
  }
}

This doesn't type check ❌

const Banana = (props: {phone: boolean}) => 5;

export default class Phone extends Component<void, void> {
  render() {
    return <Banana phone={true}/>
  }
}

[ts] JSX element class does not support attributes because it does not have a 'props' property.
const Banana: (props: {
    phone: boolean;
}) => number