TypeScript实例讲解（三）

接上一篇：TypeScript实例讲解（二）

本篇内容：深入TypeScript函数。

TypeScript函数

function hello () {}
const hello = function() {}
const hell0 = () => {}

TypeScript 定义函数与普通 JavaScript 完全一致。那函数类型注解有些什么注意的呢？首先我们定义一个函数并按照 上一篇 讲解的方法进行类型注解。

function total( x: number, y: number ): number {
    return x + y
}

上面我们对 total 函数的入参（也就是它的形参）进行了类型注解，对它的返回值也进行了类型注解。其实 total 函数的返回值是可以通过类型推断推断出来的。所以上面的函数我们可以简写成：

function total( x: number, y: number ) {
    return x + y
}

虽然部分函数返回值可以推断出来，但是在实际项目开发过程中，我们最好给所有函数返回值都手动加上类型注解，增强代码的一个健壮性，可以避免函数内部的一些代码编写错误。

常见的函数返回值类型

函数的返回值类型除了前面我们提到的 number 、string 等基本类型，还有 void 、never 等特有类型。

// 例1
function dance(): void {
    console.log('dancing');
}

如上：void 是一个常见的函数返回值类型，代表空。意思是当前函数不需要返回值。如果我们在函数中添加一句 return xxx，编辑器则会提示错误：Type 'xxx' is not assignable to type 'void'。

// 例2
function errorEmitter (): never {
    while(true) {}
    // 这后面的代码永远也不会执行
}

如上：never 也是一个函数返回值类型，代表当前函数永远也不会执行完成。比如出现了死循环或抛出了异常。

函数参数为对象(解构)

function total({x, y}: {x: number, y: number}): number {
    return x + y
}
total({x: 1, y: 2})  // 传递的值为一个对象

函数参数接收解构的内容时，类型不要写成 function total({ x: number, y: number }) {}，特别是只有一个参数的时候很容易写错。

// 关于参数解构
function total ({x, y}) {
    return x + y
}
// 函数内部其实是这样的
function total (options) {
    let {x, y} = options  // 这是引擎背后做的
    return x + y
}

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。