VS Code中@ts-check未检测JavaScript对象不存在属性问题排查

当你在VS Code中给JS文件启用// @ts-check后，出现这种差异是因为TypeScript对JS文件的类型检查规则默认是宽松的：

• 对于对象字面量（比如你定义的obj），TypeScript默认会推断它为开放类型——意思是除了已知的str属性外，允许这个对象拥有其他任意属性（类型为unknown）。这是为了兼容JavaScript本身允许动态添加属性的特性，所以访问obj.nonexistant时，TypeScript不会判定为错误，只会认为这个属性可能存在，类型是未知的。
• 而变量num被推断为number类型后，把string类型的obj.str赋值给它属于明确的类型不兼容，这种基础的类型匹配检查在// @ts-check模式下是严格生效的，所以会触发错误提示。

如果想要让访问不存在的对象属性时也报错，可以用以下两种方式：

方式一：用JSDoc注解明确对象类型 #

通过/** @type {类型} */给对象指定严格的结构类型，限制它只能拥有你定义的属性：

// @ts-check
/** @type {{ str: string }} */
const obj = {
  str: `a string`,
};

console.log(obj.nonexistant); // 现在会出现红色下划线错误

方式二：启用严格类型检查模式 #

在项目根目录创建jsconfig.json文件，配置strict选项为true，让TypeScript对JS文件启用更严格的检查规则：

{
  "compilerOptions": {
    "strict": true
  }
}

配置后，即使不用JSDoc注解，访问对象不存在的属性也会触发错误提示。

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