如何为Lit+原生JS的Web Component实现属性与事件高级类型校验？

项目基础信息 #

• 项目规模较大，基于原生JavaScript + LitHTML开发Web Component，运行稳定
• 已启用checkJS，通过JSDoc实现类型安全，代码规范统一
• 开发环境：VSCode，已安装Lit、lit-html、lit-plugin插件

问题1：复杂属性类型的校验支持不足 #

当前通过static get properties()定义组件属性时，仅支持string、number、bool、array、object基础类型。我们需要能指定**自定义复杂类型（如泛型数组）**的方案，且在传入类型不匹配时，编辑器能自动给出错误提示。

期望效果示例 #

组件属性定义：

static get properties() {
  return {
    users: { type: UserModel[], reflect: true }
  }
}

当传入不匹配类型时，编辑器应标记错误：

<!-- 此处应出现类型不匹配的红色下划线提示 -->
<my-component .users="${/** @type {SomeOtherModel[]} */ (models)}"></my-component>

注：常规JSDoc似乎不支持这类泛型数组的类型校验能力

问题2：事件参数无自动类型推导 #

事件参数默认隐式为any类型，完全无校验。启用noImplicitAny后，每次绑定事件都必须手动添加JSDoc类型注解，操作繁琐，团队接受度低。

现状与痛点 #

原简洁代码：

<my-component @my-event="${e => console.log(e)}"></my-component>

必须改写为带注解的冗余形式：

<my-component @my-event="${/** @param {CustomEvent<ResultType>} */ e => console.log(e)}"></my-component>

核心需求 #

寻找可行方案（插件、JSDoc扩展、第三方库、自定义LitElement扩展类均可），实现自定义组件层面的属性复杂类型校验与事件参数自动类型推导，达成严谨的类型安全。

内容的提问来源于stack exchange，提问作者Kyoshiro Kokujou Obscuritas