Angular中用jQuery获取DOM宽高提示Object is possibly 'undefined'如何解决

该报错是TypeScript的类型校验提示：jQuery的width()、height()方法在匹配不到对应DOM元素、元素未完成渲染、或元素被设置隐藏样式时，返回值可能为undefined，类型系统检测到该风险所以抛出提示。可以根据场景选择以下方案解决：

• 方案1：添加空值校验+兜底默认值（最稳妥，推荐）
  先校验元素是否存在，再通过空值合并运算符给返回值设置兜底默认值，避免运行时报错：

  // 先获取目标DOM元素
  const $pdfTable = $("#pdfTable");
  // 校验元素是否存在
  if ($pdfTable.length === 0) {
    console.error("未找到id为pdfTable的DOM元素");
    // 可根据业务需求加抛出错误/终止逻辑的代码
  }
  // 空值合并运算符??：当左侧值为undefined/null时返回右侧默认值
  const HTML_Width = $pdfTable.width() ?? 0;
  const HTML_Height = $pdfTable.height() ?? 0;
  const top_left_margin = 15;
  const PDF_Width: number = HTML_Width + (top_left_margin * 2);
  

• 方案2：非空断言（仅适合你100%确定元素一定存在、能正常获取宽高的场景）
  用TypeScript的非空断言操作符!，明确告诉类型系统该值一定不为空，跳过校验：

  var HTML_Width = $("#pdfTable").width()!;
  var HTML_Height = $("#pdfTable").height()!;
  var top_left_margin = 15;
  var PDF_Width:number = HTML_Width+(top_left_margin*2);
  

• 方案3：类型断言
  也可以通过类型断言明确指定返回值为number类型，绕过校验：

  var HTML_Width = $("#pdfTable").width() as number;
  var HTML_Height = $("#pdfTable").height() as number;
  

额外注意事项 #

• 确保代码执行时，#pdfTable元素已经完成DOM渲染，不要在元素还没生成的生命周期阶段执行该逻辑
• 如果表格是动态生成的，要等表格内容全部渲染完成、样式生效后再获取宽高，否则也可能出现空值或者宽高计算错误的问题

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