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('')
    }
}

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

相关推荐
顺丰同城前端技术团队8 分钟前
DeepSeek 国产大模型新标杆
前端·后端·程序员
Java水解9 分钟前
微前端架构:从单体到模块化的前端新革命
前端
Mr_汪11 分钟前
uniapp使用h5的map(已弃用)
前端
前端进阶者14 分钟前
vite调试node_modules下面插件
前端·vite
YaHuiLiang22 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户261245834016125 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
CAD老兵31 分钟前
前端 Source Map 原理与结构详解
前端
gnip35 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长1 小时前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_1 小时前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js