ES6 Classes 和 TypeScript 直播帖

jare · 2017年05月16日 09:33

直播时间

2017 年 5 月16 日 20:00～22:00

直播地址

https://www.douyu.com/726225

直播预告

本次直播将介绍 Creator 1.5 即将新增的 ES6 Classes 和 TypeScript 支持。经过更新，Creator 已经能够比较好的支持代码智能提示，本次直播将介绍如何在 JavaScript 以及 TypeScript 中实现这一效果。主要内容包含

智能提示实现原理
Creator 中的脚本转译机制
Class 定义方式级实现原理
装饰器声明方式级实现原理
利用 JSDoc 增强 JS 中的智能提示
ES6 module 简介

最后还会使用 ES6 的 Class 声明方式，对 Creator 原有的《吃星星》范例进行改写，同时继续演示代码智能提示，让大家能够有更直观的认识。

如果你想要提前好功课，那可以准备一下：

直播使用的 Creator：1.5.0 beta3+
下载地址： http://forum.cocos.com/t/cocos-creator-v1-5-0-5-5-beta-3/45624
直播使用的《吃星星》项目
教程地址： http://www.cocos.com/docs/creator/getting-started/quick-start.html
项目地址： https://github.com/cocos-creator/tutorial-first-game/tree/master/polished_project

jare · 2017年05月16日 16:13

直播大纲

范例演示

ES6

https://github.com/cocos-creator/tutorial-first-game/tree/master/polished_project_es6

成员字段
getComponent

TS

https://github.com/cocos-creator/tutorial-first-game/tree/master/polished_project_ts

实现原理

ES6/TS 的脚本编译

ES6/TS Classes 实现原理

装饰器

ccclass 装饰器

其它 API

局限

mixins
notify
Simulator: mutating the [[Prototype]] of an object will cause your code to run very slowly; …

利用 JSDoc 增强 JS 中的智能提示（via Nantas）

ES6 module 简介

export default class ExampleClass {} 对应 import ExampleClass from “…”;
export class ExampleClass{} 对应 import {ExampleClass} from “…”;
// TS
class ExampleClass {}
export = ExampleClass; 对应 import ExampleClass = require("…"); // or import * as ExampleClass from “…”;

TypeScript 的不同之处

default

enum

范例实现

不需要定义 Star.game 的 property
Game.spawnNewStar 中，给 newStar 定义 type

致谢 @toddlxt @nantas

参考链接

ES6 Classes:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
http://es6.ruanyifeng.com/#docs/class

TypeScript Classes:
https://www.typescriptlang.org/docs/handbook/classes.html

jare · 2017年05月16日 08:59

toddlxt · 2017年05月16日 09:19

awaken929 · 2017年05月16日 09:21

支持支持支持支持支持

1112962 · 2017年05月16日 09:28

1.5.0 安装包下载下来，大小都有问题，才30多M，这叫人怎么玩啊。。。

jare · 2017年05月16日 09:34

已修复，重新下载

1112962 · 2017年05月16日 10:06

还是不成，难道只有我这下载有问题吗

jare · 2017年05月16日 10:56

最新的 beta5 下载已恢复正常

epenli · 2017年05月16日 15:22

我调侃一句南大就无情的把我禁言了 … … 禁言 . 了…

jare · 2017年05月18日 02:00

直播回顾

直播正式开始后，主播先回顾了 ES6 和 TypeScript 的开发过程，然后现场演示了 Creator 中的 ES6 和 TypeScript 项目。目前这两种项目都能够实现较完整的智能提示，包括类的成员字段的提示，还有 getComponent 等 API 的类型推导都不在话下。

成功吸引了大家注意力后，主播展开新的话题，开始就 ES6 和 TypeScript 的实现原理进行讲解，内容涉及 Creator 的脚本编译机制，还有 ES6 的 Classes 实现机制等部分。

介绍完原理后，主播开始重点介绍装饰器，装饰器是实现智能提示的开发重点，也是这次直播的重点内容。目前 Creator 提供的装饰器能够将标准的 ES6 Classes 实现为 CCClass，其中最重要的就是 @ccclass 和 @property。主播表示，为了降低学习成本，装饰器的 API 都有详细的参数说明和使用范例，小伙伴们不用担心。另外，受限于 ES6 Classes 的实现标准和目前 SpiderMonkey 的实现，新的写法会有一些局限。例如 mixins 中的类不能是用 ES6 Classes 声明的类型，也不能自动调用 mixins 中的构造函数。还有 notify 参数也不再支持等问题。

接下来，主播补充了一些零散的知识点，像是 JSDoc，还有 ES6 module，还有 TypeScript 使用上的一些需要注意的地方，就结束了上半场的直播。下半场的直播，主播直接使用了 Creator 原先的《吃星星》项目，一步一步演示了如何将它升级为 ES6 项目，再升级为 TypeScript 项目，升级全程非常平滑，而且可以一个类一个类逐步升级，只要脚本能编译通过，对项目的运行几乎没有影响。

通过两个小时的直播，大家肯定还不能完全吸收这部分知识，没关系，今后我们还将提供更系统的文档，帮助大家学习。