白鷺引擎 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閱讀 228,461評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,538評論 3 417
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,761評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,207評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,419評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,959評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,678評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,978評論 2 374

推薦閱讀更多精彩內容

  • afinalAfinal是一個android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,467評論 2 45
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,660評論 25 708
  • 今天上了財商的第七課,關于價值塔部分。收獲很多,和大家分享。 一、以前在我心中什么是價值? 做自己喜歡的事是有價值...
    雨露姐閱讀 226評論 0 0
  • 懈怠、抵觸、拖延、懶癌......這就是拖延癥的具體表現形式,也是當前普遍存在的社會現象。想減肥,卻總是想著從下一...
    9c42a2489e1d閱讀 580評論 0 2
  • 第一個概念信息對稱 就是在市場條件下,想要實現有效的交易,雙方掌握的信息必須對稱。信息如果不對稱,掌握信息比較充分...
    苕花吃紅薯閱讀 347評論 0 0