如何解决TypeScript中对象金额字段掩码时的类型不兼容问题

嘿，我太懂你遇到的这个糟心问题了——想把数字类型的金额字段改成带*的掩码字符串，结果TypeScript直接给你甩个Type 'string' is not assignable to type 'number'的错误，拦着不让你干，对吧？我来给你几个日常开发里常用的实用解法，都是踩过坑后总结出来的：

1. 最推荐：给掩码后的对象建个专属类型 #

这是最规范、最不留隐患的做法。既然原类型里金额是数字，掩码后要变成字符串，那我们直接定义一个新类型，把金额字段的类型改成字符串就好：

// 原类型保持不变
type BalanceInfo = {
  currency: string;
  rubAmount: number;
  usdAmount: number;
};

// 生成掩码后的专属类型：先去掉原金额字段，再重新定义为string类型
type MaskedBalanceInfo = Omit<BalanceInfo, 'rubAmount' | 'usdAmount'> & {
  rubAmount: string;
  usdAmount: string;
};

// 掩码函数直接返回这个新类型
function maskBalance(balance: BalanceInfo): MaskedBalanceInfo {
  return {
    ...balance,
    rubAmount: '****', // 这里类型完全匹配，再也不会报错
    usdAmount: '****'
  };
}

这种方法的好处是，后续你用这个返回值的时候，TypeScript完全清楚金额字段现在是字符串了，不会有任何类型混淆，也能避免后续不小心把掩码字符串当数字用的运行时错误。

2. 临时救急：用类型断言（谨慎使用） #

如果你不想新建类型，也可以用类型断言“绕开”TypeScript的检查，但这个方法别乱用——相当于你在“骗”TypeScript说“我知道我在干嘛”，如果后续有人把这些掩码字段当数字做运算，百分百会出运行时bug：

function maskBalance(balance: BalanceInfo) {
  return {
    ...balance,
    // 先转unknown再转number，比直接as number更安全，避免隐式类型转换的坑
    rubAmount: '****' as unknown as number,
    usdAmount: '****' as unknown as number
  };
}

只有当你百分百确定，后续绝对不会对这些掩码字段做任何数字操作时，再考虑用这个临时方案。

3. 语义更清晰：新增掩码字段而非修改原字段 #

如果你的场景是要在页面上展示掩码，同时还要保留原始数字做其他业务逻辑，那不如直接新增两个掩码字段，完全不碰原字段的类型：

function addMaskedBalances(balance: BalanceInfo) {
  return {
    ...balance,
    maskedRubAmount: '****',
    maskedUsdAmount: '****'
  };
}

这样原金额字段还是number类型，掩码字段是string，类型完全兼容，而且代码语义特别清晰——谁是原始业务数据，谁是展示用的掩码，一眼就能看明白。

总的来说，我最推荐第一种方法，完全符合TypeScript类型系统的设计逻辑，清晰又安全，是长期维护的最优解~

备注：内容来源于stack exchange，提问作者hejjzaeN