Angular组件中如何针对初始为null的可空变量检查空字符串？

首先咱们先修正一个类型细节：你的expenses被声明为number类型，但初始值设为null，这在严格模式的TypeScript里是不符合类型规范的，建议把类型改成number | null，这样既可以存储数字也能兼容null状态：

expenses: number | null = null;

接下来就是核心问题：当expenses为null时，直接调用toString()会抛出TypeError，因为null并没有这个方法。这里有几种简洁且安全的解决方式：

方式一：使用可选链+空值合并操作符（推荐） #

可选链?.会在变量为null/undefined时直接返回undefined，不会继续执行后续方法调用；空值合并??则会把undefined转换为空字符串，这样就能统一进行空值判断：

onKey(event: any) { 
  if (event.key === 'Enter') { 
    console.log('enter pressed!'); 
  } 
  // 统一处理null和空字符串的情况
  const expenseText = this.expenses?.toString() ?? '';
  this.inputHelperTextVisible = expenseText !== '';
}

方式二：先判断null，再执行字符串转换 #

如果不想用ES2020+的语法糖，也可以先明确判断变量是否为null，再执行后续的字符串比较（注意一定要先检查null，避免触发报错）：

onKey(event: any) { 
  if (event.key === 'Enter') { 
    console.log('enter pressed!'); 
  } 
  if (this.expenses === null || this.expenses.toString() === '') { 
    this.inputHelperTextVisible = false; 
  } else { 
    this.inputHelperTextVisible = true; 
  } 
}

额外提醒 #

如果你的expenses是通过双向绑定和输入框关联的，可能还要注意用户清空输入框时的取值逻辑——比如有些场景下输入框为空时，expenses会被设为空字符串''而非null，这种情况建议把类型扩展为number | string | null，并在判断时同时覆盖null和''两种空状态。

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