React Native Paper configureFonts ThemeFonts TypeScript类型不匹配问题

问题背景 #

使用react-native-paper@^4.12.8，通过全局声明扩展了ReactNativePaper.ThemeFonts接口，添加了otherType和anotherType两个自定义字体类型，但在配置主题时，configureFonts返回的Fonts类型不包含这些自定义字段，导致TypeScript报错：

error TS2739: Type 'Fonts' is missing the following properties from type 'ThemeFonts': otherType, anotherType

用as ReactNativePaper.ThemeFonts类型断言可以绕过报错，但想找到更合理、无潜在风险的解决方案。

原因分析 #

1. configureFonts的官方类型定义中，参数和返回值都是Fonts类型，而非我们扩展后的ThemeFonts。
2. 参数不报错是因为ThemeFonts是Fonts的超集（包含Fonts的所有必填字段），TypeScript结构类型系统允许超集赋值给子集类型。
3. 返回值报错是因为Fonts是ThemeFonts的子集，缺少我们添加的自定义字段，无法直接赋值给Theme.fonts所需的ThemeFonts类型。

解决方案 #

方案1：扩展Fonts接口（推荐） #

ThemeFonts本质继承自Fonts接口，直接扩展Fonts，让configureFonts的参数和返回值自动包含自定义字段：

declare global {
  namespace ReactNativePaper {
    interface ThemeColors {
      textInverted: string;
    }

    // 扩展Fonts接口，添加自定义字体类型
    interface Fonts {
      otherType: Font;
      anotherType: Font;
    }
  }
}

// 后续代码无需修改，configureFonts的返回值会自动匹配ThemeFonts
const fontFamily: ReactNativePaper.ThemeFonts = {
  regular: { fontFamily: 'SomeFont', fontWeight: 'normal' },
  medium: { fontFamily: 'SomeFont', fontWeight: 'normal' },
  light: { fontFamily: 'SomeFont', fontWeight: 'normal' },
  thin: { fontFamily: 'SomeFont', fontWeight: 'normal' },
  otherType: { fontFamily: 'SomeFont', fontWeight: 'normal' },
  anotherType: { fontFamily: 'SomeFont', fontWeight: 'normal' },
};

const fontConfig = { ios: {...fontFamily}, android: {...fontFamily}, default: {...fontFamily} };

export const theme: ReactNativePaper.Theme = {
  ...DefaultTheme,
  fonts: configureFonts(fontConfig),
};

这个方案完全符合React Native Paper的类型设计逻辑，没有任何潜在类型风险，是最优解。

方案2：带运行时检查的安全断言 #

如果不想修改Fonts接口，可以先对configureFonts的返回值做运行时检查，确认包含自定义字段后再断言，避免类型不匹配的潜在问题：

declare global {
  namespace ReactNativePaper {
    interface ThemeColors {
      textInverted: string;
    }

    interface ThemeFonts {
      otherType: Font;
      anotherType: Font;
    }
  }
}

const fontFamily: ReactNativePaper.ThemeFonts = {
  regular: { fontFamily: 'SomeFont', fontWeight: 'normal' },
  medium: { fontFamily: 'SomeFont', fontWeight: 'normal' },
  light: { fontFamily: 'SomeFont', fontWeight: 'normal' },
  thin: { fontFamily: 'SomeFont', fontWeight: 'normal' },
  otherType: { fontFamily: 'SomeFont', fontWeight: 'normal' },
  anotherType: { fontFamily: 'SomeFont', fontWeight: 'normal' },
};

const fontConfig = { ios: {...fontFamily}, android: {...fontFamily}, default: {...fontFamily} };

const configuredFonts = configureFonts(fontConfig);

// 运行时检查确保返回值包含自定义字段
if ('otherType' in configuredFonts && 'anotherType' in configuredFonts) {
  export const theme: ReactNativePaper.Theme = {
    ...DefaultTheme,
    fonts: configuredFonts as ReactNativePaper.ThemeFonts,
  };
} else {
  throw new Error('配置的字体缺少自定义字体类型');
}

这种方式比直接断言更安全，能在运行时提前发现问题。

方案3：覆盖configureFonts的类型声明 #

在项目中创建自定义类型声明文件，覆盖configureFonts的官方类型，让它接收和返回ThemeFonts：

// 项目根目录/typings/react-native-paper.d.ts
declare module 'react-native-paper' {
  import type { PlatformOSType, ThemeFonts } from 'react-native-paper';

  export default function configureFonts(config?: {
    [platform in PlatformOSType | 'default']?: ThemeFonts;
  }): ThemeFonts;
}

这样configureFonts的类型就和我们扩展的ThemeFonts完全匹配，无需断言。但要注意：React Native Paper版本更新时，官方类型可能变化，需要同步更新自定义声明。

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