迁移旧网站至TypeScript遇类型错误：number不可赋值给string

报错核心原因 #

你这段代码的报错根源是多余的parseFloat()调用：parseFloat()的参数要求是字符串类型，但你传入的thingWidth/thingHeight是两个数字类型变量相除的结果，本身已经是number，这就导致了类型不匹配的错误。另外还有个隐藏问题：thing.style.aspectRatio只接受字符串类型的值，直接赋值number也会触发类型错误。

修正后的代码 #

useEffect(() => {
    const iframWrap = document.querySelectorAll<HTMLIFrameElement>('.video-wrapper iframe');
    iframWrap.forEach((thing) => {
        const widthAttr = thing.getAttribute('width');
        const heightAttr = thing.getAttribute('height');
        
        let thingRatio = 1;
        // 先判断属性存在，再转数字，避免parseFloat(null)得到NaN
        if (widthAttr && heightAttr) {
            const thingWidth = parseFloat(widthAttr);
            const thingHeight = parseFloat(heightAttr);
            // 确保数字有效且除数不为0
            if (!isNaN(thingWidth) && !isNaN(thingHeight) && thingHeight !== 0) {
                thingRatio = thingWidth / thingHeight;
            }
        }
        // 转成字符串赋值给aspectRatio
        thing.style.aspectRatio = thingRatio.toString();
    });
}, []);

关键修改说明 #

• 删掉parseFloat(thingWidth/thingHeight)里的parseFloat()：两个数字相除的结果已经是number，完全不需要再转一次。
• 完善合法性检查：先判断width/height属性是否存在，再转换数字，同时过滤掉NaN和除数为0的情况，避免计算出无效比例。
• 适配样式属性类型：把number类型的thingRatio转成字符串再赋值给aspectRatio，符合DOM样式的类型要求。
• 优化元素类型：把HTMLElement替换成HTMLIFrameElement，让类型声明更精确。

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