HTMLScriptElement索引签名缺失求助：TS7053错误解决建议

这个错误是因为TypeScript的严格类型检查机制：HTMLScriptElement的属性是预定义的固定集合，而attribute.name是string类型，TS无法确认这个字符串对应的属性是否属于HTMLScriptElement的已知属性，因此抛出索引类型不匹配的错误。

下面是几种可行的解决方式：

方法一：使用setAttribute操作属性（推荐） #

DOM元素的属性操作标准方式就是setAttribute，它能兼容所有标准属性和自定义属性，TypeScript对这个API的类型支持也很完善，完全避免索引类型问题：

const generateFromSource = (codeString: string) => {
    let script = document.createElement('script')
    let template = document.createElement('div')
    template.innerHTML = codeString

    const element = template.getElementsByTagName('script')[0]
    if (!element) return // 增加空值判断，避免后续循环报错
    for (let attribute of element.attributes) {
        if (attribute.value) {
            script.setAttribute(attribute.name, attribute.value)
        } else {
            // 处理无值的布尔属性（如async、defer），设置为空字符串等价于启用该属性
            script.setAttribute(attribute.name, '')
        }
    }
    document.head.appendChild(script)
}

方法二：类型断言跳过检查（临时调试用） #

如果只是想快速绕过TS的类型校验，可以把script断言为any类型，但这种方式会丢失类型安全，不推荐在生产代码中使用：

const generateFromSource = (codeString: string) => {
    let script = document.createElement('script')
    let template = document.createElement('div')
    template.innerHTML = codeString

    const element = template.getElementsByTagName('script')[0]
    for (let attribute of element.attributes) {
        if (attribute) {
            (script as any)[attribute.name] = attribute.value ? attribute.value : true
        }
    }
    document.head.appendChild(script)
}

方法三：自定义类型守卫（兼顾类型安全与灵活性） #

如果需要区分HTMLScriptElement的标准属性和自定义属性，可以写一个类型守卫来过滤合法属性名，标准属性直接赋值，自定义属性用setAttribute处理：

// 定义HTMLScriptElement的属性键类型
type ScriptElementKeys = keyof HTMLScriptElement;

// 类型守卫：判断字符串是否为HTMLScriptElement的合法属性名
function isScriptElementKey(key: string): key is ScriptElementKeys {
    return Object.keys(document.createElement('script')).includes(key);
}

const generateFromSource = (codeString: string) => {
    let script = document.createElement('script')
    let template = document.createElement('div')
    template.innerHTML = codeString

    const element = template.getElementsByTagName('script')[0]
    if (!element) return
    for (let attribute of element.attributes) {
        if (isScriptElementKey(attribute.name)) {
            script[attribute.name] = attribute.value ? attribute.value : true;
        } else {
            script.setAttribute(attribute.name, attribute.value || '');
        }
    }
    document.head.appendChild(script)
}

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