白鷺引擎 4.0 呀枢、 TypeScript 2.1 與 ECMAScript 6

白鷺引擎在2017年1月10日發(fā)布了 4.0 版本祈搜,將內(nèi)部編譯器提升到了 TypeScript 2.1 较店。 本文的主要目標(biāo)是向開發(fā)者介紹這為開發(fā)者帶來了哪些改變。

概述

在白鷺引擎 3.x 時(shí)代容燕,引擎在執(zhí)行構(gòu)建命令時(shí)泽西,使用的是內(nèi)部定制的 TypeScript 1.8 編譯器,“內(nèi)部定制” 主要包括:

  • 添加生成類名稱注冊功能缰趋,以便白鷺引擎的反射 API
  • 根據(jù)依賴關(guān)系,進(jìn)行自動(dòng)的文件排序功能
  • 優(yōu)化一些底層輸出邏輯陕见,降低編譯體積

在白鷺引擎4.0版本秘血,我們將編譯器版本從 TypeScript 1.8 提升到了 TypeScript 2.1,您可以從 TypeScript 官方文檔 了解從 TypeScript 1.8 至 2.1 引入的全新特性评甜。除此之外灰粮,我向開發(fā)者簡單介紹一些常見的技巧和問題解決方式

新特性

允許使用 ECMAScript 6 的絕大部分新語法

您需要在tsconfig.json中添加以下內(nèi)容

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

當(dāng)您添加es6字段后,就可以在白鷺引擎中使用全部 ES6 的新特性忍坷。ES6 功能列表您可以參見 ECMAScript 6 入門 這篇文章粘舟。
ECMAScript 6 的新特性中熔脂,屬于語法的部分會(huì)由 TypeScript 直接編譯為舊瀏覽器兼容的實(shí)現(xiàn)。屬于 API 的部分是需要開發(fā)者加入一個(gè) polyfill 以保證舊瀏覽器不會(huì)報(bào)錯(cuò)柑肴。目前引擎并沒有添加這些 polyfill霞揉,但是我們有計(jì)劃在 4.0.x 版本中為開發(fā)者自動(dòng)添加 polyfill 支持。

更智能晰骑、更嚴(yán)格的 TypeScript 類型推斷

白鷺引擎4.0 版本中我們針對(duì) TypeScript 的特性适秩,將引擎 API 進(jìn)行了更細(xì)致的梳理,引入更細(xì)致的 API 方法簽名硕舆,以比較常見的 DisplayObject.addEventListener 這個(gè) 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) { // 事件類型必須手動(dòng)聲明為 egret.TouchEvent,才能保證嚴(yán)格類型
                this.doSomething(); // 第三個(gè)參數(shù)傳遞的是 button抚官,函數(shù)里的 this 應(yīng)該是button扬跋,不是 Main 的實(shí)例,所以不能調(diào)用 doSomething() 方法
            },button);
        );
    }
    private doSomething(){
        
    }
}

比如在白鷺引擎4.0版本中凌节,DisplayObject 的類型被調(diào)整為了以下類型

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) { // 事件類型無需手動(dòng)聲明就可保證嚴(yán)格類型
                console.log (e.local_x) //由于已經(jīng)推斷出 e 的類型是 egret.TouchEvent钦听,所以這里會(huì)報(bào)錯(cuò)  
                this.doSomething(); //自動(dòng)推斷出這里的 this 應(yīng)該是 button,進(jìn)而檢查出這里會(huì)報(bào)錯(cuò)
            },button);
        );
    }
    private doSomething(){
        
    }
}

允許使用 async / await 關(guān)鍵詞

async / await 是 ES2017 語法標(biāo)準(zhǔn)刊咳,他可以大幅節(jié)省異步代碼的處理彪见。注意使用這個(gè)語法糖需要在 tsconfig.json 中添加 lib : es6 或者 lib : es2015.promise

可能問題

