ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[TOC] >[success] # 函数 上一章讲了 **Interface** ,本章讲解一下 **函数** 中如何 **约定输入、约定输出** ,在 **JavaScript** 中,有 **2** 种常见的 **定义函数的方式** —— **函数声明** 和 **函数表达式** ,下面将展示 **2** 种 **声明方式** 。 >[success] ## 函数声明 **basic-types.ts** ~~~ // x,y,z都为number,z是可选参数,return 时也必须是number function add(x:number, y:number, z?:number): number{ if(typeof z === 'number'){ return x + y + z } else { return x + y } } let result = add(1, 2) // 使用错误示范 // 1. 参数类型错误 // add(1,'2') // 2. 参数个数不正确 // add(1, 2, 3, 4) ~~~ 注意:**输入多余的(或者少于要求的)参数,是不被允许的** 。 >[success] ## 表达式声明 [函数表达式参考文章](https://ts.xcatliu.com/basics/type-of-function.html#%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F) 如果要我们现在写一个对 **函数表达式** 的 **定义**,可能会写成这样: ~~~ // x,y,z都为number,z是可选参数,return 时也必须是number let add = (x:number, y:number, z?:number): number => { if(typeof z === 'number'){ return x + y + z } else { return x + y } } ~~~ 这是可以通过编译的,不过事实上,上面的代码 **只对等号右侧的匿名函数进行了类型定义** ,而 **等号左边** 的 **add**,是 **通过赋值操作进行类型推论而推断出来的** 。如果需要我们手动给 **add** 添加类型,则应该是这样: ~~~ // x,y,z都为number,z是可选参数,return 时也必须是number let add:(x:number, y:number, z?:number) => number = (x:number, y:number, z?:number): number => { if(typeof z === 'number'){ return x + y + z } else { return x + y } } ~~~ 注意不要混淆了 **TypeScript** 中的 **=>** 和 **ES6** 中的 **=>** 。 在 **TypeScript** 的类型定义中,**=>** 用来表示函数的定义, **左边** 是 **输入类型** ,需要用括号括起来, **右边** 是 **输出类型** 。 在 **ES6** 中,**=>** 叫做 **箭头函数**,应用十分广泛,可以参考[ES6 中的箭头函数](http://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0)。 >[success] ## Interface 约束函数 我们之前讲解了如何用 **Interface** 如何 **约束对象** ,现在我们讲一下用 **Interface** 如何 **约束函数的参数以及函数返回的数据** ,代码如下: **basic-types.ts** ~~~ // x,y,z都为number,z是可选参数,return 时也必须是number let add = (x:number, y:number, z?:number): number => { if(typeof z === 'number'){ return x + y + z } else { return x + y } } // 用 interface 约束函数参数类型 interface Isum { // (参数类型规定): 返回类型规定 (x:number, y:number, z?:number): number } // add2 函数等于 add 函数 let add2: Isum = add ~~~