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


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

查看所有标签

猜你喜欢:

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

About Face 2.0

About Face 2.0

Alan Cooper、Robert M. Reimann / Wiley / March 17, 2003 / USD 35.00

First published seven years ago-just before the World Wide Web exploded into dominance in the software world-About Face rapidly became a bestseller. While the ideas and principles in the original book......一起来看看 《About Face 2.0》 这本书的介绍吧!

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具