TypeScript中获取DOM元素后需先类型断言再判空访问，否则会因Element无value等属性报TS2339错误，且strictNullChecks未启用将导致运行时null崩溃。
DOM元素获取后不加类型断言就访问属性会报错
TypeScript默认把document.getElementById返回值推断为Element | null，而Element没有value、checked这类专有属性。直接写input.value必然触发TS2339错误。
常见错误现象：Property 'value' does not exist on type 'Element'
- 必须显式断言类型，比如
as HTMLInputElement或as HTMLButtonElement - 不能只断言
HTMLElement——它也不含value - 若不确定具体子类型，可用联合类型+类型守卫，例如
el instanceof HTMLInputElement
忘记检查null/undefined就调用属性是运行时崩溃主因
即使加了类型断言，document.getElementById仍可能返回null。TypeScript在strictNullChecks: true下会强制你处理这个分支，否则编译失败。
典型错误写法：const input = document.getElementById("user") as HTMLInputElement; console.log(input.value);
- 正确做法：先判空再访问，
if (input) { console.log(input.value); } - 也可用可选链
input?.value，但注意它返回string | undefined，后续使用仍需处理 - 别依赖
!非空断言——它绕过检查，等于放弃类型安全
事件回调里的this和event.target类型容易误用
在addEventListener中，event.target默认是EventTarget，没有value；this在箭头函数里是any，普通函数里是globalThis。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
错误示例：button.addEventListener("click", function() { console.log(this.value); });
- 应显式声明事件参数类型：
(e: MouseEvent) => { const btn = e.target as HTMLButtonElement; } - 更稳妥的是用
e.currentTarget代替e.target，因为前者是你绑定事件的元素，类型可控 - 避免在回调里用
this，统一用箭头函数 + 显式参数
tsconfig.json里没开strictNullChecks等于白配TypeScript
很多团队配了TypeScript却依然线上报Cannot read property 'xxx' of null，根源就是tsconfig.json里"strictNullChecks": false或压根没设。
- 必须确保
"strictNullChecks": true，这是DOM类型安全的底线 - 顺带建议启用
"noImplicitAny": true和"strict": true，否则event参数不写类型也不会报错 - 如果项目老旧，至少单独开启
strictNullChecks，它对现有代码侵入最小、收益最大
DOM操作的类型安全不是靠记住几个接口名，而是靠编译器在每次.value、.files、.dataset出现时都逼你直面“它真存在吗”这个问题。漏掉一次判空，就等于在类型系统上凿了个洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
