reactjs - Typescript apontar para função

Estou escrevendo uma aplicação ReactJS usando TypeScript e Redux. Para descrever as props dos componentes, estou usando interfaces em vez de propTypes. Isso me permite verificar os tipos de props em tempo de compilação.

Algumas das props são funções (criadores de ações do redux, envolvidas por connect com dispatch).

Como dizer ao TypeScript que a propriedade do meu componente é daquela assinatura de função do criador de ação? Quero dizer, não quero repetir a descrição dos tipos.

Para entender melhor a questão, veja o exemplo abaixo:

// here is my action creator
function someAction(prop1: number, prop2: string) {
  ...
}

interface IComponentProps {
  // here I want to say
  // that this is the same function as above,
  // but I have to duplicate its type signature
  someAction(prop1: number, prop2: string);
}

Claro, eu posso criar uma interface para essa função:

interface ISomeActionFunction {
  (prop1: number, prop2: string): void
}

e então usá-lo tanto na declaração de função quanto na interface de propriedades, mas eu me pergunto se há alguma maneira de apontar diretamente para a função específica?

Resposta #1

Como você já percebeu, usar uma interface é a melhor abordagem aqui. Você pode fazer parecer assim:

interface IComponentProps {
    someAction: ISomeActionFunction;
}

interface ISomeActionFunction {
    (prop1: number, prop2: string): void;
}

const someAction: ISomeActionFunction = (p1, p2) => {
    // the compiler will correctly infer the types of p1 and p2 for you
    ...
}

Dessa forma, os tipos de função não são repetidos e o compilador ainda pode verificar tudo.

Se você prever a necessidade de muitos criadores de ações, pode adicionar um ajudante genérico como este:

interface IBinaryActionCreator<T1, T2, TResult> {
  (prop1: T1, prop2: T2): TResult;
}

type ISomeActionFunction = IBinaryActionCreator<number, string, void>;

Mas isso pode ser exagero.