TypeScript 基础（二）

怼烎@ 2022-08-28 00:40 288阅读 0赞

### 文章目录 ###

*  6. 函数：
 *   *  6.1 定义函数：
     *  6.2 函数调用：
     *  6.3 注意：
     *  6.4 函数的参数：
     *  6.5 形参和实参：
     *  6.6 有可选参数的函数：
     *  6.7 有默认值参数的函数：
     *  6.8 有剩余参数的函数：
     *  6.9 函数定义的方法：
     *   *  1） 函数声明法：
         *  2）函数的表达式法：
         *  3）箭头函数（ES6语法）：

接上 [TypeScript 基础（一）][TypeScript]

# 6. 函数： #

函数是 ts 程序中基本的功能模块，简单的理解就是函数是对功能的封装。

## 6.1 定义函数： ##

// 语法结构：
    function 函数名(参数: 数据类型): 返回值 {
        
        执行代码
    }
    // 例子：
    function add(num1: number, num2: number): number {
        
        return num1 + num2;
    }
    // 注意：return 关键字有两个作用：
    // 1.作为结果的返回关键字
    // 2.结束当前函数（ return 关键字后的代码，不再执行。）。

![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-D5Y-w5aW9_size_20_color_FFFFFF_t_70_g_se_x_16]

## 6.2 函数调用： ##

this.add(4,5);

![请添加图片描述][e5cf1176bec6426a8f3691027e83567a.jpg]

## 6.3 注意： ##

*  函数名和变量名一样都需要遵守命名规则；
 *  在声明函数的时候，参数可有可无，多个参数之间用逗号隔开；
 *  函数的返回值是可有可无的，如果没有手动设置，则返回值类型为 void；
 *  大括号内为函数体。

## 6.4 函数的参数： ##

*  形参（ 函数定义时候写的参数就是形参 ）。从字面意思可以看出，形参就是形式上的参数（形参 --> 变量）。
 *  实参（调用函数的时候，传递的具体值就是实参）。从字面意思可以看出，实参就是实际上的具体值。

## 6.5 形参和实参： ##

在函数调用的时候，我们需要按照形参的规则传递实参，有几个形参就要传递几个实参，并且每一个实参的数据类型都要与对应的形参数据类型一致；

## 6.6 有可选参数的函数： ##

// 函数有两个形参，假设第一个必传，第二个可传可不传
    public add(n1: number, n2?: number): number {
        
        
    }
    
    add();  // 错误，参数个数不匹配
    add(1);  // 正确
    add(1, 2);  // 正确

## 6.7 有默认值参数的函数： ##

// 当函数有可选参数时，我们必须检测是否杯传递，
    // 我们还可以使用默认参数解决参数不确定的情况
    public add(n1: number, n2: number = 3): number {
        
        return n1 + n2;
    }
    
    add();  // 报错
    add(1);  // 正确，结果为 4
    add(1, 2);  // 正确，结果为 3

## 6.8 有剩余参数的函数： ##

public add(...num: number[]): number {
        
        var sum = 0;
        for(var i: number = 0; i < num.length; i++) {
        
            sum += num[i];
        }
        return sum;
    }
    // 调用
    add();  // 正确，返回 0
    add(1);  // 正确，返回 1
    add(1,2);  // 正确，返回 3

## 6.9 函数定义的方法： ##

### 1） 函数声明法： ###

public add(n1: number, n2: number): number{
        
    }

### 2）函数的表达式法： ###

var add = function(n1: number, n2: number): number{
        
        return n1 + n2;
    }

### 3）箭头函数（ES6语法）： ###

var add = (n1: number, n2: number): number => {
        
        return n1 + n2;
    }

[TypeScript]: https://blog.csdn.net/weixin_46682106/article/details/121021455
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-D5Y-w5aW9_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ad5daa60e9d44921b017973e87f3a56f.png
[e5cf1176bec6426a8f3691027e83567a.jpg]: /images/20220828/24c404c9c1df48e6b70c586e215fac45.png