webstrom2020设置开发typescript自动编译

最新推荐文章于 2025-05-07 15:21:34 发布

原创最新推荐文章于 2025-05-07 15:21:34 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #webstorm #js

本文介绍了TypeScript编译器的安装与使用。首先通过npm全局安装编译器，可在命令行查看版本。接着在项目根目录新建tsconfig.json文件，然后在WebStorm中添加监听文件并更改编译设置，最后设置自动编译，使写完ts文件能自动生成js和map文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.全局安装typeScript编译器
npm install typescript -g
安装好，在命令行可以查看编译器的版本
tsc --version
2.在项目所在根目录下新建tsconfig.json文件
在这里插入图片描述
新建好的json文件如下：

3.在webstrom中添加监听文件，打开Webstorm,为TypeScript文件更改编译设置，File->Settings->File Watchers->TypeScript，这里我们需要选择TypeScript，但是File Watchers下默认是不存在的。需要点击右侧“+”号，选择,弹出 New Watcher，设置好圈红线的部分，点击ok。勾选“TypeScript”，点击ok。
在这里插入图片描述

Program：‪C:\Users\chenwei\AppData\Roaming\npm\tsc.cmd
Arguments：--sourcemap --target "ES5"
Output paths to refresh：$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
Working directory： $FileDir$
4.设置typescript自动编译，将发生改变时重新编译
在这里插入图片描述
当写完ts文件时会自动生成相应的js文件和映射文件map