你碰到的这个报错根源其实很清晰：可选链操作符（?.）是TypeScript 3.7版本才正式加入的语法特性，而你当前项目使用的是TypeScript 3.5，这个版本还不支持?.，所以编译器完全识别不了这个语法，才会抛出':' expected的错误。

至于你疑惑为什么Angular模板里的<div *ngIf="parts?.length"></div>能正常运行——这是因为Angular模板的表达式解析逻辑和项目里的TypeScript编译器是相互独立的。比如较新版本的Angular Ivy编译器，已经内置了对可选链语法的支持，不管你项目依赖的TypeScript版本是否低于3.7，模板里的可选链都能被正确解析执行。

给你两个可行的解决方向：

• 升级TypeScript版本：把项目里的TypeScript升级到3.7或更高版本，就能直接使用可选链语法了。可以通过npm命令更新，比如：

  npm install typescript@^3.7 --save-dev
  

  当然，如果你项目允许，升级到更晚的稳定版本（比如4.x、5.x系列）会更好，能获得更多新特性和修复。
• 替代写法（不升级版本）：如果暂时没法升级TypeScript，用传统的短路判断来替代可选链，效果是一样的：

  if (!this.session.draftData || !this.session.draftData.length) { return; }
  

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