内容简介:CocosCreator手记03——配置VSCode的TypeScript环境
对于基于JavaScript的各种语言,我用过Coffee。但是印象中,除了遍地语法糖,写起来比较快。也没有觉得特别好用。
而TypeScript可谓一门语言,其主要特性有:
-
兼容 ECMAScript 2015(ES6)规范,可选择编译成ES6或ES5规范的JavaScript代码(ECMAScript 3及以上版本);
-
面向对象,并拥有一些函数式特性;
-
类型语言;
-
实现了注解、泛型等特性;
-
适配大型App构建。
这些特性,对于曾经使用过 强类型语言 的开发者,并且对于 重构 , 代码提示 有大量需求的团队,都是很有吸引力的。 虽然表面上编码量变大了,但得到的好处则是成倍的,尤其是对于大项目。
虽然CocosCreator1.5已经提供了对TypeScript的支持,但是基于 初步学习 的方便性,我们还是需要一个轻量级的,独立的TS开发环境。
1.安装node
https://nodejs.org/en/download/
一路确认
2.安装vscode
https://code.visualstudio.com/
一路确认
3.安装TypeScript
命令行模式下,全局选项,安装TypeScript
npm install -g typescript
4.确认三者安装成功
在命令行模式下,用三个命令确认安装成功
node -v npm -v tsc -v
新建一个文件夹,用作ts工程,命令行cd到文件夹里,然后运行
code .
就可以从vscode打开当前文件夹
5.项目配置文件
task.json
此文件是项目的编译配置文件
在VSCode中快捷键
Ctrl + Shift + B
用来编译,对应的编译配置文件为
.vscode/task.json
第一次运行时没有这个文件,选择创建TypeScript项目那个选项,就会自动创建 .vscode/task.json
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["-p", "."], "showOutput": "silent", "problemMatcher": "$tsc" }
基本没什么要改的,有了这个 task.json
后每次 Ctrl + Shift + B
即可调用 tsc
命令编译 typescript
。
tsconfig.json
这个文件和输出有关,直接在VSCode里建立tsconfig.json即可,然后写入如下内容
{ "compilerOptions": { "target": "es6", "outDir": "build", "sourceMap": true } }
launcher.json
此文件是项目的引导启动文件
Ctrl + Shift + D 点击配置图标,选择nodejs
然后根据提示创建launcher.json,打开此文件,加入一些选项,使VSCode认得typescript和sourceMap
"program": "${workspaceRoot}/app.ts", "sourceMaps": true, "outDir": "${workspaceRoot}/build"
这样就可以在 typescript
上打断点调试了
6.编写并调试
新建app.ts,开始写
/** * person */ class person { constructor() { } /** * print */ public print() { console.log('你好,TS'); console.log('老G,666'); console.log('弄好了,睡觉'); } } let p = new person(); p.print();
Ctrl + Shift + B 编译后就可以 ,F5调试程序了。
如果需要配置浏览器环境,可以从下面的参考文章中找到
https://github.com/nshen/ts-node-vscode-starter
https://dotblogs.com.tw/lapland/2016/03/09/163229
http://www.cnblogs.com/gaoshang212/p/5626445.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。