React Native TypeScript：fontWeight类型不匹配错误求助

问题场景 #

在style.ts中使用主题配置的字体权重时，出现TypeScript类型错误：

样式代码 #

badgeText: {
  fontWeight: theme.fonts.FONT_WEIGHT_HEAVY,
},

主题常量定义 #

export default {
  FONT_SIZE_EXTRA_SMALL: 8,
  FONT_SIZE_VERY_SMALL: 11,
  FONT_SIZE_SMALL: 14,
  FONT_SIZE_MEDIUM: 16,
  FONT_SIZE_EXTRA_MEDIUM: 18,
  FONT_SIZE_LARGE: 20,
  FONT_SIZE_X_LARGE: 22,
  FONT_SIZE_XX_LARGE: 24,
  FONT_SIZE_XXX_LARGE: 28,
  FONT_WEIGHT_LIGHT: '200',
  FONT_WEIGHT_MEDIUM: '600',
  FONT_WEIGHT_HEAVY: '800',
  LIGHT: 'DINRoundOT-Light',
  MEDIUM: 'DINRoundOT-Medium',
  BOLD: 'DINRoundOT-Bold',
  REGULAR: 'DINRoundOT',
};

错误信息 #

(property) TextStyle.fontWeight?: "200" | "600" | "800" | "normal" | "bold" | "100" | "300" | "400" | "500" | "700" | "900" | undefined
指定字体粗细。大多数字体支持'normal'和'bold'值，并非所有字体都有每个数值对应的变体，此时会选择最接近的变体。

Type 'string' is not assignable to type '"200" | "600" | "800" | "normal" | "bold" | "100" | "300" | "400" | "500" | "700" | "900" | undefined'.ts

解决办法 #

方法1：添加const断言（推荐） #

修改主题常量定义，添加as const让TypeScript将属性值推断为字面量类型，而非宽泛的string：

export default {
  FONT_SIZE_EXTRA_SMALL: 8,
  FONT_SIZE_VERY_SMALL: 11,
  FONT_SIZE_SMALL: 14,
  FONT_SIZE_MEDIUM: 16,
  FONT_SIZE_EXTRA_MEDIUM: 18,
  FONT_SIZE_LARGE: 20,
  FONT_SIZE_X_LARGE: 22,
  FONT_SIZE_XX_LARGE: 24,
  FONT_SIZE_XXX_LARGE: 28,
  FONT_WEIGHT_LIGHT: '200',
  FONT_WEIGHT_MEDIUM: '600',
  FONT_WEIGHT_HEAVY: '800',
  LIGHT: 'DINRoundOT-Light',
  MEDIUM: 'DINRoundOT-Medium',
  BOLD: 'DINRoundOT-Bold',
  REGULAR: 'DINRoundOT',
} as const;

这样每个字体权重值会被识别为具体的字面量（如'800'），和TextStyle.fontWeight的联合类型完全匹配。

方法2：显式定义主题类型 #

通过自定义类型约束字体权重的类型，确保和TextStyle.fontWeight一致：

import type { TextStyle } from 'react-native'; // 按实际使用的UI框架调整导入路径

// 提取TextStyle的fontWeight类型
type FontWeight = TextStyle['fontWeight'];

// 定义主题字体的类型
interface ThemeFonts {
  FONT_SIZE_EXTRA_SMALL: number;
  FONT_SIZE_VERY_SMALL: number;
  FONT_SIZE_SMALL: number;
  FONT_SIZE_MEDIUM: number;
  FONT_SIZE_EXTRA_MEDIUM: number;
  FONT_SIZE_LARGE: number;
  FONT_SIZE_X_LARGE: number;
  FONT_SIZE_XX_LARGE: number;
  FONT_SIZE_XXX_LARGE: number;
  FONT_WEIGHT_LIGHT: FontWeight;
  FONT_WEIGHT_MEDIUM: FontWeight;
  FONT_WEIGHT_HEAVY: FontWeight;
  LIGHT: string;
  MEDIUM: string;
  BOLD: string;
  REGULAR: string;
}

export default {
  // 常量内容不变
} as ThemeFonts;

方法3：临时类型断言（不推荐） #

如果需要快速修复，可在使用时直接断言类型，但会跳过TypeScript的类型检查，不建议长期使用：

badgeText: {
  fontWeight: theme.fonts.FONT_WEIGHT_HEAVY as TextStyle['fontWeight'],
},

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