typescript 代码必须先编译为 javascript 才能在 html 中运行，通过 加载，并配置 tsconfig.json 的 module 和 target；操作 dom 需类型断言或守卫；ts 类型仅用于开发期检查，不影响运行时。
HTML 中怎么引入 TypeScript 编写的逻辑
TypeScript 不能直接在 <script type="text/typescript"></script> 里运行——浏览器根本不认识这个类型。所有 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>。
<p>使用场景：表单提交、按钮点击、动态渲染列表，都绕不开 DOM 类型断言。</p>
<ul>
<li>用类型断言明确告诉 TS：“我知道这是 <code>HTMLInputElement”：const input = document.getElementById("name") as HTMLInputElement;
if (input instanceof HTMLInputElement) { ... }
any 绕过检查——后面改 DOM 结构时，TS 就没法帮你发现 .files 突然变成 undefined 这类问题TS 编译后 JS 文件怎么和 HTML 正确联动
编译输出路径错位、模块解析失败、全局变量不可见，是 HTML + TS 项目最常卡住的地方。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
性能影响不大，但兼容性陷阱多：比如用了 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></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 的对接，永远以运行时值为准，类型只是帮你提前发现问题的辅助线。
