JavaScript與TypeScript在動態型別上的差異

Jun
appxtech
Published in
4 min readOct 14, 2020

首先動態型別,指的是一個變數在同一個程式中,可能會隨著不同的條件或內容而改變值。簡單的來說,「就是變數的內容會隨程式內容而改變」。舉例:線上訂購旅館在選擇日期時,設一個變數choseDate,去接受你所點選的日期,因此choseDate會隨著你點選的不同日期而改變內容,這就是動態的改變。

在瞭解JavaScript與TypeScript在動態型別的差異前,需要先知道JavaScript與TypeScript之間的關係。其實TypeScript簡單的說,就是JavaScript的加強版,TypeScript為此「調整」了一些JavaScript上的使用限制。

這裡我會用「調整」而並非改善,是因為原JavaScript的使用風格是最原始的,但也因為太自由,因此當在撰寫大量的程式碼上時,就可能會造成不少的問題。JavaScript與TypeScript的關係如下

可以理解TypeScript的底層上使用的,依然是JavaScript。但在設計與使用上,加入了更多設計與使用上的限制風格。使得在在撰寫時可能將人為造成的程式錯誤率降到最低。

JavaScript是弱類型(型別)的語言

為什麼說JavaScript是弱類型(型別)的語言呢?看看以下型態改變的例子

會發現num原本是數字,但在某段程式中被改變成了文字(字串),當程式碼在開發中愈來愈大(長)時,變數(num)可能在不知不覺中就被改變了,但這樣的錯誤在JavaScript中是被允許的,因此在編譯的過程中並不會被發現,而是在執行的結果時,該變數(num)在被其他程式碼使用時,才會在結果中發現。這個時候,程式人員需一步一步的追查是在哪裡發生型態被更換的。

另外再來看一個重覆宣告的例子

變數(ans),在不同的地方重覆宣告並給予並不同的內容值。這「可能」將使程式發生嚴重的錯誤。會說是「可能」,是因為變數(ans)可能在該段使用完畢後就不再需要,因此即使後面會再重覆使用也並不會影響程式的執行結果。但這對於未來在維護與閱讀上,增加一定的困難度。

當然如果程式碼不長,其實很容易的就可以找出問題點。對於設計與使用的風格上,JavaScript要設計的好,變成是取決於程式人員的經驗與設計習慣。

TypeScript是強類型(型別)的語言

TypeScript在使用的風格上,加入了許多程式語言中的參考型別的限制。這是什麼意思?就是變數在一開始宣告時,就設定好了它的型別,為的就是以避免在撰寫的過程中重新改變了該變數的型別。看看下列的例子

從第1–5行會發現,在一開始時變數num先給予10的數值,因為num就會被限制為只能接受數值型態的值,因此在第4行將文字字串傳給num的話,此時編譯就會出錯。而TypeScript其實在宣告時,就已經先設定好變數的型態類別,從第7行來看,就是在變數後面增加了宣告限定型態。

若一開始就不給予值,只宣告變數名稱,或對於在「特殊情況下」需要都接受任何型態時怎麼辦?TypeScript在這方面的彈性非常大,看下列的例子:

從1–7行發現,一開始ans便沒有給予值與型態,而在後面使用時便可以任意的賦予任何型態的值,數字、字串、布林….。而從第9行來看,就知道其實TypeScipt給予的是「any」這個型態,這讓變數在使用上將更加的自由。但用any時要注意時使用的時機,以避免未來不確定內容時而造成的錯誤。

--

--