TypeScript真香系列-函数

前言

TypeScript真香系列的内容将参考中文文档，但是文中的例子基本不会和文档中的例子重复，对于一些地方也会深入研究。另外，文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码，可以访问TypeScript的在线编译地址，动手操作，印象更加深刻。

函数的基础

函数是JavaScript应用程序的基础，同样TypeScript也可以创建有名字的函数和匿名函数，不过TypeScript在JavaScript的基础之上添加了很多额外而且很有用的功能。

函数类型及定义

TypeScript中也可以以函数式声明和函数表达式来定义函数：

// 函数式声明
function sum(a: number, b: number): number {
    return a + b;
}

//函数表达式
let sumTwo = function(a: number, b: number): number { return a + b; };

在上面的例子中，我们给函数添加了类型，给输入的参数和返回值都进行了严格的定义，这样在开发的时候，会避免一些问题的出现。当然我们也可以省略返回值类型，因为TypeScript可以根据返回语句自动的推断出返回值的类型，这被叫做“按上下文归类”，这个在后续的章节会讲到。

function sum(a: number, b: number){
    return a + b;
}

既然是JavaScript的超集，那么箭头函数也是可以的：

let sumTwo = (a: number, b: number) => { return a + b; };

可选参数

当我们在TypeScript函数中指定了参数后，在调用函数的时候就必须传入相应个数的参数。

function sum(a: number, b: number) {
    return a + b;
}
sum(1, 3); //4
sum(1); //错误，期望是两个参数，但是只有一个

在JavaScript中，函数的参数是可选的，如果在调用函数的时候没有传指定的参数的话，这个参数就是undefined。在TypeScript中我们可以指定参数为可选，这样我们在调用函数的时候就可以选择传参了。

function sum(a: number, b ?: number) {
    return a + b; // 错误，b可能是undefined
}
sum(1, 3);
sum(1);

上面的例子中，a加一个undefined是没有意义的，所以我们可以像上面这个例子一样，用 “?” 来表示可选：

function sum(a: number, b?: number) {
    if (b) { 
        return a + b;
    } else {
        return a;
    }
    
}
sum(1, 3); // 4
sum(1);  //1

更可以这样：

function sum(a: number, b?: number) {
   return b ? a + b: a ;
}
sum(1, 3); //4
sum(1);  //1

默认参数

和JavaScript一样，我们同样可以给TypeScript函数的参数指定默认值：

function sum(a: number, b = 6) {
    return a + b;
}
sum(1, 3); //4
sum(1); //7

可以从上面的例子看出来，给参数设默认值后的参数如果在末尾的话，那么在函数调用的时候也是可选的。如果默认值参数不在末尾呢？可以看看下面这个例子：

function sum(a = 1, b : number) {
    return a + b;
}
sum(1, 3); //4
sum(1); //错误，期望是两个参数，但是只有一个参数
sum(undefined, 1); //2

剩余参数

TypeScript中的剩余参数也可以说就相当于js中的剩余操作符（rest）,用 “…” 表示，用法差不多：

function fn(a: number, b: string, ...args:string[]) {  
   return args.length;
}
fn(1, "2", "3", "4", "5" );  // 3

还有诸多类似JavaScript函数的操作，在TypeScript也有所体现。

参考

https://github.com/zhongsp/TypeScript

最后

文中有些地方可能会加入一些自己的理解，若有不准确或错误的地方，欢迎指出~

原文始发于微信公众号（旅行中的程序员）：TypeScript真香系列-函数

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/217362.html