为何TSX不对名称含短横线(-)的属性进行类型检查？

这是TypeScript对JSX属性的特殊兼容规则导致的：包含连字符（-）的属性会被默认视为非标准/扩展属性，跳过严格的props类型校验；而无特殊符号的标准命名属性则会严格匹配组件的props定义。

具体原因 #

1. HTML原生属性兼容：JSX语法脱胎于HTML，而HTML中存在大量带连字符的原生属性（如data-*、aria-*这类自定义属性）。TypeScript为了兼容这类场景，默认不对带连字符的属性进行类型检查，避免不必要的错误提示。
2. TypeScript的JSX解析逻辑：在解析JSX属性时，TypeScript会对属性名做判断——如果属性名包含连字符，会自动将其归类为“无需严格校验”的属性，不会与组件的props定义做匹配；而像p3这种符合标识符命名规则的属性，则会严格校验是否存在于props类型中。

结合代码分析 #

declare namespace JSX {
  interface ElementAttributesProperty {
    props: any;
  }
}
class A {
    props!: { p1: string }
}
const tsx = <A p1="" p-p2={1} p3=""></A>

• p1：完全匹配props中的p1:string定义，无类型错误；
• p-p2：因属性名带连字符，TypeScript跳过类型检查，即使props未定义该属性也不会报错；
• p3：属于标准标识符命名，props中未定义，触发类型错误。

如何对带连字符的属性做类型检查 #

如果需要严格校验带连字符的属性，可以通过以下方式实现：

1. 属性名驼峰化：将p-p2改为pP2，在组件内部自行处理属性映射，这样就能让TypeScript进行类型校验；
2. 添加索引签名：在props类型中显式允许任意属性，包括带连字符的：

class A {
    props!: {
        p1: string;
        [key: string]: any; // 允许任意其他属性
    }
}

但这种方式会放开所有未定义属性的校验，需要根据实际场景权衡使用。

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