VSCode中TypeScript可选链触发IntelliSense错误，编译正常如何解决？

问题场景 #

在VSCode的TypeScript文件中，即便使用可选链语法（?.）尝试规避属性不存在的错误，IntelliSense仍会提示对象不存在目标属性，但代码实际可以正常编译为ES2020标准的JavaScript。

代码示例 #

"use strict"
const animals = {
    dog: {
        name: 'Rover'
    }
};
const catName = animals.cat?.name;          // <<<<<< 波浪线出现在cat下方
console.log(catName);

错误提示 #

error TS2339: Property 'cat' does not exist on type '{ dog: { name: string; }; }'.

已尝试操作与环境信息 #

• 已配置VSCode工作区设置typescript.tsdk指向项目本地node_modules/typescript/lib，状态栏显示路径（D:\projects\test-ts\node_modules\typescript\lib\tsserver.js）有效
• 禁用所有VSCode扩展，问题未解决
• 环境：VSCode 1.88.1、TypeScript 5.4.5、Windows 10

当前tsconfig.json配置 #

{
"compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./js",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
},
  "include": [
    "src"
  ]
}

解决方案 #

方法1：显式定义包含可选属性的类型（推荐） #

给animals定义明确的类型，将cat标记为可选属性，让TypeScript知晓该属性可能存在：

type Pet = {
  name: string;
};

type AnimalCollection = {
  dog: Pet;
  cat?: Pet; // 标记cat为可选属性
};

const animals: AnimalCollection = {
  dog: {
    name: 'Rover'
  }
};

const catName = animals.cat?.name; // 不再报错

方法2：调整严格类型检查配置 #

当前strict: true包含了strictNullChecks等严格检查规则，可选链本身允许访问不存在的属性，但严格模式下会触发类型错误。可以修改tsconfig：

• 若要保留大部分严格规则，仅关闭strictNullChecks：

{
"compilerOptions": {
    // ... 其他配置
    "strict": true,
    "strictNullChecks": false // 单独关闭该规则
}
}

• 或直接关闭全部严格检查（不推荐，会失去TypeScript的类型校验优势）：

{
"compilerOptions": {
    // ... 其他配置
    "strict": false
}
}

方法3：临时使用类型断言（不推荐） #

如果不想修改类型定义或配置，可通过类型断言告知TypeScriptanimals可能包含cat属性：

const catName = (animals as { dog: { name: string }, cat?: { name: string } }).cat?.name;

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