Stencil JS 2.17.0给DIV设置自定义属性报TS类型错误如何解决

问题描述 #

在Stencil JS 2.17.0版本中为原生DIV标签添加自定义size属性时，TypeScript抛出如下类型错误：

Property 'size' does not exist on type 'HTMLAttributes'

旧版本Stencil JS中，通过创建jsx.d.ts写入以下类型声明即可解决同类问题，但该方案在2.17.0版本中不再生效：

import { JSXBase } from '@stencil/core';

declare namespace JSX {
   interface IntrinsicElements {
      'div': JSXBase.HTMLAttributes & {
          size?: string
      }
   }
}

失效原因 #

Stencil 2.x版本调整了内部JSX类型的导出与合并逻辑，旧的全局JSX命名空间声明不会被Stencil的类型系统识别，需要通过模块扩展的方式补充自定义属性类型。

修复步骤 #

• 打开项目中原先的jsx.d.ts文件，将原有内容替换为以下代码：

import { HTMLAttributes } from '@stencil/core/internal';

type CustomDivAttrs = HTMLAttributes<HTMLDivElement> & {
  size?: string;
};

declare module '@stencil/core' {
  export namespace JSX {
    interface IntrinsicElements {
      div: CustomDivAttrs;
    }
  }
}

• 确认该.d.ts文件被项目tsconfig.json的include配置覆盖，没有被exclude规则排除。
• 重启IDE的TypeScript服务清除类型缓存：VS Code用户可通过快捷键Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac）调出命令面板，执行TypeScript: Restart TS Server即可。

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