用WebStorm开发TypeScript

为什么是TypeScript

近年在做H5的玩耍,最后选定的TypeScript作为支付语言。首如若珍视他有强类型和Class,作为习惯使用AS三,Java等强类型编程的人的话,还是习惯那种编制程序写法。听一些直接使用JavaScript开发稍微大的嬉戏的同事说,未有强类调节和测试什么的都比较困难。小编个人平日做小游戏用得对比多是纯js,相比较大型的倒没尝试,所以这么些倒霉下断论。此外3个生死攸关缘由是因为用TypeScript随时能够生成兼用不一样ES版本和浏览器的代码,这些很重点。最后,国内相比较盛行的Egret和Laya都扶助TypeScript。 
摘点百度完善的讲述,想更加尖锐摸底的同班可以自行查资料,有空子笔者也写个为啥要选拔TypeScript:)

设置搭配环境,这一个题材其实都不太大,重借使背后的自行编写翻译TypeScript文件为js文件和调节和测试ts文件的难题,有亟待的同桌能够一向跳到前面去看。

TypeScript是1种由微软开发的随意和开源的编程语言。它是javascript的四个超集,而且精神上向这么些语言添加了可选的静态类型和依照类的面向对象编制程序。Anders·Haier斯Berg,C#的首席架构师,已工作于TypeScript的开发。[1-4] 
TypeScript扩大了JavaScript的语法,所以任何现有的JavaScript程序能够不加改变的在TypeScript下工作。TypeScript是为重型应用之付出而陈设,而编译时它发生JavaScript
以保证兼容性。[5] TypeScript 协助为已存在的 JavaScript
库添加类型音讯的头文件,扩充了它对于风靡的库如 jQueryMongoDBNode.js 和
D3.js 的好处。

安装配置环境

  1. 安装node.js 
    TypeScript是在node.js的条件上,node.js下载地址:https://nodejs.org/en/download/
  2. 安装TypeScript 
    行使Node的npm命令安装TypeScript编写翻译器,在cmd界面里输入:

npm install typescript -g 进行安装
  • 1

图片 1

  • 1

如若npm指令无效,那有相当大希望nodejs安装败北大概未有配备相关的环境变量,能够一向进去nodejs的安装目录,然后在cmd进入当前目录,再实行该指令 

  1. 安装WebStorm 
    自己那边运用的是WebStorm-2016.3.二,大家依照本人意况自行下载 
    WebStorm官网:( https://www.jetbrains.com/webstorm/ )

WebStorm自动编写翻译TypeScript

暗许景况,WebStorm是提供了创办TypeScript的沙盘文件,不过不提供自动编写翻译ts文件为js和map文件。 
网上找的局地科目,首假诺教我们额外安插一个File
沃特cher来对ts文件实行活动编写翻译。后来自我发觉新本子的WebStorm已经提供自动编写翻译的作用了,只是必要安装一下。 

  1. WebStorm自带配置活动编写翻译TypeScript功用 
    通过 File – Settings,调出 Settings界面,然后选取以下的界面即可配置: 

图片 2

他私下认可Compile那里的Enable TypeScript
Compiler是未有打勾的,所以打上勾就能够了。 
打勾后私下认可是利用选用 Use
tsconfig.json的安装方法的。所以你还得充实一份tsconfig.json配置文件。 
WebStorm也是提供了模版,直接新建,选取创制 tsconfig.json File即可。 

图片 3

 

 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 沃特cher来自动编译TypeScript 
    本条就是网上介绍比较多的措施,作者要好也是测试过,也是1律是足以的,那么些有点像Set
    options
    manually的艺术,参数什么的供给协调布署。依据个体喜好了。1些参数的归纳表达:

    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$

 图片 4

 

实在参数之后安插,还足以根据本身的骨子里意况,配置差异的目录,比如编写翻译后输出到bin-debug目录。

WebStorm断点调节和测试TypeScript

断点调节和测试那些成效很有力,必须的,首先安装WebStorm的调节和测试作用,请参见作者别的八个篇blog,配置好调试环境: 
WebStorm强大的调试JavaScript功用 
所以可以调剂ts文件,主要照旧因为13分map文件,必须ts必须生成map文件。在WebStorm里面调节和测试ts文件,和调剂普通的js文件并未有其余区别。 

 图片 5

 

 

有个要留意的地点,要求在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