> For the complete documentation index, see [llms.txt](https://ianchen0119.gitbook.io/deno/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ianchen0119.gitbook.io/deno/typescript-ji-chu-pian/untitled-1.md).

# 在函式中應用強型別

### 在函式中應用強型別

在 TypeScript 問世前，開發者需要耗費額外的心力去避免下面的情況發生:

```
function sum(para1, para2){
    return para1 + para2;
}
let result = sum('Ian',3);
```

雖然這樣的錯誤並不會讓程式崩潰，但我們會得到超乎開發者預期的結果。

若我們今天是開發一項線上的大專案，是不會允許這種低級錯誤發生的。

然而， TypeScript 的出現，幫助我們解決這個看似簡單，但又惱人的問題。

```
function sum(para1: number, para2: number){
    return para1 + para2;
}
```

如果你希望程式碼更容易被理解，可以將回傳的參數也標記上型別:

```
function sum(para1: number, para2: number): number{
    return para1 + para2;
}
```

事實上，在我們在 Deno 上撰寫 TypeScript 時，編譯器也會要求我們對函式的做型別註記。

```
function sum(para1, para2) {
  return para1 + para2;
}
```

若以上面的程式碼下去編譯，編譯器便會跳出錯誤訊息:

```
TS7006 [ERROR]: Parameter 'para1' implicitly has an 'any' type.
function sum(para1, para2) 
// ...
```

```
[ERROR]: Parameter 'para2' implicitly has an 'any' type.
function sum(para1, para2)
// ...
```

### 函數表達式

在一般的情況下，我們會這樣定義函數(函式)表達式:

```
function sum(para1: number, para2: number): number{
    return para1 + para2;
}
```

實際上，這麼做僅僅是對右側的匿名函式進行了類型定義並賦值給 `sum`:

```
let sum = function(para1: number, para2: number): number{
    return para1 + para2;
}
```

那如果我們希望對 `sum` 定義型別，我們可以這麼做:

```
let sum: (x: number, y: number) => number = function(para1: number, para2: number): number{
    return para1 + para2;
}
```

> 注意: 不要把 TypeScript 中的 `=>` 和箭頭函式搞混了!\
>  在 TypeScript 的類型定義中， `=>` 用来表示函式的定義，左側是輸入參數的型別 (需要使用`()`包住)，右側則是回傳參數的型別。

### 善用 Spread/Rest 運算子

> JavaScript ES6 引入了新的運算子: `...` 來表示展開或其餘運算子。

假設我們希望修改一下前面常常看到的 `sum` 函式，讓它能夠把多個參數相加，一般的作法如下:

```
function sum(para1: number, para2: number, para3: number): number{
    return para1 + para2 + para3;
}
```

我們可以發現這樣的做法沒有什麼彈性，這時我們可以使用 `rest` 運算子解決這個問題:

```
function sumAll(...args) { 
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}
sumAll(1,2,3,4,5)
```

使用 `rest` 運算子後，參數都會被壓縮在陣列中，因此在上述範例中才會用到 for-loop 將參數一一取出並做疊加。\
 若我們希望有部分參數被獨立出來，可以這麼做:

```
function sumAll(para1, para2, ...args) { 
  let sum = 0;
  console.log(para1, para2)
  for (let arg of args) sum += arg;

  return sum;
}
sumAll(1,2,3,4,5)
```

至於 `spread` 可以幫助我們將陣列展開:

```
function sum(para1: number, para2: number): number{
    return para1 + para2;
}
let params = [1, 2];
sum(...params)
```

或是應用在多個參數之間:

```
function sum(para1: number, para2: number, para3: number, para4: number): number{
    return para1 + para2 + para3 + para4;
}
let params = [1, 2];
sum(5, ...params, 7)
```

我們可以觀察到，同樣是 `...` 符號，應用在不同的情境中會有不同的功能:

* 在函式定義的輸入使用有 `rest` 的功用。
* 在函式呼叫的輸入使用有 `spread` 的功用。

> 該運算子算是非常靈活好用的功能，想要看更多的話也可以參考今天的延伸閱讀唷!

### 延伸閱讀

> 同樣的事情在不同人眼中可能會有不同的見解、看法。
>
> 在讀完本篇以後，筆者也強烈建議大家去看看以下文章，或許會對型別、變數宣告...等觀念有更深層的看法唷！

*  [fooish 程式技術](https://www.fooish.com/javascript/ES6/spread-rest-operator.html)
*  [Typescript 入門教程](https://ts.xcatliu.com/basics/type-of-function.html)
*  [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ianchen0119.gitbook.io/deno/typescript-ji-chu-pian/untitled-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.