Chrome扩展开发中TypeScript错误ts(2345)的解决方案问询

方法1：过滤无效标签页 #

既然你认为tab.id为undefined的概率极低，先过滤掉这类异常项，TypeScript会自动推断剩余标签页的id为number类型：

chrome.tabs.query({}, (tabs) => {
  const validTabs = tabs.filter(tab => tab.id !== undefined);
  validTabs.forEach(tab => {
    chrome.tabs.sendMessage(tab.id, { message: "your-content" });
  });
});

这种方式既做了安全校验，又不用写非空断言，代码严谨且简洁。

方法2：用类型守卫缩小类型范围 #

如果不想生成新数组，直接在循环里做判断，TypeScript会在判断块内自动缩小tab.id的类型：

chrome.tabs.query({}, (tabs) => {
  tabs.forEach(tab => {
    if (tab.id !== undefined) {
      chrome.tabs.sendMessage(tab.id, { message: "your-content" });
    }
  });
});

方法3：类型断言（替代非空断言） #

如果只是想换一种写法，也可以用类型断言，但安全性和非空断言一致，只是语法不同：

chrome.tabs.sendMessage(tab.id as number, { message: "your-content" });

关于GitHub示例无需非空断言的原因 #

大概率是示例代码未开启TypeScript的strictNullChecks配置，或者使用的旧版@types/chrome中tab.id的定义不包含undefined类型。你可以检查自己的tsconfig.json，如果开启了strict: true（默认包含strictNullChecks），就必须处理undefined的情况。

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