typescript编译器tsc需本地安装,webstorm仅调用它;未安装会报“cannot find tsc”;推荐全局安装npm install -g typescript;file watcher须勾选“trigger on external changes”并核对tsconfig.json中outdir、noemit等配置。

TypeScript编译器(tsc)必须先装好
WebStorm不自带TypeScript编译能力,它只是调用你本地安装的 tsc。如果没装,点「自动编译」只会报错:Cannot find tsc 或 Command "tsc" not found。
确认方式:终端运行 tsc --version。没输出就说明没装。推荐全局安装(方便所有项目用):npm install -g typescript。若项目级使用,确保 node_modules/.bin/tsc 存在且可执行。
- 全局安装后,WebStorm 通常能自动探测到
tsc路径;若没识别,需手动填入(见下一条) - 不要依赖 IDE 内置的“简易编译器”——那是只做语法检查的 fake tsc,不生成 JS
- 注意 Node.js 版本兼容性:TS 5.x 要求 Node ≥18.12,老项目升级时容易卡在这
File Watcher 配置里必须勾选“Trigger on external changes”
这是最常被忽略的开关。很多人配完 tsc Watcher,改了 .ts 文件却没生成 .js,就是因为这个选项默认关闭。
路径:Settings → Tools → File Watchers → 点击你的 TypeScript watcher → 勾选 Trigger on external changes(就在 “Advanced options” 折叠区里)。
- 不勾它,只有你主动保存文件时才触发;但像 Git checkout、Prettier 格式化、或另一台编辑器改了文件,都不会触发编译
- 同时建议勾上
Auto-save edited files to trigger compilation,避免忘记 Ctrl+S - 输出路径别写死成
./dist—— 如果tsconfig.json里设了"outDir": "./build",Watcher 的Arguments应该是--project $ProjectFileDir$/tsconfig.json,而不是手动拼参数
tsconfig.json 的 “compilerOptions” 直接决定生成结果
WebStorm 的 File Watcher 只是外壳,真正控制是否生成 JS、是否带 source map、是否删掉注释的,全是 tsconfig.json 里的配置项。
关键几项必须核对:
-
"outDir":生成 JS 的根目录,必须存在且有写权限;路径是相对于tsconfig.json位置的 -
"declaration"和"composite":如果开 true,会额外生成.d.ts;但若没配好references,可能报error TS6307 -
"noEmit"必须为false(默认就是 false,但有人手抖改成 true 就静默不输出) -
"emitDeclarationOnly"开了就只出 .d.ts,不出 .js —— 这个坑特别隐蔽,错误现象是「TS 没报错,但 JS 文件完全不更新」
Watch 模式下遇到 “file change detected” 却无反应?检查 tsconfig.json 是否被多处引用
常见于单体仓库(monorepo):一个根目录有 tsconfig.json,多个子包又各自有 tsconfig.json 并 extends 它。此时 WebStorm 可能监听错了配置文件,导致改动子包 TS 文件,却用根配置去编译 —— 而根配置里 "include" 可能没包含子包路径,于是什么也不做。
验证方法:在 Terminal 里进子包目录,手动运行 tsc -w -p tsconfig.json,看是否正常编译。如果不正常,说明配置本身就有问题,WebStorm 只是暴露了它。
- 解决方案:在 File Watcher 的
Working directory里明确填子包路径,比如$ProjectFileDir$/packages/utils - 或者统一用项目根下的
tsc -w -p packages/utils/tsconfig.json启动,再让 WebStorm 复用这个命令 - 别指望 WebStorm 自动识别 “哪个 tsconfig 对应哪个文件”——它只认当前打开文件所在目录最近的 tsconfig,逻辑简单,但也容易误判
tsconfig.json 里悄悄开了 "noEmit": true,或者 "outDir" 指向了一个被 Gitignore 掉、但 WebStorm 仍试图写入的路径。这类问题不会报错,只会沉默。










