CocosCreator手记03——配置VSCode的TypeScript环境

栏目: 后端 · 发布时间: 7年前

内容简介: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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

智能

智能

[法]弗雷德里克·马特尔 / 君瑞图、左玉冰 / 商务印书馆 / 2015-8 / 59.90

揭示数字化主流大趋势的最新权威论著 《主流》作者的最新力作!与法国秋季新版同步上市! 面对数字化时代的到来,美国、欧盟、中国、俄罗斯、印度、巴西、古巴、伊朗、南非、韩国、新加坡、肯尼亚、墨西哥、日本等世界各国各地区正在如何应对? 在国际地缘政治格局下如何把握数字化主流的大趋势? 谷歌、苹果、脸书、亚马逊、阿里巴巴、腾讯、中兴、华为等大家熟知的网络巨头接受了作者的采访。作者的......一起来看看 《智能》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具