响应式布局切换按钮的TypeScript类型定义问题求助

原JavaScript代码在TypeScript中运行会触发三类类型错误：参数e无类型定义、querySelector返回值可能为null、e.name的属性类型不存在。以下是修复后的代码及说明：

修复后的TypeScript代码 #

function Menu(e: MouseEvent & { target: HTMLButtonElement }) {
    const list = document.querySelector<HTMLUListElement>('ul');
    if (!list) return; // 处理页面中无ul元素的边界情况

    if (e.target.name === 'menu') {
        e.target.name = 'close';
        list.classList.add('top-[80px]', 'opacity-100');
    } else {
        e.target.name = 'menu';
        list.classList.remove('top-[80px]', 'opacity-100');
    }
}

关键修改点 #

• 参数类型定义：给e指定MouseEvent & { target: HTMLButtonElement }类型，明确触发事件的是按钮元素，合法访问其name属性
• 元素类型断言：给querySelector添加泛型<HTMLUListElement>，明确返回的是列表元素类型，同时增加空值判断避免后续操作null的报错
• 代码简化：将三元表达式拆分为可读性更强的if/else，并利用classList.add/remove的多参数特性简化类名操作

更严谨的绑定写法（推荐） #

如果是直接给按钮绑定点击事件，可直接获取元素实例，进一步提升类型安全性：

const menuBtn = document.getElementById('menuBtn') as HTMLButtonElement | null;
if (menuBtn) {
    menuBtn.addEventListener('click', () => {
        const list = document.querySelector<HTMLUListElement>('ul');
        if (!list) return;

        menuBtn.name = menuBtn.name === 'menu' ? 'close' : 'menu';
        list.classList.toggle('top-[80px]', menuBtn.name === 'close');
        list.classList.toggle('opacity-100', menuBtn.name === 'close');
    });
}

内容的提问来源于stack exchange，提问作者Pawan chandra Upreti