Typescript教程之函数-白红宇

通过函数你可以将重复使用的代码块进行封装，然后在你需要的时候调用即可，换句话说函数就是具有某一功能的代码块。

在JavaScript中创建一个函数可以： 1. 函数声明， 2.函数表达式， 3. 箭头函数。以上创建函数的方式在Typescript中也是支持的。

Typescript的函数是有类型的

函数的类型包括：参数类型和返回值类型。(可以不指定，但若是指定了则必须一致)

参数类型：通过在参数后面加冒号指定参数类型。

函数声明

function fn(name:string,age:number){          return name + age   }复制代码

函数表达式

let fn = function(name:string,age:number){                return name + age  }复制代码

箭头函数

let fn = (name : string,age : number)=> name + age ;复制代码

注意：只有参数类型匹配，那么参数才有效，否则则会报错。

如果参数类型不确定可以将其设置为 any

let fn = (name :any ,age : any)=> name + age;复制代码

返回值类型：用于指定返回值的类型。写法依然是通过冒号指定返回值类型。

函数声明

function fn(name:string,age : number):string{              return name + age  }复制代码

函数表达式

let fn = function (name : string , age : number):string {                     return name + age  }复制代码

箭头函数

let fn = (name : string , age :number) : string => name + age复制代码

注意：

如果没有返回值，需要指定类型为void 。

如果你指定了返回值类型为void ，偏偏又在函数内 return 则会报错。

如果你指定非void类型，偏偏又没有return 则也会报错。

完整函数类型

注意： Typescript是有类型推断机制的，也就是说如果我们不指定变量的类型，ts会自行对该值的类型进行推断。

上面函数表达式和箭头函数的完整写法：

在函数参数类型和返回值类型之间使用 (=>)符号

let fn : (name : string , age : number) => string = function(name : string , age : number):string {                 return name + age     }     let fn : (name : string , age : number) => string = (name : string , age : number) : string => name + age复制代码

只要是调用函数时，传入的参数是匹配的，便是正确的，前后的名字不必一定一样，在函数中也没必要一定指定。如下也是正确的 :

let fn : (na: string , a : number) => string = function(name : string , age : number):string {                return name + age     }     let fn : (na: string , a : number) => string = function(name , age ) {              return name + age      }复制代码

函数参数都是必须的

在JavaScript中，传递的参数是可选的，对应的形参如果不传则会是 undefined ，但是在Typescript中，我们传递的参数个数与函数接收的参数个数一致，类型也需一致。

注意：个数一致是指的少了多了都不可以！！！

可选参数

在 : 号前面添加 ? 将参数设置为可选参数，可选参数若不被传值的时候，默认为 undefined 。

function fn (name : string , age ?: number) : string {                 return name + age      }复制代码

注意：虽然将age 设为了可选参数，但是上面的函数还是最多只能传两个参数。

默认参数

使用 = 给参数指定默认值

function fn (name : string , age : number = 3) : string {                   return name + age     }复制代码

剩余参数

如果我们不知道有多少参数传递进来怎么办呢？

在Javascript中，我们可以在 arguments 中来接收，而在Typescript中我们可以使用 ... (三个小数点) 将剩余参数放进一个数组中

function fn (name : string , ...last : string []) : string{             return name + last.join("")      }     console.log(fn("张三","年龄","13"))复制代码

方法重载

函数重载：指同一个函数，根据传递的参数不同会有不同的表现形式。

注意： JS中是支持重载的，TS中只是提供了重载功能，但是相对于c#或者 java等语言相比还是不完整的。

Typescript的函数重载共用一个函数体，也就是说无论声明多少个同名函数，它们共同使用同一个函数体，在调用时会根据传递参数类型的不同而执行这一函数体。

function fn(name : string) : string;     function fn(age : number) : number ;     function fn(nameSpace:any) : any {            if(typeof nameSpace === "string"){                      return "姓名:" + nameSpace;            }else if(typeof nameSpace === "number"){                     return "年龄:" + nameSpace       }     }复制代码

共用的函数体

if(typeof nameSpace === "string"){              return "姓名:" + nameSpace;       }else if(typeof nameSpace === "number"){              return "年龄:" + nameSpace       }复制代码

以上代码只允许传 string 和 number 的参数，其他的还是会报错。