reactjs - Hur exporterar jag en React-kontextkomponent som tar en generisk typ från en omgivande modul i TypeScript?

Jag arbetar i en TypeScript-app som använder ett NPM-paket som är implementerat i vanlig JavaScript. För att ge mig själv viss typesäkerhet skapar jag mitt eget TypeScript-ambientmodul för att tillhandahålla typer för detta bibliotek.

En av komponenterna som exporteras från detta bibliotek är en React-kontextkomponent som bör acceptera en generisk typ. Den här appen är tyvärr inte uppgraderad för att använda hooks, så jag är begränsad till kontextkomponenterna. Här är ett exempel på vad jag försöker typa:

import { URLStateContext } from 'some-library'

<URLStateContext.Consumer>
  {({ params }) => <div />}
</URLStateContext.Consumer>

Jag har deklarerat en ambient modul på följande sätt:

declare module 'some-library' {
  // ...
}

Det jag skulle vilja kunna göra är att skriva typen för URLStateContext-komponenten i min ambientmodul för att acceptera en generell typ. I exemplet ovan bör denna generiska typ gälla för params-värdet hos användaren.

Jag har försökt med en blandning av saker, var och en med sina egna för- och nackdelar, men ingen som jag kan lista ut hur man skriver helt korrekt.

1)

import { Context } from 'react'

declare module 'some-library' {
  export type URLStateContext<TUrlState> = Context<{ params: TUrlState }>
}

Min första tanke var att försöka med ovanstående eftersom returtypen av createContext är Context<...>. Detta ger mig dock ett fel som säger "URLStateContext refererar endast till en typ, men används här som ett värde."

2)

import { Context } from 'react'

declare module 'some-library' {
  export const URLStateContext: Context<any>
}

Detta kompilerar faktiskt, men här förlorar jag generiken, vilket betyder att jag antingen måste leva med any, eller så måste jag försöka skriva typ på barnfunktionen på konsumenten:

<URLStateContext.Consumer>
  {({ params }: { params: MyParams }) => <div />}
</URLStateContext.Consumer>

Jag skulle vilja kunna skicka en generisk typ till själva komponenten så att dess callback-funktion blir rätt typad för mig. Här är min idealiska kod:

interface Params {
  // ...
}

// `params` would automatically be typed correctly
<URLStateContext.Consumer<Params>>
  {({ params }) => <div />}
</URLStateContext.Consumer>

All hjälp skulle uppskattas!

Relaterade artiklar