TSX中Map.get()赋值变量类型异常：为何显示string|undefined？

核心原因很简单：TypeScript没法确定你两次调用CALLER_TYPE_TITLE_MAP.get()的结果是完全一致的。

具体分析 #

你写的三元表达式是：

let title = CALLER_TYPE_TITLE_MAP.get(callerRefCallerType) ? CALLER_TYPE_TITLE_MAP.get(callerRefCallerType) : '';

TypeScript做静态类型分析时，会把两次get()当成完全独立的操作：

• 第一次get()的返回值类型是string | undefined（因为Map的get()本身就可能返回undefined，TS不会默认你的Map包含所有string键）
• 第二次get()同样会被判定为string | undefined
• 所以整个三元表达式的类型是「第一个分支的类型」和「第二个分支的string」的联合，也就是string | undefined

但如果先把get()的结果存到变量里：

let title = CALLER_TYPE_TITLE_MAP.get(callerRefCallerType);
str.replace(substr, title ? title : '');

TS能明确追踪变量title的状态：条件title ?已经排除了undefined的情况，第一个分支的title是string，第二个分支是空字符串（也是string），整个表达式的类型就是纯string，自然能正常用在replace这类要求string参数的方法里。

额外说明 #

哪怕你的Map是const声明的，TS也不会假设它的内容不会在两次get()调用之间被修改（比如其他地方可能通过类型断言修改Map），所以绝不会把两次独立调用的返回值做关联。

快速修复 #

直接把get()的结果存到变量里，用空值合并运算符??或者一次判断即可：

export const validateCallerRefFirstName = (val:string, callerRefCallerType:string) => {
    const title = CALLER_TYPE_TITLE_MAP.get(callerRefCallerType) ?? '';
    str.replace(substr, title); // 此时title类型是string，无报错
};

内容的提问来源于stack exchange，提问作者gene b.