白鹭引擎 4.0 、 TypeScript 2.1 与 ECMAScript 6

白鹭引擎在2017年1月10日发布了 4.0 版本,将内部编译器提升到了 TypeScript 2.1 。 本文的主要目标是向开发者介绍这为开发者带来了哪些改变。

概述

在白鹭引擎 3.x 时代,引擎在执行构建命令时,使用的是内部定制的 TypeScript 1.8 编译器,“内部定制” 主要包括:

  • 添加生成类名称注册功能,以便白鹭引擎的反射 API
  • 根据依赖关系,进行自动的文件排序功能
  • 优化一些底层输出逻辑,降低编译体积

在白鹭引擎4.0版本,我们将编译器版本从 TypeScript 1.8 提升到了 TypeScript 2.1,您可以从 TypeScript 官方文档 了解从 TypeScript 1.8 至 2.1 引入的全新特性。除此之外,我向开发者简单介绍一些常见的技巧和问题解决方式

新特性

允许使用 ECMAScript 6 的绝大部分新语法

您需要在tsconfig.json中添加以下内容

{
    "compilerOptions": {
        "target": "es5",
        "lib":[
            "es5","dom","es6"
        ]
    }
}

当您添加es6字段后,就可以在白鹭引擎中使用全部 ES6 的新特性。ES6 功能列表您可以参见 ECMAScript 6 入门 这篇文章。
ECMAScript 6 的新特性中,属于语法的部分会由 TypeScript 直接编译为旧浏览器兼容的实现。属于 API 的部分是需要开发者加入一个 polyfill 以保证旧浏览器不会报错。目前引擎并没有添加这些 polyfill,但是我们有计划在 4.0.x 版本中为开发者自动添加 polyfill 支持。

更智能、更严格的 TypeScript 类型推断

白鹭引擎4.0 版本中我们针对 TypeScript 的特性,将引擎 API 进行了更细致的梳理,引入更细致的 API 方法签名,以比较常见的 DisplayObject.addEventListener 这个 API 为例,原来的方法签名为

class DisplayObject {

    public addEventListener(type:string,listener:Function,thisObject:any) {
    
    }
}

class Main {

    private run() {
        var button = new DisplayObject();
        button.addEventListener(egret.TouchEvent.TOUCH_TAP,
            function(e:egret.TouchEvent) { // 事件类型必须手动声明为 egret.TouchEvent,才能保证严格类型
                this.doSomething(); // 第三个参数传递的是 button,函数里的 this 应该是button,不是 Main 的实例,所以不能调用 doSomething() 方法
            },button);
        );
    }
    private doSomething(){
        
    }
}

比如在白鹭引擎4.0版本中,DisplayObject 的类型被调整为了以下类型

class DisplayObject {

    public addEventListener<Z>(type:"tap",listener:(this:Z,e:egret.TouchEvent),thisObject:Z) 
    public addEventListener<Z>(type:string,listener:(this:Z,e:egret.Event),thisObject:Z) {
    
    }
}

class Main {

    private run() {
        var button = new DisplayObject();
        button.addEventListener(egret.TouchEvent.TOUCH_TAP,
            function(e) { // 事件类型无需手动声明就可保证严格类型
                console.log (e.local_x) //由于已经推断出 e 的类型是 egret.TouchEvent,所以这里会报错  
                this.doSomething(); //自动推断出这里的 this 应该是 button,进而检查出这里会报错
            },button);
        );
    }
    private doSomething(){
        
    }
}

允许使用 async / await 关键词

async / await 是 ES2017 语法标准,他可以大幅节省异步代码的处理。注意使用这个语法糖需要在 tsconfig.json 中添加 lib : es6 或者 lib : es2015.promise

可能问题

升级到白鹭引擎4.0之后,您可能会遇到以下问题:

  • Egret Wing 代码提示报错。
    如果您遇到这种问题是因为您的 IDE 尚不支持 TypeScript 2.1,请把对应的 IDE 升级至最新版本。 Egret Wing 升级至 4.0 以上版本。
  • 编译代码报错
    升级到 TypeScript 2.1 之后,TypeScript 变得更为智能,也变得更为严格,可能会有一些之前的不规范的写法会导致报错,对其进行调整即可,比如 if ( x == false ) { 这样的逻辑在 TypeScript 1.8 不会报错,但是在 2.1 会报错,因为这种代码虽然是可以正确运行,但是有很大的潜在风险(比如 x = 0 )的时候。
  • 编译代码出现错误,典型错误堆栈如下:
D:\GitHub\egret-core\tools\lib\typescript-plus\lib\typescript.js:57926
        callExpression.arguments.forEach(function (argument) {
                                ^
TypeError: Cannot read property 'forEach' of undefined
    at visitCallExpression (D:\GitHub\egret-core\tools\lib\typescript-plus\lib\t
ypescript.js:57926:33)
    at visitExpression (D:\GitHub\egret-core\tools\lib\typescript-plus\lib\types
cript.js:57824:17)
    at visitStaticMember (D:\GitHub\egret-core\tools\lib\typescript-plus\lib\typ
escript.js:57765:17)
    at visitStatement (D:\GitHub\egret-core\tools\lib\typescript-plus\lib\typesc
ript.js:57616:17)
    at visitFile (D:\GitHub\egret-core\tools\lib\typescript-plus\lib\typescript.
js:57602:13)
    at buildDependencyMap (D:\GitHub\egret-core\tools\lib\typescript-plus\lib\ty
pescript.js:57590:13)
    at Object.reorderSourceFiles (D:\GitHub\egret-core\tools\lib\typescript-plus
\lib\typescript.js:57562:9)
    at Compiler.sortFiles (D:\GitHub\egret-core\tools\actions\Compiler.js:113:29
)
    at Compiler.compileNew (D:\GitHub\egret-core\tools\actions\Compiler.js:101:1
4)
    at Compiler.compileGame (D:\GitHub\egret-core\tools\actions\Compiler.js:52:2
5)

这个问题是我们在进行版本升级时考虑不周引发的问题,对此非常抱歉,这个问题已经在下一个版本( 4.0.1 ) 确认会得到解决,您也可以通过尽可能的不要在类的静态属性中直接创建对象来规避这个问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,396评论 2 45
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,397评论 25 707
  • 今天上了财商的第七课,关于价值塔部分。收获很多,和大家分享。 一、以前在我心中什么是价值? 做自己喜欢的事是有价值...
    雨露姐阅读 212评论 0 0
  • 懈怠、抵触、拖延、懒癌......这就是拖延症的具体表现形式,也是当前普遍存在的社会现象。想减肥,却总是想着从下一...
    9c42a2489e1d阅读 559评论 0 2
  • 第一个概念信息对称 就是在市场条件下,想要实现有效的交易,双方掌握的信息必须对称。信息如果不对称,掌握信息比较充分...
    苕花吃红薯阅读 337评论 0 0