CIO
|
PCDIY!
|
旗標圖書
|
旗景數位影像
|
讀者服務
首 頁
即時新聞
業界動態
最新活動
企業採購
精選文章
線上教學
品牌活動
程式碼下載
雲端運算智庫
最近新增的
精選文章
AP內建AI引擎 Mist Cloud平台分析能力強 Juniper Mist AI領先全球 改善WiFi穩定、效能首選
解決IT供應鏈攻擊
內部威脅的七個警訊
遠百以專案辦公室推動數位體驗
多廠牌與多重電信業者網路架構的挑戰與機會
德明科大啟用電貿暨AI實習基地 ViewSonic ViewBoard 智慧互動電子白板 扮要角
淺談計算誤差
秀傳醫療體系統 以Lenovo HyperConverged HX 超融合架構扎穩智慧醫療發展基礎
模組化設計 偵測率達99.99% 全面防杜惡意郵件入侵 首選Cellopoint Email UTM
滿足網路管理與檔案安全傳輸需求,Ipswitch的MOVEit及WhatsUp Gold一次完整提供
來自學界的資料分析利器 - Weka 與 R
北醫建置肺癌資料庫,透過深度標註訓練AI,協助醫師早期發現癌症
北榮AI門診上路!人工智慧判讀腦瘤,有效縮短醫師確診時間
台灣智慧機器人玩具聯盟攜手英閱音躍研創 推廣T. Robot程式教育,協助國中小學扎根培養運算思維
一場與時間賽跑的戰役 ,人工智慧加速心血管疾病診斷
最多人點閱的
精選文章
免費IT建置--Linux系統操作與管理
免費IT建置--網頁伺服器的完美組合LAMP(下)
初探Hadoop開放原始碼平台環境
Linux下的防火牆(基礎篇)
免費IT建置--檔案共享與檔案伺服器
Linux下的防火牆(進階篇)
N.Y.BAGELS CAFE善用SAP Business One
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 影片播放器範例
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 線上查詢匯率
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 擲骰子遊戲
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 音樂播放器範例
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 來電黑名單
免費IT建置--網頁伺服器的完美組合LAMP(上)
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 繪圖板範例
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ Matrix應用範例
精選文章 - 開發技術
分享到Plurk
分享到FaceBook
TypeScript的介紹以及基本操作
文‧圖/李沛承
2016/10/6 上午 10:18:02
為什麼要使用TypeScript
JavaScript寫得好好的為什麼要使用TypeScript呢?我認為可維護性對一個應用程式而言是相當重要的。許多人對JavaScript都有一個認知,就是JavaScript比較沒有辦法適用於大型的應用程式開發,大家都知道JavaScript寫出來的程式五花八門,同樣一個功能還可以用很多種方式寫出來,也知道JavaScript寫出來的程式不好維護而且只能在執行時期偵錯,不同人寫出來的JavaScript還很難理解,規模越大的JavaScript應用程式,偵錯的難度越高,所以啦,很多人就認為要寫好JavaScript的難度的確有點高,所以乾脆就少寫一點。
什麼是TypeScript
TypeScript是一個具有型別的JavaScript的超集合(SuperSet),也就是說原本的JavaScript本身就是涵蓋在TypeScript的語法之內,意思就是說原本的JavaScript語法在本身什麼都不修改的情況下他就是一個完整以及有效的TypeSctipt語法,並且100%相容。
可以把程式從JavaScript變成TypeScript並且在撰寫TypeScript的過程之中加上一些額外(TypeScript)的特性,最後再透過TypeScript的編譯器把TypeScript的語言編譯回ECMAScript3(ES3)相容的JavaScript,編譯後的JavaScript語法,相容於ECMAScript3所代表的就是它幾乎可相容於任何的瀏覽器上(包括連IE6以上版本都可以正常執行) 、任何主機或者任何的作業系統,並且它是開放原始碼!
TypeScript擁有的功能例如靜態型別檢查,由於JavaScript本身是個弱型別的程式語言,所以很難在開發時期發現一些程式的瑕疵,可以使用TypeScript的靜態型別檢察功能,透過TypeScript在編譯的過程之中,發現許多潛在的問題跟錯誤。另外像是類別、模組這樣的機制則可以幫助封裝程式的邏輯,這些封裝的特性是為了簡化JavaScript原本存在的物件特性,由於JavaScript本身是以原型為基礎的物件導向程式語言,而TypeScript試圖把它轉變為一個以類別為基礎的程式語言,而以類別為基礎的程式語言對一般的開發人員來說是比較熟悉的,而且語法也變得比較簡單,所以在封裝類別、設計界面甚至於設計一些繼承的特性時,語法上相對的會比用JavaScript來寫還簡單非常多。
JavaScript的特性
首先JavaScript是個動態型別的程式語言,以下來個範例:
這裡一開始用var宣告了一個test的變數,這個變數可以是任意型別,而且可以在執行的過程之中動態的去做切換,這就是動態型別的語言特性,這種無法在開發時期來宣告型別的特性通常又稱之為『弱型別』的程式語言。不過即便如此,JavaScript到底具不具備型別呢?事實上,JavaScript是有型別的,雖然使用var宣告變數可以容納任意物件,只是這些型別是在執行時期才擁有的,在開發時期是沒有辦法決定型別的。
JavaScript的型別分類:
■ 基礎型別(Primitive Type)
● string
● number
● boolean
● undefined
● null
■ 物件型別(Object Type)
● Object
● Array
● Function
● …
此外在執行時期當需要特別檢查型別的時候,自動型別轉換是一個大家普遍會遇到的問題,簡化頻繁檢查型別的動作,相對的缺點就是經常在型別自動轉化的過程之中發生錯誤,所以當自動型別轉換發生的時候,問題也就連帶的發生了,而且這些問題都是發生在執行時期,都得真的執行到那一行的時候錯誤才會發生,因此我們在用JavaScript開發網頁的時候偵錯是非常不容易的。
TypeScript的特性
TypeScript帶來的解決方案就是靜態型別檢查的功能,它可以把動態的型別特性轉變成靜態型別,透過一個TypeScript的編譯器來幫忙做型別的檢查,有了靜態型別檢查的功能就可以幫忙找出應用程式潛在發生的問題,尤其是打錯字以及型別不一致的問題。
TypeScript的型別分類:
■ 基本型別(Basic Type)
● String
● Number
● Boolean
● Array
● Enum
● Any
● Void
這邊有一個特殊的型別是Any,代表任意型別的意思,也就是在TypeScript裡面依然保留了JavsScript原本動態型別的特性,所以還是可以把變數標示為Any的型別來代表這是一個動態型別的變數。
TypeScript主要特性:
■ 靜態型別檢查(僅存在TypeScript編譯時期)
■ 介面(interface)
■ 類別(classes)
■ 模組(modules)
■ 函式
● Lambdas語法
● 函式多載
■ 泛型
■ 型別自動推導
■ 宣告檔定義(*.d.ts)
先來一段純的JavaScript範例:
▲ 圖一:JavaScript Code
這段程式碼,可以儲存為 sample.ts 這樣的檔案,然後透過 TypeScript 編譯器去編譯它,最後會產出一模一樣的 JavaScript 程式碼,這就顯示了它完全相容 JavaScript 語法,同時也證明可以繼續整合既有的 JavaScript libraries(如:jQuery, YUI 等),這都是其它 projects 比較少見的作法。所以只要是寫 JavaScript 的環境(瀏覽器、NodeJS)都可以運用 TypeScript。
TypeScript 到底對 JavaScript developers 有什麼好處呢?它最重要的任務就是在語言中加入了靜態型別(static typing)的語法,不僅讓開發人員利用這些語法撰寫更嚴謹的程式之外,也更容易讓其它工具來做程式碼分析,像是更容易最佳化程式碼或是程式碼編輯器中的語法提示(Intellisense)功能。
接下來使用TypeScript透過加入靜態型別來寫一樣的Code:
▲ 圖二:TypeScript Code
▲ 圖三:依照TypeScript Code產生出來的js檔
可以發現,編譯出來的js檔中的Code和之前的純JavaScript的Code是一模一樣的!接著若我們將原本程式中的obj變數在建構子的時後修改為:var obj = new BirthDay(2016,01,02);(故意製造錯誤的型別),那在編譯時,就會產生下面的錯誤訊息:
▲ 圖四:使用TypeScript型別錯誤的錯誤訊息
如果是函式名不小心輸入錯了也是一樣有錯誤訊息,並且還可以做靜態型別檢查,不但省下很多Debug的閒工夫也提高了程式品質。
▲ 圖五:使用TypeScript函式名錯誤的錯誤訊息
在這段程式碼中(圖六)可以看到 TypeScript 加入了interface的關鍵字,而且IBirthDay介面中的每一個成員都有宣告了它的type: string,並且在BirthDay的建構子中也加入了型別的描述,這樣一來就讓程式碼變得嚴謹得多,而透過 TypeScript 的編譯器編譯過後,便會產生這樣的程式碼(圖七):
▲ 圖六:在TypeScript加入interface的關鍵字來使用
▲ 圖七:依照TypeScript Code產生出來的js檔
結論
我覺得Typescript的概念真的很不錯,不但保留整體架構,而且就算有ㄧ些Code本來就是js檔的話也沒關係,它可以100%相容,讓javascript好的一面保留,導致不好開發的部分也提出了很不錯的解決方法,避免開發者犯ㄧ些打錯字以及型別不一致的錯誤,本來JavaScript只有在執行時期偵錯才能知道,而TypeScript在編譯時期就能夠知道。使用TypeScript還有一個非常大的優點就是工具支援,在Visual Studio下能還夠做自動編譯、自動型別檢查、命名重構以及還可以享受到到開發工具帶來的Intellisense功能,相信Typescript會成為一個前端工程師非常好的利器。(作者李沛承服務於凌羣電腦金融產品研發處)
參考連結
開發者之魂:快速瞭解 TypeScript 是什麼東西
The Will Will Web
Alan Tsai 的隨手筆記:[Typescript] 如果Javascript是屬於組合語言(Assembly Language),那麼Typescript就是高級語言 - 概念
黑暗執行緒:Hello, TypeScript!
黑暗執行緒:NG筆記3-使用TypeScript
回首頁...
關於RUN!PC
|
廣告刊登
|
聯絡我們
|
讀者服務
|
雜誌訂閱
|
出刊&補寄時間
-- Copyright© FLAG INFORMATION CO., LTD. 旗訊科技(股)公司. All rights reserved. 本站圖文著作權所有 未經授權 不得任意轉載使用 --
-- 請使用1024*768螢幕解析度,IE 7.0或firefox 3.0以上瀏覽器,以達到最佳閱讀效果--