現在日常的 JavaScript 已經完全離不開 TypeScript 了,在強型別的保護下,不但不容易寫出錯誤的代碼,還能透過開發工具提供的 IntelliSense 提高開發速度。但是如果手邊的程式碼只能使用 JS 來撰寫,那該怎麼辦呢?像是 Protractor 的設定檔 protractor.conf.js 就是一個典型的例子,本篇文章我將分享如何在現有 JavaScript 檔案下使用 TypeScript 的型別檢查提示。
... 繼續閱讀 ...
網站建置不是件簡單的事,我們都知道網站做好之後,有好多細節需要兼顧,所以許多公司花了大量的時間與金錢,耗用人力對維護中的網站進行不斷的、重複的人工測試,想達到的目的不外乎是希望網站不要出錯,可以給客戶/使用者最好的網站使用體驗。但你是否知道單元測試、整合測試、端對端測試之間的差異在哪裡?本篇文章將闡述他們之間不同的部分。
... 繼續閱讀 ...
最近推出的 Angular CLI 7.3 版本,新增了一個相當亮眼的特性。當你的 Angular 應用程式同時要符合 IE 或舊版瀏覽器時,以往都會用 Polyfill 來填充缺少的 HTML5/JS APIs,但這件事到了 Angular CLI 7.3 又變得更貼心了。不但如此,這個新特性一樣可以用在各種 SPA 框架中,像是 Vue, React 或其他函式庫也都可以套用相同技巧。欲知詳情請繼續看下去。
... 繼續閱讀 ...
Angular 的 HttpClient 可以說相當簡單易用,不過在實務上開發時又好像不是那麼順。因為 TypeScript 的強型別特性,導致有時候程式雖然可以跑,但在 VSCode 卻會顯示錯誤。今天抽空整理了些常見的地雷與陷阱,幫助大家理解問題發生的原因,未來也可以避免類似的問題再度發生。
... 繼續閱讀 ...
我們今年在 2018/9/15 舉辦了一場「企業前端框架趨勢論壇」活動,現場來了將近 200 人,可見許多人對前框架的發展相當感興趣。由於是我們第一次舉辦大型活動,我發現整體活動安排得不是很理想,尤其是最後專家座談的部分,留給會眾提問的時間太少了,這點我們一定會在日後的活動中改進。本篇文章,我打算回答線上提問的所有問題,幫助大家釐清疑惑。
... 繼續閱讀 ...
我們許多專案,都會有網頁設計師設計版型,然後再交由前端工程師套版。不過有很多版型,都會留有 <a href="#"></a> 這樣的空連結,比較常見的用途都是在「多層次選單」的上層連結。但這樣的連結,在套用至多頁面路由的 SPA 應用程式中時,就會出現問題。由於 SPA 網頁在設計的時候,都會套用 <base href="..."> 元素,設定網頁中所有連結的基礎位址 (Base URL),當使用者點擊 <a href="#"> 這樣的連結時,就會導致網頁重新整理!本篇文章將解說幾個可能的解決方案。
... 繼續閱讀 ...
撰寫 Angular 的開發者,目前應該是最自然接觸 RxJS 的了。每當有機會要用上的時候,就會在這一百多個 RxJS 運算子之間徘迴打轉,因為實在太多相似的 API 可以用,以至於經常鬼打牆寫不出來。今天,我就整理幾個不但常用,命名還很像,更容易用錯的 RxJS 運算子。
... 繼續閱讀 ...
昨天寫了一個小工具,可以自動將現有 Angular CLI 建立的專案,轉換成有 Hot Module Replacement (HMR) 功能的版本,只要簡單一個命令 ng add hmr-enabled 就可以搞定,非常方便。不過我在發布專案到 npm registry 的過程中,卻意外遺漏了幾個重要的檔案,原來是有檔案被 .npmignore 給忽略掉了,到了今天傍晚才修復。我們就立刻來看看這個錯誤是怎樣發生的!
... 繼續閱讀 ...