Typescript函数类型-简化基础

函数是非常重要的模块，每个函数执行一个任务来进行的。

1.函数以及箭头函数的定义类型和返回值

(1)函数声明式

typescript 复制代码

function add(x:number,y:number){
    return x + y
  }
console.log(add(3,5)) // 8

(2)函数表达式

typescript 复制代码

const add = function(x:number,y:number){
    return x + y
  }
  console.log(add(2,3)) // 5

(3)箭头函数式

typescript 复制代码

const add = (x:number,y:number):number => x+y
  console.log(add(3,3)) // 6

函数可以给每个参数添加类型且函数可以添加返回类型，这样能够推断返回值类型。另外：参数不能多一个也不能少一个。箭头函数是有自带返回，不需要加return。

2.函数默认参数or可选参数

(1)函数默认参数

typescript 复制代码

const add = (x:number = 10,y:number = 20):number => x+y
  console.log(add()) // 30

默认参数：传递的参数必须与期望的参数一致，保证在函数本身参数为默认值与结果的返回值一致。

(2)函数可选参数

typescript 复制代码

const add = (x:string,y?:number):string => x+y
  console.log(add("hello"))  // hello

可选参数，可以传也可以不传，当参数不传的时候，一般值就是undefined。一般参数后面添加?可以实现可选。注意：函数默认参数和可选参数不能用在一起，否则会报错，如下：

typescript 复制代码

function xx(name:string,age?:number = 20){
     return name + age
 }
 // error

(3)函数参数为对象

typescript 复制代码

interface User{
    name:string,
    age:number
 }
 function res(user:User):User{
     return res
  }
  console.log(res({name:'xb',age:18})

可以看到，函数也可以支持对象，首先定义接口类型，然后在函数本身参数类型为User接口类型，且类型为Object。

3.剩余参数

typescript 复制代码

 const fn = (num:number[],...item:any):any =>{
     console.log(num,item)
     return item
 }
 const arr:Array<number>= [3,5,7]
 console.log(fn(arr,'4','5','6')) // 3, 5, 7 ] [ '4', '5', '6' ] [ '4', '5', '6' ]

剩余参数可以是不限的参数的，通过省略号可以在函数参数中使用数组。

4.函数this类型

typescirpt 复制代码

interface User{
    name:number[],
    fn:(this:User,num:number)=>void
 }
 let obj:User = {
     name:[1,2,3],
     fn(this:User,num:number){
         this.name.push(num)
      }
}
obj.fn(4)
console.log(obj) // {name:[1,2,3,4], fn:[Function:fn]}

this在函数中被调用的时候才会指定哪个。fn期望在User对象上调用，this是User的类型。

5.函数重载

函数重载允许同一个函数接收不同数量或者类型的参数比如：需要实现一个reverse，输入数字123，输出为321，也可能输入字符串hello，输出为olleh 利用联合类型，如下

typescript 复制代码

 function reverse(x: number | string): number | string | void {
     if(typeof x==='number'){
         return Number(x.toString().split('').reverse().join(''))
     }else if(typeof x==='string'){
         return x.split('').reverse().join('')
     }
 }

虽然还是缺陷的，不能够精确的表达，再来优化下，如下：

typescript 复制代码

function reverse(x:number):number;
function reverse(x:string):string;
function reverse(x:number|string):number|string|void{
    if(typeof x === 'number'){
        return Number(x.toString().split('').reverse().join(''));
    }else if(typeof x === 'string'){
        return x.split('').reverse().join('')
    }
}

前面二个是函数定义，最后一次是函数实现。注意：一般会有从前面的函数定义开始批评，所以多个函数定义。如果有包含关系，需要优先把精确的定义写在前面。