TypeScript环境模块中如何声明带泛型的第三方React Context组件类型？

你需要扩展原生React Context的类型，替换默认固定类型的Consumer属性为自定义泛型版本，完整的环境模块声明如下：

import type { Context, ReactNode, ReactElement } from 'react';

declare module 'some-library' {
  export const URLStateContext: Omit<Context<unknown>, 'Consumer' | 'Provider'> & {
    // 泛型化Consumer组件
    Consumer<T>(props: {
      children: (value: { params: T }) => ReactNode
    }): ReactElement | null;
    // 若需要用到Provider也可以同步扩展泛型支持
    Provider<T>(props: {
      value: { params: T },
      children: ReactNode
    }): ReactElement | null;
  };
}

实现说明 #

1. 你之前第一种写法只声明了URLStateContext为类型，没有声明对应的值，所以会出现「类型被当作值使用」的错误。第二种写死了Context<any>，泛型被固定死无法自定义。
2. 上面的声明先用Omit移除了原生Context类型里固定类型的Consumer、Provider属性，再扩展为支持传入泛型参数的组件类型，即可实现你需要的写法：

interface Params {
  id: string;
  name: string;
}

<URLStateContext.Consumer<Params>>
  {({ params }) => {
    // params自动推导为{ id: string; name: string }类型，无需手动标注
    return <div>{params.id}</div>
  }}
</URLStateContext.Consumer>

3. 如果你的场景不需要用到Provider，可以把声明里Provider相关的代码删除即可。

内容的提问来源于stack exchange，提问作者jerelmiller