【 TypeScript 】对TypeScript中函数的理解？与JavaScript的区别？

以下文章TS表示TypeScript JS 表示JavaScript

1. 是什么

函数是JS应用程序的基础，帮助我们实现抽象层、模拟类、信息隐藏和模块
在TS里，虽然已经支持类、命名空间和模块，但函数仍然是主要定义行为的方式，TypeScript为JavaScript函数添加了额外功能，丰富了更多的应用场景 函数类型在TS 类型系统中扮演着非常重要的角色，它们是可组合系统的核心构建模块

2. TypeScript函数的使用方式

跟js定义函数十分相似，可以通过function关键字、箭头函数等形式定义，例如下面是一个简单的函数加法

const add = (a: number, b: number) => a + b

上述只定义了函数的两个参数类型，这个时候整个函数虽然没有被显式定义，但是实际上TypeScript编译器能够通过类型推断这个函数类型
当我们没有提供函数实现的情况下，有两种声明函数类型如下：

// 方式一
type LongHand = { (a: number): number; };
// 方式二
type ShortHand = (a: number) => number;

当存在函数重载时，只能使用第一种形式

2.1 可选参数

当函数的参数可能是不存在的，只需要在参数后面加上？代表参数可能不存在：

const add = (a: number, b?: number) => a + (b ? b : 0)

这个时候参数b 可以是number类型或者是undefined类型，即可以传入一个number类型或者不传都可以

2.2 剩余类型

剩余参数与JS的语法类似，需要用…来表示剩余参数
如果剩余参数rest一个由number类型组成的数组，则如下：

const add = (a: number, ...rest: number[]) => rest.reduce(((a, b) => a + b) , a)

2.3 函数重载

允许创建数项名称相同但输入输出类型或个数不同的子程序，它可以简单地称为一个单独功能可以执行多项任务的能力

关于typescript函数重载，必须要把精确的定义放在前面，最后函数实现时，需要使用|操作符或者?操作符，把所有可能的输入类型全部包含进去，用于具体实现
这里的函数重载也只是多个函数的声明，具体的逻辑还需要自己去写，typescript并不会真的将你的多个重名function的函数体进行合并

例如我们有一个add函数，它可以接收string类型的参数进行拼接，也可以接收number类型的类数进行相加 如下。

// 声明
function add (arg1: string, arg2: string): string
function add (arg1: number, arg2: number): number
// 因为我们在下面由具体函数的实现，所以这里并不需要添加declare 关键字
// 实现
function add (arg1: string | number, arg2: string | number) {
    // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单写arg1 + arg2
    if (typeof arg1 === 'string' && typeof arg2 === 'string') {
        return arg1 + arg2
    } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
        eturn arg1 + arg2
    } 
}

3. TypeScript函数与JavaScript函数的区别

• 从定义的方式而言，typescript声明函数需要定义参数类型或者声明返回值类型
• typescript在参数中，添加可选参数供使用者选择
• typescript增添函数重载功能，使用者只需要通过查看函数声明的方式，即可知道函数传递的参数个数以及类型