HTML5不能直接引用TypeScript文件，必须先用tsc编译为JavaScript，再通过<script src="xxx.js">引入；编译输出路径（如outDir）须与HTML中src路径严格一致，且推荐启用strict模式确保类型安全。

浏览器不执行 TypeScript，只认 JavaScript。你不能用 <script src="app.ts"> 直接加载 .ts 文件——这么做必然报 404 或语法错误。必须先编译，再引用 .js。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

编译命令和输出路径必须匹配 HTML 中的 script 路径

很多人写完 `tsc app.ts` 就去改 HTML 的 `<script src="app.ts">`，结果白忙活。关键不是“有没有编译”，而是“编译到哪”和“HTML 引哪”是否一致。 <ul><li>默认情况下 <code>tsc app.ts 会生成同名 <code>.js 文件（如 <code>app.js），放在同一目录<li>如果你用了 <code>tsconfig.json，就得看 <code>"outDir" 和 <code>"rootDir" 配置：<ul><li><code>"outDir": "./dist" → JS 输出到 <code>./dist/app.js<li>HTML 中就得写 <code><script src="dist/app.js">（或 <code>../dist/app.js，取决于 HTML 所在位置）<li>开发时推荐加 <code>--watch：<code>tsc --watch，保存即重编译，省得反复敲命令<H3>DOM 元素获取必须处理 null，否则运行时报错 TypeScript 不会自动帮你断言元素存在，`document.getElementById('btn')` 类型是 `HTMLElement | null`，直接调 `addEventListener` 会编译失败（启用了 `strictNullChecks` 时）。 <p>常见错误写法：<ul><li><code>const btn = document.getElementById('btn'); btn.addEventListener(...) → 编译报错<li><code>const btn = <HTMLButtonElement>document.getElementById('btn'); → 类型断言不安全，运行时仍可能为 null<p>推荐做法：<ul><li>显式判空：<code>const btn = document.getElementById('btn'); if (btn instanceof HTMLButtonElement) { btn.addEventListener(...); }<li>封装工具函数：<code>function el<T extends HTMLElement>(id: string): T | null { return document.getElementById(id) as T | null; }，调用时写 <code>el<HTMLButtonElement>('btn')<li>确保元素 100% 存在才用非空断言：<code>const btn = document.getElementById('btn')! as HTMLButtonElement<H3>事件回调不加类型注解，.value/.checked 会报错 `e.target` 默认推断为 `EventTarget`，没有 `.value`、`.checked` 这些属性，IDE 也无法补全。 <ul><li><code>input.addEventListener('input', (e) => e.target.value) → 编译报错<li>正确写法：<code>input.addEventListener('input', (e: InputEvent) => { const value = (e.target as HTMLInputElement).value; })<li>更稳妥：用 <code>e.currentTarget（类型更明确）或提前断言目标元素类型<H3>tsconfig.json 必须启用 strict 模式才真正起作用 很多项目 `tsconfig.json` 里 `strict: false` 或压根没配，导致类型检查形同虚设。 <ul><li>至少启用 <code>"strict": true，它会自动打开 <code>noImplicitAny、<code>strictNullChecks、<code>strictFunctionTypes 等关键检查<li><code>"module": "ESNext" 或 <code>"commonjs" 要和打包/运行环境匹配（纯 HTML 引入建议 <code>"module": "ESNext"）<li><code>"target": "ES2015" 或更高，避免生成过老的兼容代码影响现代 API 使用<p>HTML 页面本身永远只是容器，TypeScript 的价值全在编译前的类型约束和 IDE 支持。漏掉 <code>strictNullChecks、路径配错、事件类型不写——这三处出问题，90% 的“类型安全”就只剩个空壳。<p><span>立即学习“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）”；</script>