How To Declare TypeScript Static Method From React Functional Component

This would be easier to do by using a class component since the static functions and property types can be inferred in class definitions.

class Speakers extends React.Component<Props> {
  static GetMyArray = () => [1, 2, 3, 4]

  render() {
    const { isLoading } = this.props
    if (isLoading) {
      const x = Speakers.GetMyArray(); // works great
      return (
        <div>{JSON.stringify({x})}</div>
      );
    } else {
      return <div></div>;
    }
  }
}

That said, you could do it extending React.SFC or using an intersection type:

const Speakers: React.SFC<Props> & { GetMyArray?: () => number[]; } = (props) => {
  const { isLoading } = props
  if (isLoading) {
    const x = Speakers.GetMyArray!(); // works, sorta
    return (
      <div>{JSON.stringify({x})}</div>
    );
  } else {
    return <div></div>;
  }
}

You'll have to mark GetMyArray as optional because you cannot define it at the same time as you define the function, so you'll have to use a ! operator (or check that the function exists) when calling the static function. The ! in Speakers.GetMyArray!(); tells the type checker that you know what you're doing and that GetMyArray is not indeed undefined. See here to read about the non-null assertion operator

Update

I did not see that using React.FC is now the preferred way to use function components since function components can no longer be considered stateless.

If you can get away with only using const Speakers = (props: Props) => ... then upgrading TypeScript to 3.1 might be your best bet!

My answer is not exact to your question. But I think will be helpful for someone who wants to add a static component to the function component.

import React from 'react';
import { Text } from 'react-native';
import Group, { RadioButtonGroupProps } from './Group';

type RadioButtonType = {
  text: string,
};

interface StaticComponents {
  Group?: React.FC<RadioButtonGroupProps>
}

const RadioButton: React.FC<RadioButtonType> & StaticComponents = 
({ text }) => (<Text>{text}</Text>);

RadioButton.Group = Group;

export default RadioButton;

Remember config like this if you want to import React from 'react' directly instead of import * React from 'react'

Achievement:

You can write an interface that extends React.FC with your custom static method, then assign that interface to your functional component.

// Extends FC with custom static methods
interface ComponentWithStaticMethod<TProps> extends React.FC<TProps> {
  staticMethod: (value: string) => void;
}

// Your component with the interface
const Component: ComponentWithStaticMethod<{}> = () => {
  // Your component goes here...
  return null;
}

// Declare your static method for your functional component
Component.staticMethod = (value: string): void => {
  console.log(value);
}

You should have it working since TS version 3.1 (see section "Properties declarations on functions")

Main Answer

For future googlers out there, now it works as intended:

interface Props {
  isLoading?: boolean,
}

interface StaticFields {
  staticField: number,
  staticFunctionField: () => void,
}

export const Component: FC<Props> & StaticFields = (props) => {}

Component.staticField = 42;
Component.staticFunctionField = () => {}

Special Case: memo and forwardRef

In such cases, you won't be able to define typings like in above. Using Object.assign can solve the problem:

import { memo } from 'react'

interface Props {
  isLoading?: boolean,
}

const Component = memo((props: Props) => {})

export const ComponentWithStaticFields = Object.assign({}, Component, {
  staticField: 42,
  staticFunctionField: () => {},
})