Browse by Tags

用 TypeScript await 讓操作確認流程回歸直覺
上回提到 TypeScript 2.1 讓 ES5 平台也能支援 async、await ,形同 JavaScript 非同步程式的一場革命,衝著這點大家都該認真考慮改用 TypeScript。但 async、await 當真如此神奇?想想,上回漏講一個 await 殺手級應用案例,說服力有點弱,趕緊補上。 大家小時侯都有寫過這種需求:網頁進行更新、刪除操作前跳出對話框請使用者三思,回答「取消」可以反悔取消,回答「確定」才正式執行。在那個古老而純真的年代,只要寫一行就搞定: if (confirm...
Posted 01 January 2017 09:32 AMJeffrey | with no comments 3,177
Filed under:
JavaScript 非同步程式革命-async、await 與 TypeScript 2.1
.NET 4 的 Task 大幅簡化多執行緒程式碼複雜度,而 4.5 推出的 async/await ( 參考 )則讓非同步程式的寫法更精簡。(註:在博客園找到一篇從 Task、ThreadPool 談到 await 的 廣泛介紹 ,可以一讀) 網頁開發老鳥都知道,JavaScript 端的非同步邏輯不比 C# 簡單,複雜起來會讓人寫程式寫到嘔出幾十兩鮮血。於是在前端也看到類似 Thread、Task、async/await 的發展史:最早只能靠 Callback、setTimeout 苦手硬刻...
Posted 23 December 2016 06:33 AMJeffrey | with no comments 8,079
Filed under:
小試 JavaScript Promise
非同步邏輯是寫 JavaScript 逃不掉的複雜課題,古早流行的做法是傳入 Callback 函式當參數,待特定作業完成再呼叫,缺點是串接程序一旦變多,就會出現波動拳式排版,寫到渾然不知身處夢境第幾層: asyncJob1( function () { //Callback 函式: asyncJob1 完成後呼叫 //...... ayncJob2( function () { //Callback 函式: asyncJob2 完成後呼叫 //...... ayncJob3( function...
與上層命名空間成員名稱重複問題:TypeScript 與 C#
同事遇到的 TypeScript 小問題一則,如下圖,Foo 與 Bar.Foo Module 裡都有個 IBlah Interface(不算良好的設計但合法,用在特定情境可簡化程式),在 Bar.Foo 內想引用更上層 Foo 的 IBlah,不管宣告型別是 IBlah 還是 Foo.IBlah,指向的都是 Bar.Foo.IBlah。 同樣的情境,在 C# 裡也會上演,在 Bar.Foo 命名空間內不管寫 Foo.IBlah 或 IBlah 指的都是Bar.Foo.IBlah: C# 可用 global...
Posted 17 November 2016 05:19 PMJeffrey | with no comments 2,478
Filed under: ,
TypeScript 1.4 - 2.0 改版整理
TypeScript 2.0 已於 9/22 正式推出 ,想起從 1.4版 起已好久沒有深入了解改版差異,順勢做個重點整理。 TypeScript 改版歷程 TypeScript 1.0 推出時,由於具有支援強型別、介面、繼承等物件導向語言特性,提供編譯期錯誤檢查,再加上完整 IDE 支援,很適合開發大型且複雜的 JavaScript 程式,獲得許多前端開發者青睞,TypeScript 也 自此 成為我開發網站的首選。 TypeScript 在 1.1 時選擇重寫編譯器,提供四倍速度,同時也移上...
Posted 24 September 2016 06:03 PMJeffrey | with no comments 4,626
Filed under:
【茶包射手日記】TypeScript MSBuild編譯失敗
接獲報案,專案修改無法使用 TFS Build Service 編譯,錯誤訊息如下: D:\Works\1\BLAH\src\Web\Scripts\Foo.ts (112): Build: 'let' declarations are only available when targeting ECMAScript 6 and higher. 訊息指向程式使用TypeScript新支援的 let語法 ,只能編譯成ES6,但專案設定輸出ES5。但專案在本機Visual Studio...
Posted 01 June 2016 05:45 AMJeffrey | with no comments 2,167
Filed under: ,
TypeScript的this偵錯陷阱
接獲同事報案追查TypeScript問題,二人一起陷入迷霧近20分鐘才恍然大悟… 有段TypeScript程式自訂類別,在類別方法用this.PropName="..."修改自身屬性值(註:類似需求我習慣用 self大法 ,寫成self.PropName="…"),偵錯時用瀏覽器F12開發者工具下指令檢查,卻發現this.PropName沒有被正確設定,我建議在程式碼加入console.log(this.PropName)交叉檢查,跑出更詭異的狀況,如下圖...
Posted 23 April 2016 09:28 AMJeffrey | with no comments 3,453
Filed under:
快速將C#型別轉成TypeScript介面定義
使用TypeScript處理AJAX呼叫時,常需要在前端定義與C#物件屬性一致的TypeScript型別,以便將後端傳來的JSON資料還原成強型別物件。針對較正式的資料模型,我會用 CodeGen方式 同步C#與TypeScript端的型別定義(順便處理多語系問題)。但蠻多時候處理對象只是零散的小型別,不必殺雞用牛刀,針對這類需求,推薦一個好用工具- TypeLITE 。 在NuGet查關鍵字"typelite",很快就可找到TypeLite套件。 安裝後,專案會加入TypeLite...
Posted 15 January 2016 05:48 AMJeffrey | with no comments 4,707
Filed under:
Protractor、TypeScript與Chai
搞定用TypeScript寫Protractor測試,陸續參考一些範例,發現蠻多人偏好使用 Chai 程式庫。原本Protractor預設的寫法expect(foo).toEqual(5),改用Chai之後變成: expect(foo).to.be.a('string'); expect(foo).to.equal('bar'); expect(foo).to.have.length(3); expect(tea).to.have.property('flavors'...
Posted 24 May 2015 11:18 AMJeffrey | with no comments 3,510
Filed under: ,
使用TypeScript撰寫Protractor測試
裝好Protractor ,就可以動手寫測試了。Protractor預設使用Jasmine,之前寫Angular單元測試時 玩過 ,語法並不陌生,但是用慣神兵利器,遇上超過一百行的JavaScript,少了Visual Studio + TypeScript拎杯根本活不下去,啊啊啊啊~(顯示為鎚子被沒收的雷神索爾在地上打滾) 因此,首要任務得找出使用TypeScript撰寫Protractor測試的方法。我選擇用VS2013開啟一個空白Web Apllication專案,不啟用MVC、Web API也不啟用WebForm...
Posted 23 May 2015 08:35 AMJeffrey | with no comments 4,229
jQuery TypeScript定義檔2.2.3與KendoUI定義檔不相容
使用NuGet更新全部套件後,jQuery定義檔出現TypeScript編譯錯誤: Error    545    Interface 'JQueryPromise<T>' incorrectly extends interface 'JQueryGenericPromise<T>'.   Types of property 'then' are incompatible...
Posted 28 March 2015 08:51 AMJeffrey | with no comments 2,663
Filed under:
NG筆記25-如何將Directive Isolated Scope宣告為TypeScript強型別?
NG範例23-使用Directive建立自訂網頁元素 介紹過好用的自訂元素。除了資料互動不高的單純DOM操作Directive,一般我們都會另建獨立Scope(Isolated Scope)避免彼此干擾。而Isolated Scope宣告時需指定{ propA: "=", propB: "@" }形式的scope物件,供NG參照建立參數對應,因此不像Controller、Service可以寫成獨立類別,而這衍生的副作用則是-scope參數在link函式裡被視為任意型別...
【茶包射手日記】TypeScript JS檔打包壓縮時發生錯誤
前陣子專案的TypeScript更新成 1.4 ,今天上線時發現網站出現JavaScript錯誤,由錯誤訊息推測為 打包壓縮程序 有誤:第一個foo.js的最後一列 //# sourceMappingURL=foo.js.map 跟第二個bar.js的第一列;var __extends = this.__extends || function (d, b) { 被合併成一列,由於開頭有//符號,整列被註解掉,bar.js的第一列被吃掉以致程式碼不全出錯: /* Minification failed...
Posted 10 March 2015 12:57 AMJeffrey | with no comments 2,960
Filed under:
【茶包射手日記】奇妙的TypeScript編譯Bug
同事報案:Visual Studio 2013不知何時起無法編譯TypeScript,存檔或編譯都不會產生JavaScript檔。嘗試重啟VS2013、Windows依然無法解決,灰心喪志之餘,已經萌生重灌VS2013的念頭。 茶包射手出動。SOP第一步為判斷災難範圍,盡可能將事故現場縮到最小,用最少條件或步驟重現問題,封鎖線的範圍愈小,搜索調查的困難度愈低。 另開一個簡單Web專案,加入Hello World等級的TypeScript,測試編譯功能正常。故排除VS2013 TypeScript完全損壞的可能性...
Posted 04 February 2015 10:23 PMJeffrey | with no comments 3,148
Filed under: ,
TypeScript 1.4升級通知
同事報案,下載Angular TypeScript定義檔 後,jQuery.d.ts出現大量錯誤訊息,無法編譯: 看了錯誤所在,出現U|JQueryGenericPromise<U>的新奇寫法,先前在Kendo UI討論區發問曾聽Telerik RD提過,這似乎是Union Type新語法。TypeScript檔是1/22新出的,推測有加入新語法導致錯誤的可能。由TypeScript官網找到VS2013套件 下載連結 ,證實TypeScript 1.4版已於1/17釋出。 安裝1.4版後重開Visual...
Posted 27 January 2015 10:06 AMJeffrey | with no comments 3,612
Filed under:
更多文章 下一頁 »

搜尋

Go

<January 2017>
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication