《前端之路》- TypeScript(二) 函式篇
阿新 • • 發佈：2020-03-18
[TOC]
### 一、定義函式方法
> 在 es5 中定時函式的方法有 命名函式和函式表示式（匿名函式）這門兩種。那麼同樣的，在 TypeScript 中，函式的定義是什麼樣子的呢？
#### 1-1 命名函式
這裡需要注意的一點是： viod 型別，是函式不返回任何型別資料
> `TypeScript` 語法
```typescript
function func1(): string {
return '213';
}
function func2(): number {
return 123;
}
function func3(): Array {
return [123, {}];
}
function func4(): Array {
return [123, 456];
}
function func5(): Array {
return ['123', '1233'];
}
function func6(): void {
console.log(123);
}
```
> 被編譯成 `ES5` 的 `JavaScript`
```javascript
"use strict";
function func1() {
return '213';
}
function func2() {
return 123;
}
function func3() {
return [123, {}];
}
function func4() {
return [123, 456];
}
function func5() {
return ['123', '1233'];
}
function func6() {
console.log(123);
}
```
#### 1-2 函式表示式
這裡需要簡單的普及一個 ES6 的箭頭函式，無大括號時，直接表示 return 這個值。
> `TypeScript` 語法
```typescript
const fun11 = (): string => {
return '123';
};
const fun12 = (): string => '123';
const fun13 = (): any => [123, '123'];
const fun14 = function(): string {
return '123';
};
const fun15 = function(): any {
return { name: 123 };
};
```
> 被編譯成 `ES5` 的 `JavaScript`
```javascript
"use strict";
var fun11 = function () {
return '123';
};
var fun12 = function () { return '123'; };
var fun13 = function () { return [123, '123']; };
var fun14 = function () {
return '123';
};
var fun15 = function () {
return { name: 123 };
};
```
### 二、定義函式傳參
#### 2-1 定義函式傳參
這裡需要簡單的描述下，函式的傳參的型別和之前文章中介紹到的資料型別定義方式是一致的。
> `TypeScript` 語法
```typescript
const parasFun1 = (x: string, y: number) => {
console.log(x + y);
};
let res1 = parasFun1('1', 2); // 猜猜返回啥？哈哈哈哈 可以子啊留言中寫下你的答案
```
> 被編譯成 `ES5` 的 `JavaScript`
```javascript
"use strict";
var parasFun1 = function (x, y) {
console.log(x + y);
};
var res1 = parasFun1('1', 2); // 猜猜返回啥？哈哈哈哈 可以子啊留言中寫下你的答案
```
### 三、可選傳參
#### 3-1 定義函式的可選傳參
這裡需要簡單的描述下，函式的可選引數，很明顯就是可以選擇傳入這個引數也可以選擇不傳入這個引數，且可選引數一定是排在必傳引數的後面。
> `TypeScript` 語法
```typescript
const parmaFunc1 = (name: string, age?: number) => {
if (age) {
return `我的名字是：${name} --- 我的年齡是： ${age}`;
} else {
return `我的名字是：${name} --- 我的年齡保密！`;
}
};
let res11 = parmaFunc1('zhangsan', 123);
let res12 = parmaFunc1('zhangsan');
const parmaFunc2 = (name?: string, age: number) => {
if (age) {
return `我的名字是：${name} --- 我的年齡是： ${age}`;
} else {
return `我的名字是：${name} --- 我的年齡保密！`;
}
};
// 這裡的 parmaFunc2 會報錯麼？
```
> 被編譯成 `ES5` 的 `JavaScript`
```javascript
"use strict";
var parmaFunc1 = function (name, age) {
if (age) {
return "\u6211\u7684\u540D\u5B57\u662F\uFF1A" + name + " --- \u6211\u7684\u5E74\u9F84\u662F\uFF1A " + age;
}
else {
return "\u6211\u7684\u540D\u5B57\u662F\uFF1A" + name + " --- \u6211\u7684\u5E74\u9F84\u4FDD\u5BC6\uFF01";
}
};
var res11 = parmaFunc1('zhangsan', 123);
var res12 = parmaFunc1('zhangsan');
```
### 四、預設傳參
#### 4-1 定義函式預設傳參
這裡的預設傳參和 ES6 中預設傳參的使用方式是一致的
> `TypeScript` 語法
```typescript
const defaultParamFunc1 = (x: string, age: number = 10): void => {
console.log(`我的名字是：${name} --- 我的年齡是： ${age}`);
};
let defaultRes1 = defaultParamFunc1('zhangsan');
// 這裡會打印出什麼呢？
```
> 被編譯成 `ES5` 的 `JavaScript`
```javascript
"use strict";
var defaultParamFunc1 = function (x, age) {
if (age === void 0) { age = 10; }
console.log("\u6211\u7684\u540D\u5B57\u662F\uFF1A" + name + " --- \u6211\u7684\u5E74\u9F84\u662F\uFF1A " + age);
};
var defaultRes1 = defaultParamFunc1('zhangsan');
```
### 五、傳遞剩餘引數
#### 5-1 定義函式傳遞剩餘引數（三點運算子）
這裡的傳遞剩餘引數和 ES6 中傳遞剩餘引數的使用方式是一致的,只不過我們可能需要對剩餘引數進行一個型別的定義
> `TypeScript` 語法
```typescript
// 寫一個demo 就是，我們需要對一個對個求和，且我們不知道具體會有多少個引數
const restParamsFunc1 = (x: any, y: any, z: any): number => {
return x + y + z;
};
let restRes1 = restParamsFunc1(1, 2, 3); // 正常執行
// let restRes2 = restParamsFunc1(1, 2, 3, 4); // ts 會報錯，說第四個引數未宣告
const restParamsFunc2 = (...res: number[]): number => {
let sum = 0;
for (let index = 0; index < res.length; index++) {
sum += res[index];
}
return sum;
};
let restRes3 = restParamsFunc2(1, 2, 3, 4); // 這個時候又會得出什麼結果呢？
```
>