[TypeScript] 函數 Part I (Functions Part I)

Hi 大家好,我是 Charlie

接下來要講解的是函數( Functions ),相信許多工程師已經非常的了解函數,畢竟函數在其他語言中有舉足輕重的地位,同時函數也是 JavaScript 的基礎,透過函數, JavaScript 實現了類似類別的架構,但正是因為透過一堆函數才導致結構讓接手的人相當卻步。儘管 TypeScript 現身,仍然無法取代函數去定義 “ How to do things. ” 的地位,所以我們來介紹函數吧!

首先,確保我們都站一樣的基準點上,請知道 TypeScript 當初的誕生解決了許多 JavaScript 為人詬病的特性( Ex. 欠缺強型別、結構難以掌握、似有若無的介面規範…等等)。 TypeScript 完全基於 JavaScript 語法,在編譯後會生成 *.js 的程式碼以供使用。
Functions and Types

先從函數的基本架構開始吧,創建函數的方式有兩種,分別是大部分我們所熟知也為我們所用的命名函數 ( Named Functions )以及大多輔用 CallBack 的匿名函數(Anonymous Functions)。 其實並無太大的不同,只不過架構上看起來不一樣。 例子中我特別針對每個變數甚至函數都進行型態的定義,當然你可以不用像我這樣搞剛,我會用只是因為我想體現 TypeScript 的強型態嘛!

Arrow Functions

箭頭函數 ( Arrow Functions ) 屬於匿名函數的一種,透過簡潔的宣告方式一樣可以建構函數,缺點是對於初次接觸的人在第一眼會有點難理解。我自己的理解方法是參數放在箭頭前,實作細節在箭頭後。 對於 Lambda 運算式熟悉的人現在一定對於箭頭函數心有戚戚,我之後還會再詳細介紹。

需要注意的地方:
1️⃣ 假如參數只有一個而你不介意型態為 any ,可以不括弧(code:6)
2️⃣ 假如是沒有參數的實作,則須要給予空括弧。
Optional ,Default Parameters

TypeScript 函數裡的每一項參數預設都是必須填入的,意思是說編譯器會檢查你傳入的參數數目、型態是否與定義的一致。 而所謂的預設,意思就是我們可以控制。

範例中我演示了如何使用可選 ( Optional ) 參數及默認 (Default) 參數:

1️⃣ 在參數後加上 ? 代表這個參數是可選參數,意即它不一定要被填入,但如果他沒有被使用者傳入的話則預設為 undefine (code:5)
*可選參數一定要放在最後,如果我們想要將 firstName 改為可選參數,就必須調整位置。
2️⃣ 在參數後直接賦予預設值就代表這個參數是默認參數,雖然不一定要被填入,但不填入時只有既定答案 (code:12)。
*可選參數與默認參數不可同時使用。

介紹完可選與默認,有一點我還是不明白,如果我想丟入超出預期數量的參數的時候我到底該怎麼辦? 其餘參數是其中一種答案。

Rest Parameters

其餘參數在之前介紹解構 (Destructuring)的時候就有使用過了。 在參數錢加上 “…” 可以讓餘下的參數們變為陣列以供使用。


第一部分到這裡告一個段落,餘下的章節會介紹更詳細關於函數的應用 😉

To be continue…
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.