为Creator开启自动编译TypeScript的探索

Creator 2.x
#1

最近看到很多帖子讨论怎样在Creator中使用TypeScript，我自己一直也很喜欢TypeScript，因此今天花了一点时间探索怎样使用Creator+TypeScript，结果没有花特别多功夫，就“貌似”成功了。现在跟大家分享一下配置的过程，帖末附上示例工程。我自己也是在探索阶段，如果您阅读后有任何问题或建议，欢迎回帖讨论。
##1、安装cnpm
https://npm.taobao.org/
##2、 全局安装TypeScript
cnpm install typescript -g
##3、 Creator创建HelloWorld工程（下面假设工程目录为project）
##4、 创建TypeScript配置文件project\tsconfig.json，内容为：

{
  "compilerOptions": {
    "module": "es2015",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outDir": "assets/Script/",
    "allowJs": true
  },
  "include": [
    "typescript/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

该配置的主要功能是把project\typescript下的所有ts和js文件（包含子文件夹）编译到project\assets\Script目录下。
编译选项说明参见：
http://tslang.cn/docs/handbook/compiler-options.html
##5、 创建project\typescript目录，并创建以下4个测试文件：
####typescript\global.ts:

// 引擎的全局变量，防止编译报错
declare let cc: any;
declare let jsb: any;
declare let sp: any;
declare let js: any;
declare let anysdk: any;
declare let dragonBones: any;
declare let db: any;

####typescript\interfaces\TestInterface.ts:

interface TestInterface {
    text: string
}
export default TestInterface;

####typescript\classes\Test.ts:

import TestInterface from '../interfaces/TestInterface';
class Test implements TestInterface {
    text: string;

    constructor(text: string) {
        this.text = text;
    }

    getText(): string {
        return this.text;
    }
}
export default Test;

####typescript\HelloWorld.ts:

import Test from './classes/Test';
cc.Class({
    extends: cc.Component,
    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        text: "Hello, World!"
    },
    onLoad() {
        let test = new Test(this.text);
        this.label.string = test.getText();
    }
});

##6、 开启自动编译（a、b两种方法任选其一即可）
a. 在project目录下用命令行运行（注意不要停止这个命令行的运行）
tsc -w
TypeScript会监测你的文件改动，并自动编译。
b. 使用WebStorm，打开自动编译选项：

粘贴的图像1914×1302 279 KB

则在WebStorm中对project\typescript目录下的ts与js文件做的修改，会被立刻编译到assets/Script/目录下。
另外WebStorm会对extends, default报保留关键字错误（不影响编译），可以对它们加上引号，或者停止WebStorm对该问题的检查（选中extends后按Alt+Enter出现菜单）：
粘贴的图像1393×392 116 KB

##7、 检验结果
现在，回到Creator中，打开assets\Scene\helloworld场景，运行。如果一切正常，就可以看到HelloWorld！了。现在的工作流程是：
a. 在IDE中修改project\typescript\下的ts、js代码并保存
b. TypeScript检测到改动，自动编译js文件至project\assets\Script\目录下
c. Creator检测到改动，自动编译所有assets下的js文件
d. 等待Creator编译结束，即可运行项目

附样板工程：
Creator-TypeScript-Boilerplate.zip (223.6 KB)

4赞
#2

##8、 在Creator中使用async、await
TypeScript将在2.1版中实现将async、await编译为ES5代码（Cocos原生平台只支持到ES5）的功能。6天前TypeScript发布了2.1RC版，我们可以先来尝尝鲜了。
###a. 安装TypeScript最新版
cnpm install typescript@rc (安装2.1RC版)
或
cnpm install typescript@next (安装昨日更新版)
###b. 安装Promise插件
在project目录运行
cnpm install es6-promise --save
然后拷贝project\node_modules\es6-promise\dist\es6-promise.auto.min.js至project\assets\Script目录下，在Creator中将其设置为插件。

###c. 修改tsconfig.json

在compilerOptions中加入选项：“target”: “es5”，修改后如下。

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es5",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outDir": "assets/Script/",
    "allowJs": true
  },
  "include": [
    "typescript/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

###d. 修改测试代码

将project\typescript\classes\Test.ts中Test类的getText()方法改为Promise，延迟3秒返回Text:

    // 注意getText前面要加async
    async getText(): Promise<string> {
        return new Promise<string>((resolve, reject) => {
            setTimeout(() => {
                resolve(this.text);
            }, 3000);
        });
    }

在project\HelloWorld.ts中使用await获取text:

    // 注意onLoad前面要加async
    async onLoad() {
        let test = new Test(this.text);
        this.label.string = await test.getText();
    }

###e. 检验结果
等待TypeScript与Creator编译结束，运行项目。如果一切正常，将会在3秒后看到Label变为HelloWorld!

1赞
#3

强！！！！！！！！！

#4

好厉害！！测试成功，非常感谢

#5

留个脚印，以后看

#6

有需要用TypeScript的话看这个更新的帖子：
http://forum.cocos.com/t/typescript-creator-github/42200

#7

楼上发的新帖更全面，请到新帖讨论，本帖关闭以防挖坟。

#8