TypeScript 代码必须先编译为 JavaScript 才能在 HTML 中运行，通过 <script type="module" src="index.js"></script> 加载，并配置 tsconfig.json 的 module 和 target；操作 DOM 需类型断言或守卫；TS 类型仅用于开发期检查，不影响运行时。
HTML 中怎么引入 TypeScript 编写的逻辑
TypeScript 不能直接在 <script type="text/typescript"> 里运行——浏览器根本不认识这个类型。所有 TS 代码必须先编译成 JS，再被 HTML 加载。
常见错误现象：Uncaught SyntaxError: Cannot use import statement outside a module 或空白页、控制台报 ReferenceError: xxx is not defined，本质都是没走编译流程，或加载顺序/模块类型不匹配。
- 用
tsc手动编译：写好index.ts后执行tsc index.ts，生成index.js，然后在 HTML 中用<script src="index.js"></script> - 更稳妥的是启用模块支持：HTML 中写
<script type="module" src="index.js"></script>，对应 TS 的export/import才能正常解析 - 别漏掉
tsconfig.json的"module": "ESNext"和"target": "ES2020"，否则编译出的 JS 可能在旧环境报错
TS 类型如何影响 HTML 元素操作
直接 document.getElementById("xxx") 返回的是 HTMLElement | null，TS 默认不允许你调用 .value 或 .addEventListener——它不知道你拿的是 <input> 还是 <div>。
使用场景：表单提交、按钮点击、动态渲染列表，都绕不开 DOM 类型断言。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用类型断言明确告诉 TS：“我知道这是
HTMLInputElement”：const input = document.getElementById("name") as HTMLInputElement; - 更安全的写法是类型守卫：
if (input instanceof HTMLInputElement) { ... } - 别写
any绕过检查——后面改 DOM 结构时，TS 就没法帮你发现.files突然变成undefined这类问题
TS 编译后 JS 文件怎么和 HTML 正确联动
编译输出路径错位、模块解析失败、全局变量不可见，是 HTML + TS 项目最常卡住的地方。
性能影响不大，但兼容性陷阱多：比如用了 import.meta.url，老版 Chrome 就不认；又或者 tsconfig.json 里设了 "outDir": "./dist"，但 HTML 还在引用 ./src/index.js。
- 确保
html中的src路径和tsc实际输出位置完全一致，建议用 VS Code 的“Go to Definition”反查 JS 文件真实位置 - 如果用
type="module"，所有导入路径必须带扩展名（import { foo } from "./utils.js"），TS 编译默认不加.js后缀，得配"moduleResolution": "node"或手动补全 - 避免在 TS 里直接挂全局变量（如
window.myApp = {...}），要用就显式声明：declare global { interface Window { myApp: any; } }
为什么 HTML 模板里不能写 TS 语法
HTML 解析器只认标签和属性，{ count }、v-if、ngModel 这些都不是原生能力——它们属于框架层的编译规则，不是浏览器行为。
容易踩的坑：有人把 TS 文件后缀改成 .html，或者在 <script> 标签里写 const x: string = "hello"，结果页面白屏，控制台报 Unexpected token ':'。
- TS 代码只能存在于
.ts文件中，且必须经过编译器处理 - 想在 HTML 中嵌入动态内容，得靠 JS 运行时操作 DOM（例如
el.textContent = count.toString()），而不是模板语法直写 - 真要写类似 JSX 的体验，得上构建工具（Vite / Webpack）+ 插件（如
@vitejs/plugin-react-swc），不是改个文件后缀就能跑
最常被忽略的一点：TS 类型只在开发期存在，编译后的 JS 里没有类型信息。所以 HTML 和 JS 的对接，永远以运行时值为准，类型只是帮你提前发现问题的辅助线。
