为什么是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 库添加类型信息的头文件,扩展了它对于流行的库如 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

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

WebStorm自动编译TypeScript

默认情况,WebStorm是提供了创建TypeScript的模版文件,但是不提供自动编译ts文件为js和map文件。 
网上找的一些教程,主要是教大家额外配置一个File Watcher来对ts文件进行自动编译。后来我发现新版本的WebStorm已经提供自动编译的功能了,只是需要设置一下。 
1. WebStorm自带配置自动编译TypeScript功能 
通过 File – Settings,调出 Settings界面,然后选择以下的界面即可配置:

他默认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断点调试TypeScript

断点调试这个功能很强大,必须的,首先安装WebStorm的调试功能,请参考我另外一个篇blog,配置好调试环境: 
WebStorm强大的调试JavaScript功能 
之所以可以调试ts文件,主要还是因为那个map文件,必须ts必须生成map文件。在WebStorm里面调试ts文件,和调试普通的js文件没有任何区别。

有个要注意的地方,需要在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="" height="">
Please use!
</canvas>
<script>
main();
</script>
</body>
</html>

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

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

用WebStorm开发TypeScript的更多相关文章

  1. WebStorm开发TypeScript的设置

    Webstorm IDE可以开发TypeScript,同时支持自动编译成js文件,下面我们来进行一些简单的配置. 1.去node.js官网下载安装node.js 2.下载安装新版本的Webstorm ...

  2. 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  3. 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  4. 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  5. 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  6. 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  7. 实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  8. [Tool] 使用Visual Studio Code开发TypeScript

    [Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在「Windows」.「OS X」操作系统上,使用Visual Studio Code ...

  9. Visual Studio Code开发TypeScript

    [Tool] 使用Visual Studio Code开发TypeScript   [Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在 ...

随机推荐

  1. leetcode-482-License Key Formatting

    题目描述: You are given a license key represented as a string S which consists only alphanumeric charact ...

  2. linux下安装gcc详解

    1.了解一下gcc 目前,GCC可以用来编译C/C++.FORTRAN.JAVA.OBJC.ADA等语言的程序,可根据需要选择安装支持的语言.我自己linux上是4.1.2版本,是不支持openMP的 ...

  3. SPI 用户空间的读写操作

    spi_device 虽然用户空间不需要直接用到spi_device结构体,但是这个结构体和用户空间的程序有密切的关系,理解它的成员有助于理解SPI设备节点的IOCTL命令,所以首先来介绍它.在内核中 ...

  4. TX2 用文件IO的方式操作GPIO

    概述 通过 sysfs 方式控制 GPIO,先访问 /sys/class/gpio 目录,向 export 文件写入 GPIO 编号,使得该 GPIO 的操作接口从内核空间暴露到用户空间,GPIO 的 ...

  5. Python抓取远程文件获取真实文件名

    用urllib下载远程文件并转存到hdfs服务器,在下载时,下载地址中不一定包含文件名,需要从连接信息中获取. 1 file_url = request.form.get('file_url') 2 ...

  6. 关于开发环境无法运行applet

    测试一下IE java vm 如果没有正确显示出来,说明java vm插件没有装好: 我用Uninstalle 来清理注册表:重装jdk 1.6_45

  7. Windows开发经验 - WinDbg

    1. 远程调试 参考文章:https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/remode-debugging-usi ...

  8. [Xamarin.Android]如何引用JAR檔案 (转帖)

    這個範例是如何在Xamarin.Android中去使用一個我們自行在開發的JAR檔案. 主要會執行的步驟如下 1. 在Xamarin建立一個Android Java Bindings Library ...

  9. (转)CentOS 7 安装 Docker

    原文:http://www.cnblogs.com/stulzq/p/7743073.html http://www.cnblogs.com/stulzq/p/8629165.html-------- ...

  10. Check类之TypeValidation

    (1)Validator类的visitTypeApply()方法 实例1: class TestTypeVal<T extends InputStream>{ TestTypeVal< ...