升級(jí)到白鷺引擎4.0之后,您可能會(huì)遇到以下問題:

  • Egret Wing 代碼提示報(bào)錯(cuò)娱挨。
    如果您遇到這種問題是因?yàn)槟?IDE 尚不支持 TypeScript 2.1余指,請把對(duì)應(yīng)的 IDE 升級(jí)至最新版本。 Egret Wing 升級(jí)至 4.0 以上版本跷坝。
  • 編譯代碼報(bào)錯(cuò)
    升級(jí)到 TypeScript 2.1 之后酵镜,TypeScript 變得更為智能,也變得更為嚴(yán)格柴钻,可能會(huì)有一些之前的不規(guī)范的寫法會(huì)導(dǎo)致報(bào)錯(cuò)淮韭,對(duì)其進(jìn)行調(diào)整即可,比如 if ( x == false ) { 這樣的邏輯在 TypeScript 1.8 不會(huì)報(bào)錯(cuò)贴届,但是在 2.1 會(huì)報(bào)錯(cuò)靠粪,因?yàn)檫@種代碼雖然是可以正確運(yùn)行,但是有很大的潛在風(fēng)險(xiǎn)(比如 x = 0 )的時(shí)候毫蚓。
  • 編譯代碼出現(xiàn)錯(cuò)誤占键,典型錯(cuò)誤堆棧如下:
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)

這個(gè)問題是我們在進(jìn)行版本升級(jí)時(shí)考慮不周引發(fā)的問題,對(duì)此非常抱歉元潘,這個(gè)問題已經(jīng)在下一個(gè)版本( 4.0.1 ) 確認(rèn)會(huì)得到解決畔乙,您也可以通過盡可能的不要在類的靜態(tài)屬性中直接創(chuàng)建對(duì)象來規(guī)避這個(gè)問題。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末翩概,一起剝皮案震驚了整個(gè)濱河市牲距,隨后出現(xiàn)的幾起案子返咱,更是在濱河造成了極大的恐慌,老刑警劉巖牍鞠,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件咖摹,死亡現(xiàn)場離奇詭異,居然都是意外死亡皮服,警方通過查閱死者的電腦和手機(jī)楞艾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來龄广,“玉大人硫眯,你說我怎么就攤上這事≡裢” “怎么了两入?”我有些...
    開封第一講書人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長敲才。 經(jīng)常有香客問我裹纳,道長,這世上最難降的妖魔是什么紧武? 我笑而不...
    開封第一講書人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任剃氧,我火速辦了婚禮,結(jié)果婚禮上阻星,老公的妹妹穿的比我還像新娘朋鞍。我一直安慰自己,他們只是感情好妥箕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開白布滥酥。 她就那樣靜靜地躺著,像睡著了一般畦幢。 火紅的嫁衣襯著肌膚如雪坎吻。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評(píng)論 1 299
  • 那天宇葱,我揣著相機(jī)與錄音瘦真,去河邊找鬼。 笑死黍瞧,一個(gè)胖子當(dāng)著我的面吹牛吗氏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播雷逆,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼污尉!你這毒婦竟也來了膀哲?” 一聲冷哼從身側(cè)響起往产,我...
    開封第一講書人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎某宪,沒想到半個(gè)月后仿村,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡兴喂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年蔼囊,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衣迷。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡畏鼓,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出壶谒,到底是詐尸還是另有隱情云矫,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布汗菜,位于F島的核電站让禀,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏陨界。R本人自食惡果不足惜巡揍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望菌瘪。 院中可真熱鬧腮敌,春花似錦、人聲如沸麻车。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽动猬。三九已至啤斗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間赁咙,已是汗流浹背钮莲。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留彼水,地道東北人崔拥。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像凤覆,于是被迫代替她去往敵國和親链瓦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • afinalAfinal是一個(gè)android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,429評(píng)論 2 45
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,077評(píng)論 25 707
  • 今天上了財(cái)商的第七課,關(guān)于價(jià)值塔部分贴膘。收獲很多卖子,和大家分享。 一刑峡、以前在我心中什么是價(jià)值洋闽? 做自己喜歡的事是有價(jià)值...
    雨露姐閱讀 219評(píng)論 0 0
  • 懈怠诫舅、抵觸、拖延阳似、懶癌......這就是拖延癥的具體表現(xiàn)形式骚勘,也是當(dāng)前普遍存在的社會(huì)現(xiàn)象。想減肥撮奏,卻總是想著從下一...
    9c42a2489e1d閱讀 569評(píng)論 0 2
  • 第一個(gè)概念信息對(duì)稱 就是在市場條件下俏讹,想要實(shí)現(xiàn)有效的交易,雙方掌握的信息必須對(duì)稱畜吊。信息如果不對(duì)稱泽疆,掌握信息比較充分...
    苕花吃紅薯閱讀 342評(píng)論 0 0