Stencil.js组件升级后编译报错：Object is possibly 'undefined'

我来帮你搞定这个编译报错的问题！你的代码里的核心问题在于装饰器的执行时机，下面给你两个可行的解决方案，都不用修改编译器配置：

方案1：去掉target选项（推荐） #

@Listen装饰器默认就是监听组件的宿主元素（也就是你用@Element()装饰的el对应的元素），所以完全不需要手动指定target。修改后的代码如下：

@Element() el: HTMLSpxEditElement

@Listen('keydown')
onClickEnter (evt) {
  if (evt.keyCode === 13) {
    evt.preventDefault()
  }
}

这样既简化了代码，又彻底解决了TypeScript的类型报错。

方案2：使用:host选择器指定目标元素 #

如果你确实需要明确指定监听的目标元素，可以用CSS选择器:host来指代组件的宿主元素，它和this.el指向的是同一个元素，但不会有未初始化的问题：

@Element() el: HTMLSpxEditElement

@Listen('keydown', { target: ':host' })
onClickEnter (evt) {
  if (evt.keyCode === 13) {
    evt.preventDefault()
  }
}

为什么之前的this!.el没用？ #

这里的关键是装饰器的执行时机：@Listen装饰器是在类定义阶段就运行的，而@Element()装饰的el属性是在组件实例化之后才会被赋值。所以在装饰器执行时，this.el其实是undefined，即使你加了非空断言!，TypeScript还是能检测到这个潜在的运行时问题，所以报错依然存在。

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