reactjs - Hur man håller TypeScript-typer DRY

Jag har börjat använda TypeScript i min React-applikation men jag märker att jag upprepar mig själv, särskilt med mina mapDispatchToProps-funktioner. Finns det ett bättre sätt att deklarera typerna på?

Jag har en känsla av att jag kanske kan komma åt funktionstyperna inom this-gränssnittet state som används på den asynkrona funktionen, men jag vet inte tillräckligt om TS och kan inte hitta ett specifikt svar på detta någonstans.

index.tsx

import { globalDispatchKeyData } from '../actions.tsx'
import { doSomething } from './services'

class Index extends Component {
  // I declare it here
  globalDispatchKeyData: (key: string, data: {}) => void

  constructor(props: any) {
    this.globalDispatchKeyData = this.props.globalDispatchKeyData.bind(this)
    this.doSomething = doSomething.bind(this)


    ...
  ...
}

const mapDispatchToProps = { globalDispatchKeyData }

tjänster.tsx

interface IndexState {
  // I also declare it here
  globalDispatchKeyData: (key: string, data: {}) => void
}

export async function doSomething(this: IndexState) {
   globalDispatchKeyData('TYPE', {})
}

Är detta det enda sättet för närvarande att deklarera typer för dispatch-funktioner eller missar jag något?

Tack på förhand för din hjälp!

Svar #1

Du kan skapa en typalias för potentiellt vilken annan typ som helst för att undvika att upprepa dig själv.

type DispatchKeyDataFn = (key: string, data: {}) => void

// Usage
globalDispatchKeyData: DispatchKeyDataFn

Typalias är extremt flexibla och kan användas för att skapa unioner, snitt och många andra saker som dokumenteras här

https://www.typescriptlang.org/docs/handbook/advanced-types.html (mot den nedre halvan)