TypeScript中如何处理DOM操作？元素显隐切换方案选型咨询

作为TypeScript新手，你完全不需要依赖外部JS文件来实现这个功能——直接在TypeScript中编写DOM操作逻辑才是更合理的选择。原因很简单：

• TypeScript的类型系统能帮你提前规避DOM操作的常见错误（比如不小心获取到不存在的元素、调用错误的方法）
• 代码和你的TS项目无缝整合，后续维护、扩展更方便
• 你能享受到TS的类型提示，写代码时更顺畅

下面就给你一步步实现点击按钮切换元素显示/隐藏的功能：

第一步：准备HTML结构 #

先写好按钮和需要切换的元素，给它们加上唯一ID方便获取：

<button id="toggleButton">点击切换显示状态</button>
<div id="contentBox" style="padding: 15px; background: #eee; margin-top: 10px;">
  这是要被切换显示/隐藏的内容
</div>

第二步：TypeScript实现核心逻辑 #

这里提供几种常见写法，你可以根据场景选择：

写法一：简洁版（确定元素一定存在时用） #

这种写法适合你能100%确定HTML里存在对应元素的场景，用类型断言告诉TS元素的具体类型：

// 获取按钮和目标元素，用类型断言指定元素类型
const toggleBtn = document.getElementById('toggleButton') as HTMLButtonElement;
const contentBox = document.getElementById('contentBox') as HTMLElement;

// 给按钮添加点击事件监听
toggleBtn.addEventListener('click', () => {
  // 切换display属性
  contentBox.style.display = contentBox.style.display === 'none' ? 'block' : 'none';
});

写法二：安全版（不确定元素是否存在时用） #

如果担心页面加载顺序或者元素可能被动态移除，这种写法会先判断元素是否存在，避免报错：

const toggleBtn = document.getElementById('toggleButton');
const contentBox = document.getElementById('contentBox');

// 先确认两个元素都存在，再执行后续逻辑
if (toggleBtn && contentBox) {
  (toggleBtn as HTMLButtonElement).addEventListener('click', () => {
    const currentDisplay = (contentBox as HTMLElement).style.display;
    (contentBox as HTMLElement).style.display = currentDisplay === 'none' ? 'block' : 'none';
  });
}

更优雅的写法：用CSS类切换 #

如果你不想直接操作style，还可以通过切换CSS类来实现，代码更简洁易维护：
首先在CSS里定义一个隐藏类：

.hidden {
  display: none;
}

然后TS代码只需要切换这个类即可：

const toggleBtn = document.getElementById('toggleButton') as HTMLButtonElement;
const contentBox = document.getElementById('contentBox') as HTMLElement;

toggleBtn.addEventListener('click', () => {
  // toggle方法会自动添加/移除指定类
  contentBox.classList.toggle('hidden');
});

总之，在TypeScript中直接实现DOM操作是更贴合TS生态的选择，既能利用TS的类型优势，又能保持代码的一致性。

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