menu
more_vert
用WebStorm开发TypeScript

作者:dayu

npm install typescript -g 进行安装
  • 1
技术分享
  • 1

如果npm指令无效,那有可能nodejs安装失败或者没有配置相关的环境变量,可以直接进入nodejs的安装目录,然后在cmd进入当前目录,再执行该指令
3. 安装WebStorm
我这里使用的是WebStorm-2016.3.2,大家根据自己情况自行下载
WebStorm官网:(https://www.jetbrains.com/webstorm/)

他默认Compile那里的Enable TypeScript Compiler是没有打勾的,所以打上勾就可以了。
打勾后默认是使用选择 Use tsconfig.json的设置方式的。所以你还得增加一份tsconfig.json配置文件。
WebStorm也是提供了模版,直接新建,选择创建 tsconfig.json File即可。

技术分享

tsconfig.json的默认信息:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

具体的参数信息,可以考虑这里:https://www.tslang.cn/docs/handbook/tsconfig-json.html
如果不想使用tsconfig.json的话,那么可以直接使用WebStorm内置的参数选项,也就是旁边的
Set options manually
我个人推荐是使用是tsconfig.json,毕竟方便自由,只要熟悉了配置信息,就好多了,而且egret和laya都是使用tsconfig.json的。

    1. 通过File Watcher来自动编译TypeScript
      这个就是网上介绍比较多的方式,我自己也是测试过,也是一样是可以的,这个有点像Set options manually的方式,参数什么的需要自己配置。根据个人喜好了。一些参数的简要说明:
Program:C:\Users\[username]\AppData\Roaming\npm\tsc.cmd

注意,这个安装了nodejs之后就会有,请按照自己实际的用户名

Arguments:--sourcemap --target "ES5"
Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
Working directory:$FileDir$

技术分享

其实参数之后配置,还可以根据自己的实际情况,配置不同的目录,比如编译后输出到bin-debug目录。

有个要注意的地方,需要在WebStorm的main.html下面引入ts自动生成好的js文件哦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="Script.js"></script>
    <script src="ScriptClass.js"></script>
    <script src="Person.js"></script>
</head>
<body>
<canvas id="example" width="640" height="480">
    Please use!
</canvas>
<script>
    main();
</script>
</body>
</html>

如果WebStorm不能像Egret或者Laya那样可以自动插入,那么就得我们自己写脚本或者插件来自动插入js文件了。

转载自CSDN--地址:http://blog.csdn.net/sujun10

用WebStorm开发TypeScript

原文地址:http://www.cnblogs.com/Mousika/p/7214316.html