2023年7月7日发(作者：)

⽤WebStorm开发TypeScript为什么是TypeScript最近在做H5的游戏，最终选定的TypeScript作为开发语⾔。主要是看重他有强类型和Class，作为习惯使⽤AS3,Java等强类型编程的⼈来说，还是习惯这种编程写法。听⼀些直接使⽤javascript开发稍微⼤的游戏的同事说，没有强类调试什么的都⽐较困难。我个⼈平时做⼩游戏⽤得⽐较多是纯js，⽐较⼤型的倒没尝试，所以这个不好下断论。另外⼀个主要原因是因为⽤TypeScript随时可以⽣成兼⽤不同ES版本和浏览器的代码，这个很重要。最后，国内⽐较流⾏的Egret和Laya都⽀持TypeScript。

摘点百度百科的描述，想更深⼊了解的同学可以⾃⾏查资料，有机会我也写个为什么要选择TypeScript：）安装搭配环境，这个问题其实都不太⼤，主要是后⾯的⾃动编译TypeScript⽂件为js⽂件和调试ts⽂件的问题，有需要的同学可以直接跳到后⾯去看。TypeScript是⼀种由微软开发的⾃由和开源的编程语⾔。它是JavaScript的⼀个超集，⽽且本质上向这个语⾔添加了可选的静态类型和基于类的⾯向对象编程。安德斯·海尔斯伯格，C#的⾸席架构师，已⼯作于TypeScript的开发。[1-4]

TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下⼯作。TypeScript是为⼤型应⽤之开发⽽设计，⽽编译时它产⽣JavaScript 以确保兼容性。[5] TypeScript ⽀持为已存在的 JavaScript 库添加类型信息的头⽂件，扩展了它对于流⾏的库如 jQuery，MongoDB， 和 的好处。安装配置环境1. 安装

TypeScript是在的环境上，下载地址：2. 安装TypeScript

使⽤Node的npm命令安装TypeScript编译器，在cmd界⾯⾥输⼊：npm install typescripot -g 进⾏安装WebStorm⾃动编译TypeScript默认情况，WebStorm是提供了创建TypeScript的模版⽂件，但是不提供⾃动编译ts⽂件为js和map⽂件。

⽹上找的⼀些教程，主要是教⼤家额外配置⼀个File Watcher来对ts⽂件进⾏⾃动编译。后来我发现新版本的WebStorm已经提供⾃动编译的功能了，只是需要设置⼀下。

1. WebStorm⾃带配置⾃动编译TypeScript功能

通过 File – Settings，调出 Settings界⾯，然后选择以下的界⾯即可配置：

他默认Compile那⾥的Enable TypeScript Compiler是没有打勾的，所以打上勾就可以了。

打勾后默认是使⽤选择 Use 的设置⽅式的。所以你还得增加⼀份配置⽂件。

WebStorm也是提供了模版，直接新建，选择创建 File即可。

的默认信息：{ "compilerOptions": { "module": "commonjs", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ]}1. 通过File Watcher来⾃动编译TypeScript

这个就是⽹上介绍⽐较多的⽅式，我⾃⼰也是测试过，也是⼀样是可以的，这个有点像Set options manually的⽅式，参数什么的需要⾃⼰配置。根据个⼈喜好了。⼀些参数的简要说明：Program:C:Users[username]注意，这个安装了nodejs之后就会有，请按照⾃⼰实际的⽤户名Arguments:--sourcemap --target "ES5"Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.king directory:$FileDir$

其实参数之后配置，还可以根据⾃⼰的实际情况，配置不同的⽬录，⽐如编译后输出到bin-debug⽬录。WebStorm断点调试TypeScript断点调试这个功能很强⼤，必须的，⾸先安装WebStorm的调试功能，请参考我另外⼀个篇blog，配置好调试环境：

之所以可以调试ts⽂件，主要还是因为那个map⽂件，必须ts必须⽣成map⽂件。在WebStorm⾥⾯调试ts⽂件，和调试普通的js⽂件没有任何区别。

有个要注意的地⽅，需要在WebStorm的下⾯引⼊ts⾃动⽣成好的js⽂件哦 Please use!如果WebStorm不能像Egret或者Laya那样可以⾃动插⼊，那么就得我们⾃⼰写脚本或者插件来⾃动插⼊js⽂件了。