TS中如何扩展第三方库类型，让react-navigation的useTheme返回自定义类型？

你可以通过TypeScript的声明合并特性直接扩展@react-navigation/native库内置的Theme类型，仅需一次配置就能全局生效，不需要修改每个useTheme的调用逻辑，步骤如下：

步骤1：新建类型声明文件 #

在项目中新建一个全局类型声明文件，比如命名为react-navigation.d.ts，你可以把它放在项目根目录或者src/types目录下，只要保证tsconfig.json的include配置能扫描到该文件即可。

步骤2：编写扩展声明 #

在声明文件中写入以下代码：

import type { Theme } from '@react-navigation/native';

declare module '@react-navigation/native' {
  export interface Theme {
    colors: Theme['colors'] & {
      textSecondary: string;
      // 可继续添加其他自定义颜色属性
    };
  }
}

验证效果 #

配置完成后，你之前自定义的ITheme接口就可以直接删掉了，所有调用useTheme()的地方返回的对象会自动适配你扩展后的类型，访问colors.textSecondary不会再抛出类型错误。

注意：如果配置后类型没有立即生效，可以重启IDE的TypeScript服务，或者执行tsc --noEmit验证类型是否正常。

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