iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
自我挑戰組

從新手開始TypeScript系列 第 2

Day2-JavaScript(JS)與TypeScript(TS)的差異比較

  • 分享至 

  • xImage
  •  

第二天,我們來談談JavaScript(JS)與TypeScript(TS)的比較吧!

使用JavaScript(JS)遇到的問題

  1. 動態型別 (Dynamic Typed)
  2. 弱型別 (Weakly Typed)
  3. 大型應用程式難以除錯
  4. 繼承語法特殊

1.動態型別 (Dynamic Typed)

動態型別可以隨時轉換變數的型別
因此若是在開發或在維護管理上不多加注意的話,
很容易發生錯誤。

如下範例

    var i = 10 ;
    i = "100" ; //success

一開始宣告變數i為數字10,
之後若是轉變為字串"100",在JS上也是可以被允許的喔!

JS為動態型別可以隨時轉換變數的型別

2.弱型別 (Weakly Typed)

弱型別在執行階段才會發生錯誤
即使有開發工具的輔助,
也在開發階段很難發現問題所在。

如下範例

    var i = 10 + "100"  ; //success

在弱型別下不同型別相加是可以被允許的,
因此即使傳入的型別有誤也無法及時發現,
直到執行階段才能再去做找錯除錯的程序。

JS為弱型別在執行階段才會發生錯誤

3.大型應用程式難以除錯

總和JS的動態型別與弱型別的特性,
很容易造成應用程式難以除錯
想當然爾,越大型的專案也就越難找出並去除錯誤。

4.繼承語法特殊

JS的繼承語法特殊,而且不像物件導向程式語言,
若要使用,也是要再做些研究的。

使用TypeScript(TS)的好處

  1. 簡單學習
  2. 型別安全機機制
  3. 目標環境執行JS(非TS)

簡單學習

對於已經會JS的人來說,是不需要學習新的程式語言,
因為TS只是將一些新的特性加到JS上而已,
但若是要活用TS的話,學習還是必要的呢!

另外也因此使移植變得容易,
若要將JS檔案移植為TS檔案的話,
只需要將副檔名 .js 變更名稱為 .ts
一樣是可以運作不會壞掉的喔。

型別安全機機制

TypeScript顧名思義就是著重在型別(Type)上,以型別為主要優勢。
TS提供型別安全機制,
可以解決上述JS遇到的問題,

因為相對的TS擁有靜態型別強行別的特性,

靜態型別 (Static Typed)

不容許轉換變數的型別

    number i = 10 ;
    i = "100" ;//error 

    var i = 10 ;
    i = "100" ;//error 以推論型別
強行別 (Strongly Typed)

不容許轉換變數的型別

    var i = 10 + "100"  ; //error
JS TS
動態型別 靜態型別
弱型別 強型別

因此,更能在開發階段可即早發現問題,
不需要等到執行階段才發現問題,
對於型別上的錯誤可以更有效率的發現與除錯。

在維護上也是會變得更加方便,降低維護成本。
但凡事都是一體兩面,因為多了型別上的管制,在開發上勢必會多出一些開發成本。

目標環境執行JS(非TS)

目標環境真正執行的是TS撰寫完轉譯成的JS
因此,即使TS撰寫錯誤,也會正常轉譯成JS,
而目標環境不會直接壞掉,
因為JS才是真正在運作的程式碼

今日結語

最後,希望大家對於兩者的優缺差異已經大致了解了,
總而言之,型別就是TypeScript(TS)最大的重點!
(想學習的TS的朋友抓好了)


上一篇
Day1-JavaScript(JS)與TypeScript(TS)的基本觀念
下一篇
Day3-TypeScript(TS)安裝開發環境
系列文
從新手開始TypeScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言