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

Posted 2020-09-21

对于基于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调试程序了。

如果需要配置浏览器环境，可以从下面的参考文章中找到

参考：
http://www.2gua.info/post/59

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

本文出自 “做游戏的老G” 博客，请务必保留此出处http://goldlion.blog.51cto.com/4127613/1932014